【发布时间】：2026-02-11 14:25:02
【问题描述】：
我有一个 LeafletJS 地图，其中包含许多使用服务工作者缓存的 protobuf 层。这很好用，可以节省大量的加载时间。
我最近添加了一个 Abort Controller 以在更改缩放级别时停止 Fetch 进程，以从浏览器挂起队列中删除当前缩放级别的磁贴，这也节省了大量时间。
我现在的问题是，中止控制器不会对通过 Service Worker 提供的磁贴起作用，而是仅对从服务器获取的磁贴起作用。因此，我的浏览器仍在尝试从服务人员加载当前缩放级别的磁贴，这是不必要的。
下面是我正在使用的 service worker。
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 吗？
【问题讨论】：
标签： javascript leaflet service-worker fetch-api abort