服务人员中止控制器 [英] Abort Controller for Service Worker

问题描述

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

I have a LeafletJS map with a lot of protobuf layers which are cached using a service worker. This works great and saves a lot of load time.

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

I recently added an Abort Controller to stop the Fetch process when changing zoom levels to remove none current zoom level tiles from the browsers pending queue, this also saves a lot of time.

我的问题是，中止控制器不对通过Service Worker提供服务的图块起作用，而仅对从服务器获取的图块起作用.结果，我的浏览器仍在尝试从Service Worker加载任何当前缩放级别的图块，这是不必要的.

My problem is now that the Abort Controller doesn't act on tiles being served via the Service Worker but instead only works on tiles be Fetched from the server. As a result my browser is still trying to load none current zoom level tiles from the service worker which is unnecessary.

下面是我正在使用的服务人员.

Below is the service worker i'm using.

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})

I would have thought that passing on the request signal would be enough but this never seems trigger it to cancel fetch(request, { signal: request.signal })

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

Does anyone know how to Abort a Service Worker?

推荐答案

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

This is a known issue. Neither chrome or firefox have implemented properly sending the AbortSignal through to FetchEvent.request.signal. See:

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

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

I don't know what safari's behavior is.

规范是否正确说明该信号是否应通过以下方式存在一个疑问:

There is some question if the spec properly says whether this signal should be plumbed through:

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

这篇关于服务人员中止控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！