CODEWITHSUNDEEP
webpackworkbox
pizzae
pizzae

Reputation: 3025

PWA Workbox App not working when offline

Things seem to be working fine when the app is online, I can navigate between pages and files seem to be cached properly. But when I make the browser offline, the app doesn't load.

I get this error:

This site can’t be reached
The web page at http://localhost:8080/ might be temporarily down or it may 
have moved permanently to a new web address.
ERR_FAILED

In the console I get this error:

The FetchEvent for "http://localhost:8080/" resulted in a network error 
response: the promise was rejected.
Promise.catch (async)
workbox.precaching.moduleExports.addRoute.self.addEventListener.event @ 
workbox-precaching.dev.js:1085
sw.js:1 Uncaught (in promise) TypeError: Failed to fetch

I think the last line is the culprit, somehow its not loading the precache manifest file:

importScripts("precache-manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js", "https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js");

The precache manifest file appears in console in the Sources -> Network Tab under the sw.js file category, whilst online. So I'm assuming that somehow this file isn't cached or saved for when the app becomes offline. I've followed the webpack tutorial and didn't seem to find anything that tells the precache-manifest file to be stored. That file doesn't even appear in the Application tab (console) -> Cache -> Cache Storage -> my-app-runtime (or the precached version)

Upvotes: 1

Views: 5237

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

The service worker specification states that URLs fetched via importScripts() are to be implicitly cached (via a "script resource map", so you shouldn't have to take any steps to ensure that precache-manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js is available while offline.

importScripts() URLs are cached via a mechanism other than the Cache Storage API, so they won't show up in the Cache Storage viewer.

I think it's another resource that your service worker is trying and failing to fetch, but without seeing your entire service worker script, it's hard to know what that is.

Upvotes: 1

Related Questions