How to cache React application in service worker

Question

I'm trying to create a React PWA from scratch. So far my project outputs the minified files to a dist/js folder.

In my service worker file I'm using Workbox to precache the app. This is my setting so far:

importScripts("./node_modules/workbox-sw/build/workbox-sw.js");

const staticAssets = [
    "./",
    "./images/favicon.png",
]

workbox.precaching.precacheAndRoute(staticAssets);

Currently if I enable offline from dev tools > Service Workers, it throws these errors and the app fails to load:

3localhost/:18 GET http://localhost:8080/js/app.min.js net::ERR_INTERNET_DISCONNECTED
localhost/:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
3:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
logger.mjs:44 workbox Precaching 0 files. 2 files are already cached.
5:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED

How can I fix this?

You could probably check this documentation using PWA in React App. There are details about workbox-webpack plugin. It will take care of generating a service worker file that will automatically precache all of your local assets and keep them up to date as you deploy updates. — Aoifeee
– Aoifeee, Commented Jun 3, 2019 at 14:18

Ashish Kamble · Accepted Answer · 2019-06-03 08:29:47Z

1

this means your resources are not getting cached properly, you need to add them to cache before accessing, workbox by default do it for you. it shows 2 files cached, as they present in your array, expected result same do it for all remaining too.

const staticAssets = [
    "./",
    "./images/favicon.png",
    "./js/app.min.js",
    "./manifest.json",
    { url: '/index.html', revision: '383676' }
]

you can try to add eventlistener,

self.addEventListener('install', event => {
  console.log('Attempting to install service worker and cache static assets');
  event.waitUntil(
    caches.open("staticCacheName")
    .then(cache => {
      return cache.addAll(staticAssets);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request)
  .then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

edited Jun 3, 2019 at 8:29

answered Jun 3, 2019 at 8:17

Ashish Kamble

2,8254 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

blankface Over a year ago

how? i thought doing workbox.precaching.precacheAndRoute(staticAssets); should cache it.

Collectives™ on Stack Overflow

How to cache React application in service worker

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related