Keep a PSK Progressive Web App fresh, without requiring user reload

[dandv]

Is this in scope? I found the behavior to be somewhat flaky, though it might depend on the particulars of Firebase hosting.

I'm hosting a PWA-pitching PWA based on PSK on Firebase. Here are the repro steps:

1. Navigate to the app in Chrome 49.0.2623.105 on Android 6.0.1
2. Add the app to home screen.
3. Close the tab.
4. In portrait mode, launch the app from the home screen.
5. Tap Back to exit the app.
6. Make a visible change, then gulp && firebase deploy.
7. Launch the app again. The version before the change will load.
8. Exit the app and launch again. The updated version was correctly shown.
9. ⚠️ Rotate the phone to landscape mode. The old version was shown.
10. Swipe down form the top. The new version loads.

[robdodson]

Launch the app again. The version before the change will load.

I think that's because the platinum elements use a default cache strategy of "fastest" which goes cache first, then network. I believe you can configure this: https://elements.polymer-project.org/elements/platinum-sw#property-defaultCacheStrategy

⚠️ Rotate the phone to landscape mode. The old version was shown.

Sounds like a Chrome bug, you might file a ticket on crbug.com

Let me know if changing the cache strategy fixes your issue.

[robdodson]

I think you'll likely see something similar in PSK2 because we're using sw-precache and it uses the cache-first-then-network strategy. This means pages will be served as fast as possible but may be stale.

@jeffposnick is the sw-precache strategy configurable? I seem to recall that it is but I looked over the docs and couldn't find the option

[jeffposnick]

sw-precache is also designed to be cache-first, so you'd see the same sort of behavior. After an update, the next visit to a page will used the previously cached resources, and then the following visit will have the updated resources. The benefits of a cache-first strategy for your App Shell are pretty significant, as it takes the network out of the critical path for rendering the initial content.

There's a pattern for detecting when the service worker has been updated, and using that to trigger some sort of toast or warning on the page that there's new content available, and telling folks to reload.

There's also a feature request for new functionality that would use message event handlers to let pages opt-in to listening for resource updates, which would then allow the page to take appropriate action based on what changed (displaying a toast, forcing a reload, etc.)

[robdodson]

@jeffposnick is there a configuration option to set sw-precache to network-first if that's the behavior I want in my app? I feel like platinum elements used to support this using sw-precache under the hood

[jeffposnick]

sw-precache is meant for cache-first use cases. If you don't want an auto-versioned, cache-first service worker, then configuring sw-precache is overkill, and you can just implement a basic runtime caching strategy instead.

You can actually do that while still including sw-precache in your build by leaving out staticFileGlobs/dynamicUrlToDependencies entirely, and just setting runtimeCaching:

// Config passed to sw-precache:
{
  runtimeCaching: [{
    urlPattern: /./, // Match everything
    handler: 'networkFirst'
  }]
}

(Untested, but I think this will effectively inline sw-toolbox in your service worker file and set up a catch-everything route.)

It's not what I'd recommend, because you're losing the performance benefits of a cache-first strategy, but yeah, it's possible.

The platinum elements never used sw-precache, but they did wrap sw-toolbox. So this is pretty much the equivalent of that.

[robdodson]

I see. In the near term it might be beneficial for us to add the toast pattern because I bet a number of folks will be confused by it. Another option is to dev with Bypass Network turned on in the Applications panel of the DevTools but that doesn't change the experience for the end users, just makes it a bit easier on the developers.

[jeffposnick]

👍 to the idea of the toast pattern. Cache-first can be confusing without it, but with a meaningful toast, I think users get the best of both worlds.

[abdonrd]

👍 to the toast pattern.

[JosefJezek]

I am using toast in PWA template https://github.com/StartPolymer/progressive-web-app-template/blob/master/src/app-service-worker.html#L119

[TimvdLippe]

Closing this issue as duplicate of #1046. I think it is good to add a toast that notifies the user the site is updated, just like the docs site does.