我有一个 LeafletJS 地图，其中包含许多使用服务工作线程缓存的 protobuf 层。这非常有效并且节省了大量的加载时间。
我最近添加了一个中止控制器，以在更改缩放级别时停止获取过程，以从浏览器待处理队列中删除当前缩放级别图块，这也节省了大量时间。
我现在的问题是，中止控制器不会对通过服务工作线程提供服务的图块起作用，而是仅对从服务器获取的图块起作用。因此，我的浏览器仍在尝试从服务工作线程加载当前缩放级别的图块，这是不必要的。
下面是我正在使用的服务人员。
var cacheName = 'v1';
function updateCache(request) {
return caches.open(cacheName).then(cache => {
return fetch(request, { signal: request.signal }).then(response => {
const resClone = response.clone();
if (response.status < 400)
return cache.put(request, resClone);
return response;
});
});
}
self.addEventListener('fetch', event => {
var url = event.request.url
if(url.includes('tiles')) {
event.respondWith(async function() {
const cachedResponse = await caches.match(event.request);
if(cachedResponse && !cachedResponse.redirected ){
return cachedResponse
}else{
return fetch(url, { signal: event.request.signal }).then(updateCache(event.request));
//return fetch(event.request).then(updateCache(event.request));
}
}());
}
});
self.addEventListener('activate', (event) => {
//console.info('Event: Activate');
event.waitUntil(
self.clients.claim(),
caches.keys().then((cacheNames) => {
console.log(caches.keys())
return Promise.all(
cacheNames.map((cache) => {
if (cache !== cacheName) {
return caches.delete(cache);
}
})
);
})
);
});
self.addEventListener('install', function (event) {
console.info('Event: Install (ServiceWorker Superseded)');
self.skipWaiting();
});
我本以为传递请求信号就足够了，但这似乎永远不会触发它取消fetch(request, { signal: request.signal })
有谁知道如何中止 Service Worker？
这是一个已知的问题。 chrome 或 firefox 都没有实现正确地将 AbortSignal 发送到 FetchEvent.request.signal。看：
https://bugs.chromium.org/p/chromium/issues/detail?id=823697 https://bugs.chromium.org/p/chromium/issues/detail?id=823697
https://bugzilla.mozilla.org/show_bug.cgi?id=1394102 https://bugzilla.mozilla.org/show_bug.cgi?id=1394102
我不知道 safari 的行为是什么。
规范是否正确说明是否应通过该信号进行探测存在一些问题：
https://github.com/w3c/ServiceWorker/issues/1544 https://github.com/w3c/ServiceWorker/issues/1544
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
