Vue-cli: WorkBox does not perform update method

[vilarinholeo]

Version

3.0.0-beta.6

Steps to reproduce

Phases:

1. Run vue create app and select PWA.

2. Run yarn build and serve ./dist to test the site in production.

3. After accessing the site and waiting for the cache to be done, disable the internet and check for offline access.

4. Edit the App.vue by putting some more content.

5. Run yarn build and serve ./dist to test the production site again.

What is expected?

The workbox message is expected: New content is available; please refresh.

What is actually happening?

The message is not displayed, so the workbox is not detecting that the content of the application has been updated.

I've already checked that the service worker is in the cache and is not.

[vilarinholeo]

I have seen that although the updated register-service-worker method is not called, the service-worker collects the update and waits to install. As in the image below:

So maybe this can help.

[vilarinholeo]

I do not know if it was the right solution, but I managed to circumvent it. I put the workbox to skip the wait, in vue.config.js:

module.exports = {
  lintOnSave: false,
  pwa: {
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      skipWaiting: true
    }
  }
}

And in registerServiceWorker.js I changed all content, registering my SW and whenever it is registered I check the temporary cache of the workbox, if it has any content is because the workbox has captured an update and is ready to replace the cache:

/* eslint-disable no-console */

const updated = () => {
  console.log('Has new content!')
  // use window.location.reload(true) to get new cache
}

const register = async (path) => {
  const registration = await navigator.serviceWorker.register(path)
  console.log('SW registred!')

  const cacheList = await caches.keys()
  cacheList.forEach(async (cacheName) => {
    if (!cacheName.includes('-temp')) return

    const tempCache = await caches.open(cacheName)
    const tempCachesKeys = await tempCache.keys()
    if (tempCachesKeys.length > 0) {
      updated()
    }
  })

  registration.onupdatefound = () => updated()
}

const { NODE_ENV, BASE_URL } = process.env

if (NODE_ENV === 'production') {
  if ('serviceWorker' in navigator) {
    register(`${BASE_URL}service-worker.js`)
  }
}