服务人员中止控制器

问题描述

我有一个LeafletJS映射，其中包含许多protobuf图层，这些图层使用服务工作者进行缓存。这样效果很好，并节省了很多加载时间。

我最近添加了一个Abort Controller，用于在更改缩放级别以从浏览器待处理队列中删除当前的缩放级别图块时停止提取过程，这也节省了很多时间。

我的问题是，中止控制器不对通过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 })

有人知道如何中止服务人员吗？

解决方法

这是一个已知问题。 chrome或firefox均未正确实现将AbortSignal发送到FetchEvent.request.signal。参见：

https://bugs.chromium.org/p/chromium/issues/detail?id=823697 https://bugzilla.mozilla.org/show_bug.cgi?id=1394102

我不知道野生动物园的行为是什么。

规格是否正确说明是否应通过以下方式检测此信号，这是一个问题：

https://github.com/w3c/ServiceWorker/issues/1544