Related: https://github.com/nuxt-community/pwa-module/pull/60#issuecomment-407008485, https://github.com/nuxt/nuxt.js/issues/3828,

Maybe disable caching of /_nuxt/HASH_HERE.hot-update.json could fix the problem 🤔

A temporary workaround:

• Firefox: Use Forget this page
• Chrome: Reset the service worker

How the problem can be reproduced:

• npm run build && npm run start
• Open the page
• npm run dev (Don't close the page where your project is running, URL's must be equal in dev and prod mode)
• Click around the page to trigger loading while the service worker is still active and not reset
• Edit sth. in your editor to trigger HMR
• See flickering

Why didn't it happen before?

I'd bet on Workbox 3. With the new versions the dev/prod build differences have been greatly changed.

Sophisticated workarounds?

• Don't cache hot reload files.
  Problem: Doesn't fully resolve the problem but makes it way better! However, in the worst case scenario, you are loading the full dev version (including non-hashed nuxt files that'll be cached).

• Don't cache all dev nuxt files.
  Problem: We'd need a list and a decent check (that might influence live performance)

• Force a full reload of the page when re-deploying application (nuxt-side)
  Problem: Not sure if technically possible. This would likely be the best solution, so the SW is definitely flushed out. 🤔

• Don't cache all /_nuxt/ (publicPath) resources by default
  Problem: Ugly and possible efficiency loss.

• Add an identifier to all dev files
  Problem: Nuxt-side solution, affecting many ppl

cc @galvez @pi0

This problem should be finally fixed with 3.0.0-beta.1.

1. A regex extension added to ignore webpack HMR from workbox (tests: https://github.com/nuxt-community/pwa-module/blob/dev/test/hmr.js).

2. added [sw.dev.js] that fast claims all tabs and disables most of workbox.

@pi0 Hero <3