Question: Should default sw-precache skipWaiting be false NOT true?

[mdgbayly]

Description

When using the default service worker configuration, if you change multiple pages in your app e.g. view1.html and view2.html and then reload the app following a build, the first page you hit (e.g. view1) will show the previously cached page, whereas the second page you hit (e.g. view2) will show the newer version.

This is because the sw-precache skipWaiting option defaults to true. However, for an app shell based app like the Polymer app toolbox apps this can lead to an inconsistent experience because you end up seeing different, inconsistent versions of your pages until the next time you load the app.

By setting skipWaiting to false, the first time you load the new version you continue to see the old version but at least it is consistent across pages. This does have the downside that you don't see any pages from your new version until the next time you load your app (assuming all tabs with the old service worker version have been removed) but this feels like it would be cleaner and less confusing?

It took me a while to understand why it was behaving this way, so maybe this default behaviour could be called out in the docs (https://www.polymer-project.org/2.0/toolbox/service-worker) as something to be aware of?

Or maybe there is a better approach to working around this stale page problem?

Expected outcome

Displayed versions of pages in the app should be consistent.

Actual outcome

First page displayed after a rebuild/reload is always the previous version prior to the rebuild due to the service worker caching whilst subsequent pages you load will show a newer version due to the service worker immediate activation. You continue to see the previous version of the initial page loaded even when switching pages in the app, because once it's import has been loaded it doesn't get reloaded until you do a full reload of the app.

Steps to reproduce

1. Install and build the starter kit and load view1, view2 and view3 in a browser using a production build so that the service work is installed. (run polymer build --root build/es5-bundled
2. Modify the source for my-view1.html
3. Modify the source for my-view2.html
4. run polymer build
5. run polymer serve --root build/es5bundled
6. Reload the app in a web browser at view1 (the original version of view1 is displayed)
7. Click on the link for view2 (the newer version of view2 is displayed)
8. Click back on the link for view1 (you still see the older version)
9. Reload the browser page - now you see the newer versions for view1 and view2

=> The app is in an inconsistent state?

Browsers Affected

Only tested in Chrome but would affect other browsers that support service worker

[keanulee]

I'm not 100% sure about this, but even you still use the old SW, the cache would already be updated with the new my-view*.html. So when you load view2 (which dynamically loads my-view2.html), you'll get the new one.

But yes, you do potentially end up with files from different versions.