Service Worker 的中止控制器

我有一个 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