Service Worker not busting cache.

[trusktr]

Hello, I've got a weird issue.

In devtools, I have cache disabled.

When I hit ctrl+r, it still lads a cached old file with an error.

When I hit shift+ctrl+r, no problem, and the new file is used and error is gone.

Despite Chrome devtools having cache disabled, that has no effect. Only pressing shift+ctrl+r loads the non-cached version, while pressing ctrl+r always loads the older cached file.

Seems like this has to do with service worker. How do I ensure that caching works properly with the service worker, to eliminate that as possible source of the problem?

Note, I've loaded the production build with a static server a couple times to test it, not sure if that's somehow messing up with the service worker while I'm in dev mode.

I'm experiencing this in dev mode.

[jacebot]

I too can confirm this.

I noticed there is another ticket open to move to the webpack offline plugin preload, and I would like to promote that. (#113)

I also use offline-plugin for webpack in another app that uses a similar set up with no issues. Perhaps we can take a look at what they are doing different?

Currently my app will not update but uses cached files instead unless I hard clear the browser with dev tools open.

This occurs in live production, harder to reproduce or tell in dev since its hot reloaded.

[jeffposnick]

Are you serving your service-worker.js file with HTTP caching enabled? If so, this could lead to delayed updates of cached resources for up to 24 hours (in Chrome):

https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours/38854905#38854905

[kgrosvenor]

I get same in Dev mode also, would be good if it could work like productio does, can we not just check for localhost else activate worker?

[kgrosvenor]

I also disabled cache in nginx, any thoughts?

[Andrey-Pavlov]

Any updates? Cannot update the page hosted on Github Pages.

[u12206050]

This works for me, within registerServiceWorker.js

in the updated() function add:

      setTimeout(() => {
        window.location.reload(true)
      }, 1000)

Full result

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n'
        + 'For more details, visit https://goo.gl/AFskqB',
      )
    },
    cached() {
      console.log('Content has been cached for offline use.')
    },
    updatefound() {
      console.log('New content is downloading.')
    },
    updated() {
      console.log('New content is available; please refresh.')

      setTimeout(() => {
        window.location.reload(true)
      }, 1000)
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error(error) {
      console.error('Error during service worker registration:', error)
    },
  })
}

[xerosanyam]

this is a huge pain, how does one update the content or at least ask the user to update content?

[u12206050]

@xerosanyam here is a crude way:
Create a single javascript file that you exclude from cache and then check for that file say every 10seconds from within your app somewhere. Once the file is not found (due to the suffix of it changing, you can force reload the entire page using window.location.reload(true)

[xerosanyam]

the problem is reloading doesn't work too. the problem is with cache burst

[u12206050]

Are you using a service worker and manifest file correctly? Make sure your manifest file doesn't get cache. Once it changes the service worker will update all the new files in the background and then you can again reload once the updated() function is called.

[xerosanyam]

I used vue-cli and chose pwa support. I thought it'll all be managed.

[u12206050]

No only the bundling of the service-worker and manifest file is managed. Cache busting isn't hence this issue.

Here is my setup that works:

Update these two files as follows

service-worker.js

// service-worker.js

workbox.core.setCacheNameDetails({ prefix: 'd4' })

const LATEST_VERSION = 'v1.8' //Change this value every time before you build

self.addEventListener('activate', (event) => {
  console.log(`%c ${LATEST_VERSION} `, 'background: #ddd; color: #0000ff')
  if (caches) {
    caches.keys().then((arr) => {
      arr.forEach((key) => {
        if (key.indexOf('d4-precache') < -1) {
          caches.delete(key).then(() => console.log(`%c Cleared ${key}`, 'background: #333; color: #ff0000'))
        } else {
          caches.open(key).then((cache) => {
            cache.match('version').then((res) => {
              if (!res) {
                cache.put('version', new Response(LATEST_VERSION, { status: 200, statusText: LATEST_VERSION }))
              } else if (res.statusText !== LATEST_VERSION) {
                caches.delete(key).then(() => console.log(`%c Cleared Cache ${LATEST_VERSION}`, 'background: #333; color: #ff0000'))
              } else console.log(`%c Great you have the latest version ${LATEST_VERSION}`, 'background: #333; color: #00ff00')
            })
          })
        }
      })
    })
  }
})

workbox.skipWaiting()
workbox.clientsClaim()

self.__precacheManifest = [].concat(self.__precacheManifest || [])
workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

And in your regis
src/registerServiceWorker.js

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log('Site is ready')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; Refresh...')
      setTimeout(() => {
        window.location.reload(true)
      }, 1000)
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    },
  })
}

Now every time you make build make sure to update the version within the service-worker.js As long as it is different from what users already have installed, it will trigger a full cache bust before installing the new version and reloading automatically.

[u12206050]

Sorry one more file. In you vue.config.js

Update the options or add it if it is't used already the following:

module.exports = {
  pwa: {
    themeColor: manifestJSON.theme_color,
    name: manifestJSON.short_name,
    msTileColor: manifestJSON.background_color,
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'service-worker.js',
    },
  },
…

[xerosanyam]

Thank you so much!

[xerosanyam]

My service-worker file looks like this.
dist/service-worker.js

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

importScripts(
  "/precache-manifest.65dad24bd5ebee9890500122a011e661.js"
);

workbox.core.setCacheNameDetails({prefix: "dashboard-sense-smart"});

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

It says that I shouldn't change this file directly, so for updating version, is there any better way ?