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?