In firefox browser service worker stooped sunndenly after serve the resources to the client

ramesh P 0 Reputation points
2024-05-22T14:13:43.98+00:00

I have develop blazor WASM application for offline thats why I had implement the service worker to intercept the request then serve the resource to the client using cache. Service worker successfully on chrome and edge but in firebox once application load at the time service worker serve the resource to the client then with in 5-10 secs service worker stopped sunddenly and show the start button I had observe this on application tab with service worker on browser. It shows service stopped suddenly. If I had tried to run application offline i got this message on firefox browser that is Offline mode Firefox is currently in offline mode and can’t browse the Web. Press “Try Again” to switch to online mode and reload the page. If manually click start service worker then run offline not working.

I need run offline. service worker stoped in firefox

service-worker.published.js

const cacheName = 'blazor-cache-v1';
const assetsToCache = [
    '/', // index.html
    '/index.html',
    '/css/bootstrap/bootstrap.min.css',
    '/css/bootstrap-5.3.3-dist/css/bootstrap.min.css',
    '/fontawesome-free-5.15.4-web/css/all.css',
    '/style.css',
    '/_content/Blazored.Typeahead/blazored-typeahead.css',
    '/apple-touch-icon.png',
    '/favicon-32x32.png',
    '/favicon-16x16.png',
    '/sample-data/manifest.json',
    '/safari-pinned-tab.svg',
    '/css/app.css',
    '/css/signin.css',
    '/css/Locations.css',
    '/_content/Blazored.Toast/blazored-toast.min.css',
    '/_framework/blazor.webassembly.js',
    '/_content/BlazorIndexedDB/dexie.min.js',
    '/_content/BlazorIndexedDB/blazorDB.js',
    '/_content/Blazored.Typeahead/blazored-typeahead.js',
    '/css/bootstrap-5.3.3-dist/js/bootstrap.bundle.js',
    '/jquery-3.6.0.min.js',
    '/css/bootstrap-5.3.3-dist/js/bootstrap.min.js',
    '/js/bs5-toast.min.js',
    '/js/Syncloading.js',
    '/scripts.js',
    '/js/site.js',
    '/js/globalErrorHandler.js'
];
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName).then(cache => {
            return cache.addAll(assetsToCache);
        })
    );
});
 
 
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(cachedResponse => {
            if (cachedResponse) {
                // If a cached response is found, return it
                return cachedResponse;
            }
            // Otherwise, fetch from network
            return fetch(event.request).then(networkResponse => {
                // Cache the new response and return it
                if (event.request.method === 'GET' && networkResponse.type === 'basic') {
                    return caches.open(cacheName).then(cache => {
                        cache.put(event.request, networkResponse.clone());
                        return networkResponse;
                    });
                } else {
                    return networkResponse;
                }
            });
        })
    );
});
 
 
self.addEventListener('activate', event => {
    const currentCaches = [cacheName];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
        }).then(cachesToDelete => {
            return Promise.all(cachesToDelete.map(cacheToDelete => {
                return caches.delete(cacheToDelete);
            }));
        }).then(() => self.clients.claim())
    );
});

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,450 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
911 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 59,051 Reputation points
    2024-05-22T17:33:29.8866667+00:00

    this is expected behavior. a server worker has a short timeout after it completed its work (activate event on page load, or fetch). chrome has a feature that if the dev tools are open, the service does not timeout.

    that is, normally when there is no work, the service for will stop. then restart on the next event it has registered

    your service worker has no code to support offline mode. it just a simple cache of some assets used to load the hosting page. you don't even cache the blazor wasm, so its not even a complete cache.