Updating resources cached by the Service Worker requires an application restart and _two_ page reloads

[vlukashov]

When updating an image, a web app manifest, or another resource cached by the Service Worker to be available offline, the update is not visible in the browser until the server is restarted (in development mode), and only on the second full page reload after the restart. This is unexpected.

NOTE: Technically, this is just how service worker caching works. But it's unexpected nonetheless. A new service worker version is created when the development server is restarted. On the first full page reload the app shell as well as all other pre-cached assets are loaded from the (now stale) old service worker cache. The new service worker gets loaded in the end, after everything else is already loaded. At that point the new service worker updates the caches. On the second page reload the updated caches are visible in the browser.

Minimal reproducible example

1. download a Vaadin 18 starter project from https://start.vaadin.com
2. override the version of Flow to be 5.0.offline-SNAPSHOT
3. enable offline caching for images/logo.png: @PWA(name = "My Project", shortName = "My Project", offlineResources = {"images/logo.png"})
4. start the app in development mode with mvn
5. replace the content of the images/logo.png file with
6. reload the browser page (see that the logo remains the same), reload multiple times
7. stop and restart the server (mvn again)
8. reload the browser page one (see that the logo remains the same)
9. reload the browser page the second time (see that now the new logo is visible)

Expected behavior

When in development mode, I expect that updates to a cached image or the web app manifest are available immediately after the hot page reload.

When in production mode, I expect an 'update is available' UX pattern to be visible in the application to signal users that the assets loaded from the service worker cache got new versions, and the app needs a reload. It could be something along the lines of what's described here: https://dev.to/thepassle/on-pwa-update-patterns-4fgm

Versions:

- Vaadin / Flow version: 18.0.0.alpha1 / 5.0.offline-SNAPSHOT
- Java version: 11
- OS version: macOS 10.14.6
- Browser version (if applicable): Brave 1.16.68 / Chromium 86.0.4240.183.

[haijian-vaadin]

Agreed that Gizmo should ask the service worker to update itself before reloading the page.

Test: multiple tabs

Production mode would be a separate task.