CODEWITHSUNDEEP
javascriptcachingservice-worker
dns_nx
dns_nx

Reputation: 3953

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?

Upvotes: 1

Views: 3338

Answers (1)

Kelvin Schoofs
Kelvin Schoofs

Reputation: 8718

You are probably developing using Chrome, Firefox or another Chromium-based browser. In that case, the developer tool's network tab might shed some light on how exactly the network request is failing. There are quite a few guides you can find (including this one by the Chromium team) that explain a bit more on how to do that.

Although we lack a lot of information, my first guess is that your service worker gets installed during a compile, and that while downloading the js/app.js file, Webpack (or whatever you use) changes the file and causes the download to be interrupted.

Upvotes: 2

Related Questions