blazor application can not run at offline specfically in firefox browser

ramesh P 0

I had devlop the blazorWASM application with indexedDb. I had implement service worker for offline application WIth PWA also. Offline working successfully in chrome and edge browser but firefox not working i got the error while debugging that error is

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

blazor_error_2_optimized_2500

InvalidStateError realted indexeddb. Indexeddb object not properly intalized at offline i think thats why when saw the indexedb on browser shows the error like image

Service worker runing when application open then after serve caches resources to client service worker stopped. when i was try to run application offline i got the InvalidStateError message

please help me. thanks

I had used blazorindexedb package for deveop the application

https://github.com/nwestfall/BlazorDB

1 answer

Bruce (SqlWork.com) 69,196

you don't show your service worker code, but I'd guess that there is not an active connection to the indexdb (you failed to call indexDB.open() at the start of the query).

Ramesh Penta 0

const cacheName = 'blazor-cache-v1';
const assetsToCache = [
    '/',
    '/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',
    '/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',
    '/icon-192.png',
    '/icon-512.png'
];
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName).then(cache => {
            return cache.addAll(assetsToCache);
        }).catch(error => {
            console.error('Failed to open cache during install: ', error);
        })
    );
});
 
 
self.addEventListener('fetch', event => {
    if (event.request.method !== 'GET') {
        return; // Only cache GET requests
    }
 
    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 && networkResponse.status === 200 && networkResponse.type === 'basic') {
                    return caches.open(cacheName).then(cache => {
                        cache.put(event.request, networkResponse.clone());
                        return networkResponse;
                    }).catch(error => {
                        console.error('Failed to cache during fetch: ', error);
                        return networkResponse;
                    });
                } else {
                    return networkResponse;
                }
            }).catch(error => {
                console.error('Network request failed and no cache: ', error);
                if (event.request.mode === 'navigate') {
                    return caches.match('/index.html');
                }
            });
        })
    );
});
 
 
self.addEventListener('activate', event => {
    const currentCaches = [cacheName];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cache => {
                    if (!currentCaches.includes(cache)) {
                        return caches.delete(cache);
                    }
                })
            );
        }).then(() => self.clients.claim()).catch(error => {
            console.error('Failed to activate service worker: ', error);
        })
    );
});

Share via

blazor application can not run at offline specfically in firefox browser

1 answer

Your answer