moving between webpack and vite breaks PWA update process

[ssuess]

I am almost complete with my transition from webpack to vite, but there is a final sticking point. My PWA update process no longer works. Previously my register-service-worker.js file would:

• check against a file on the server for version string
• during the updated hook would invoke Notify.create and then perform some actions
• would reload upon dismissal of notify dialog

Now, nothing happens, no dialog is presented ever. The app will update/install if I clear cache or force a reload, but there is no message to users as before. I did not change this file from webpack to vite, is there something I need to change?

here is the file:

import { register } from 'register-service-worker'
import { Notify } from 'quasar'
import axios from 'axios'
import localforage from 'localforage'
let version = 0
let vpath = 'https://' + window.location.host + '/' + window.location.pathname.split('/')[1] + '/' + 'version.txt?t=' + Date.now()
axios.get(vpath)
  .then(vresponse => { version = vresponse })
  .catch(err => { console.log(err.response) })

register(process.env.SERVICE_WORKER_FILE, {
  // The registrationOptions object will be passed as the second argument
  // to ServiceWorkerContainer.register()
  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameter

  // registrationOptions: { scope: './' },

  ready (/* registration */) {
    console.log('Service worker is active.')
  },

  registered (/* registration */) {
    console.log('Service worker has been registered.')
  },

  cached (/* registration */) {
    console.log('Content has been cached for offline use.')
  },

  updatefound (/* registration */) {
    console.log('New content is downloading.')
  },
updated (/* registration */) {
    Notify.create({
      message: 'UPDATE AVAILABLE',
      caption: 'There is a new version (' + version.data.version + ') of the app available for your browser. ' + version.data.message,
      multiLine: true,
      color: 'warning',
      timeout: 0,
      actions: [
        {
          label: 'Reload',
          color: 'white',
          handler: () => {
            if (version.data.clearStorage === 'true') {
              localforage.removeItem('appstorage').then(() => location.reload(true))
            } else {
              location.reload(true)
            }
            localforage.setItem('appstorage_version', version.data.version)
          }
        }
      ]
    })
  },
  offline () {
    // console.log('No internet connection found. App is running in offline mode.')
  },

  error (/* err */) {
    // console.error('Error during service worker registration:', err)
  }
})

[ssuess]

So I have done some more testing and narrowed it down to this:

• The first build using vite will not update properly without a force reload. Subsequent builds will update as expected
• returning to webpack build will ALSO not update properly on the first build, but subsequent webpack builds will update as expected.
  So moving back and forth between webpack/vite screws up PWA mechanisms on the first build. I would like to prevent this rather than asking an unknown number of users to force refresh or clear their cache. Does anyone have any ideas to get around this problem?

[ssuess]

Even worse, a previously saved to the home screen PWA on iOS will NEVER update, leaving the app in a previous version forever. The only way around this is to delete the pwa and reinstall

[ssuess]

Is the no way to migrate from webpack to vite and have updates work?

[ssuess]

I am really stuck with this. I can't have all my users have a broken update process, and force every one of them to have to clear their cache or force reload. Is there no way around this or am I stuck forever on webpack?

[ssuess]

Ok, I found a solution! I began by painstakingly reviewing the build output differences between workbox and vite, and I noticed that the default name for the service worker file CHANGED in quasar config from service-worker.js to sw.js. This totally breaks the update process. Changing the quasar.config.js file from its default swFilename: 'sw.js' to swFilename: 'service-worker.js' fixes this. I feel like there should be a BIG warning when moving to vite to check this if you are not starting from scratch. I will make a PR for the docs.

[ontwikkelfabriek]

@ssuess

Thanks for solving this. Would be a shame to loose this self updating feature.

[metalsadman]

Would be a good opportunity to pr the docs about this.

[ssuess]

I already did that yesterday :)