Network first caching of index.html using workbox.js

Question

I've integrated a service worker into our Single Page App built with ReactJS, using the workbox-build package by Google.

I'm having some troubles on the pre-caching of the index.html, specifically the service worker is serving an outdated index.html everytime we release a new build. Since it served an outdated index.html, the main JavaScript file is not found since it is versioned based on the build.

</div><script type="text/javascript" src="/static/js/main.fa34a3ce.js"></script>

I have also tried to remove the index.html from pre-cache, and have it in the runtime cache with a network first setting. But it doesn't seem to be cached by the service worker.

runtimeCaching: [
  {
    urlPattern: /\/$/,
    handler: 'networkFirst',
    options: {
      cacheName: 'my-cache-index'
    }
  }
]

You may give a shot at this: github.com/jantimon/html-webpack-plugin. It creates the index.html from template at each build. — Ali Ankarali
– Ali Ankarali, Commented Apr 25, 2018 at 7:52
Hi @AliAnkarali, appreciate the response. I forgot to say that we are using create-react-app and wouldn't want to lean into eject-ing if possible. — Adrian
– Adrian, Commented Apr 25, 2018 at 8:07
You are most likely running into a common double caching situation, refer to this: Cache Control and upcoming changes in Chrome Fresher Service Workers — Dean Taylor
– Dean Taylor, Commented Jun 14, 2018 at 16:12
@DeanTaylor, this is as you have said. I was able to explore this up to the NGINX config that was serving our service-worker.js file, and upon adding the Cache-Control header into a specific the location block in our NGINX config, I was able to fix it. Thanks! — Adrian
– Adrian, Commented Jul 23, 2018 at 13:21
@user3477119 I've posted by comment as an answer feel free to mark it as the answer. — Dean Taylor
– Dean Taylor, Commented Jul 23, 2018 at 14:57

Dean Taylor · Accepted Answer · 2018-07-23 14:56:27Z

3

You are most likely running into a common double caching situation, refer to this Cache Control and upcoming changes in Chrome Fresher Service Workers.

answered Jul 23, 2018 at 14:56

Dean Taylor

42.4k3 gold badges33 silver badges53 bronze badges

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

Comments

Finesse · Accepted Answer · 2019-12-04 03:53:40Z

I tried very hard to setup the network first strategy for precaching but I failed. I've gave up trying and implemented the following strategy: cache first but apply the update on a simple page reload.

To implement it, just add the following option to your Workbox service worker builder (e.g. the Webpack plugin):

skipWaiting: true

Or, if you write the service worker by yourself, add the line to your service worker code:

workbox.core.skipWaiting();

Furthermore, you can show an alert to the user when your application has been updated, and/or reload the page automatically:

// Your service worker registration code
// ...

const registration = await navigator.serviceWorker.register(serviceWorkerUrl);

registration.onupdatefound = () => {
  const installingWorker = registration.installing;
  if (installingWorker == null) {
    return;
  }
  installingWorker.onstatechange = () => {
    if (installingWorker.state === 'installed') {
      if (navigator.serviceWorker.controller) {
        if (confirm('App\'s been updated. Restart to apply the update?')) {
          location.reload();
        }
      } else {
        // The service worker has been installed for the first time
      }
    }
  };
};

By default, the update is checked when the code above is run. You can trigger a check for update manually by calling:

// An appendix to the previous code block
registration.update();

Unfortunately, there is no straightforward way to find out that there is no update.

Collectives™ on Stack Overflow

Network first caching of index.html using workbox.js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related