3

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.

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.

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

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?

1 Answer 1

3

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

1
  • Hi Ben, thanks for the links, makes for an interesting read and pushes the limits of my knowledge. I'll definitely keep an eye on this. Oct 18, 2020 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.