I think the root page or index.html should be handled by runtime caching

[lili21]

otherwise, user has to refresh twice to get the latest content. first for latest service worker, and second for latest index.html. right ?

so maybe the root page should be handle by runtime caching. only use the cache when user is offline.

[maxmilton]

What kind of changes are you making to your index.html? Typically with a SPA you leave it quite bare and instead use the framework to inject the content or change any meta tags etc.

[lili21]

the filename of js and css ? everytime I change my code, the filename( hash ) will be changed, and the reference in index.html will be updated.

[dewdad]

Has any progress been made on this issue?

[jeffposnick]

Using a cache-first approach for navigation requests offers a meaningful performance benefits See "High-performance service worker loading" for more details.

The strategy that Vue PWA's service worker uses is effectively a stale-while-revalidate approach, with the "stale" content shown initially, and then refreshed in the background if there are updates detected in the service worker. The subsequent visit should result in the fresh HTML being displayed.

While you could get some offline-fallback benefits from using a different strategy for navigation requests, like a strategy which went to the network first and only displayed cached HTML when the network request failed, you lose the performance benefits.

It's unlikely that we're going to change that strategy for this template, but if you'd like an alternative approach, starting with the basic webpack template and then adding-in either a service worker library or just some handwritten service worker code to implement a network-first strategy is definitely an option. The Offline Cookbook is a great resource when you're writing your own service worker.