Tuesday 13 July 2021

Cache API - Cache.addAll() encountered a network error

I'm having an issue with the Cache API of JavaScript. I'm developing a PWA, so I have a serviceWorker.js in my app. In this serviceWorker.js file, I want to add files to my static cache. So I configured this to cache the static files:

var CACHE_STATIC_NAME = 'static-v544';
var CACHE_DYNAMIC_NAME = 'dynamic-v544';
var STATIC_FILES = [
    '/css/app.css',
    '/js/app.js',
    '/js/vendor.js',
    '/js/manifest.js',
    '/js/utility.js',
    '/offline'
];

self.addEventListener('install', function(event) {
    console.log('[Service Worker] Installing service worker...', event);
    event.waitUntil(
        caches.open(CACHE_STATIC_NAME)
        .then(function(cache) {
            //console.log('[Service Worker] Precaching App Shell');
            cache.addAll(STATIC_FILES)
            .then((result) => {
                console.log(result);
            })
            .catch((error) => {
                console.log(error);
            });
        })
    );
});

Actually this is working fine, unless there seems to be trouble with the app.js file. So when cache.addAll(STATIC_FILES) is being called, I get the error

Uncaught (in promise) DOMException: Cache.put() encountered a network error

All other files are being cached in the static cache. I need to say, the app.js file is in development very big (~12 MB). It will be shrinked on production. My questions are:

How can i investigate the error more closely? The error message is just giving me this message. Is there a way to get a more detailed error message? What can be the cause of this "network error"? Can it be, that the file is too big? Or can it be that the file is not being downloaded at all, when the service worker is trying to put it in the cache and therefore the error is being thrown?

Many thanks for any hint in advance!



from Cache API - Cache.addAll() encountered a network error

No comments:

Post a Comment