fix: precached files are not updated #386
Conversation
lib/workbox/templates/sw.js
Outdated
| const cacheOptions = options.cacheOptions || {}; | ||
| const precacheList = options.preCaching.map(url => ({ | ||
| url: url, | ||
| revision: cacheOptions.revision | ||
| })) | ||
|
|
||
| workbox.precaching.precacheAndRoute(precacheList, options.cacheOptions) |
There was a problem hiding this comment.
According to google:
https://developers.google.com/web/tools/workbox/modules/workbox-precaching#explanation_of_the_precache_list
Revision must be passed separately per each precached file and not in options object.
lib/workbox/options.js
Outdated
| // revision | ||
| if (!options.cacheOptions.revision) { | ||
| options.cacheOptions.revision = randomString(12) | ||
| } |
There was a problem hiding this comment.
If no revision is set, browser complains about precaching file without revision:
I think that adding some randomized revision as a default would be beneficial.
I tried to get random version from nuxt environmental variables, but couldn't find it.
There was a problem hiding this comment.
I think we have to pass null instead for revision info of _nuxt/ assets because we always add hash to URL for long-term caching:
{url: '/scripts/app.0d5770.js', revision: null},
For the second and third object in the example above, the revision property is set to null. This is because the revisioning information is in the URL itself, which is generally a best practice for static assets.
There was a problem hiding this comment.
Sure, for script assets that's true. But this case is about .html files, which do not have any hash in name.
Once they are precached, you cannot do anything to update them, other than unregistering and registering service worker.
There was a problem hiding this comment.
The same applies to offline page (404.html) and start url for PWA (/?standalone=true by default).
Once they get precached, PWA stops being updated and offline page too.
This is a behavior I observed in my own application - when installed app as a standalone PWA application it refused to be updated even if completely new deploy was made.
There was a problem hiding this comment.
I see you are right. But the problem is that generating revision on build-time only works for static generated websites. If response of a SSR page changes, workbox still refuses to update..
There was a problem hiding this comment.
If precache would work with NetworkFirst, everything would be fine.
But from what I've read, it always work as CacheFirst.
Maybe it's a good idea to disable precaching at all? Or replace it with manually fetching those pages in sw.js file and caching them with standard NetworkFirst cache, instead of depending on workbox standard precache?
There was a problem hiding this comment.
@kedrzu This PR looks good after and partially fixing issue. But indeed, precaching is only CacheFirst (GoogleChrome/workbox#1767).
I will try to implement new offlineRoutes option for (NF or SWR) strategy :)
Codecov Report
@@ Coverage Diff @@
## master #386 +/- ##
==========================================
- Coverage 84.67% 83.17% -1.51%
==========================================
Files 12 12
Lines 398 410 +12
Branches 121 123 +2
==========================================
+ Hits 337 341 +4
- Misses 56 64 +8
Partials 5 5
Continue to review full report at Codecov.
|
I stumbled upon an issue - my main page was not updating. (route
/).After lot of digging I found, that it's precached inside service worker and is not updated, even when updated service worker is uploaded.
Some more about this issue with my comment here:
#381
I tried to fix it with
cacheOptionsoption you mention in docs, but it's not working (https://pwa.nuxtjs.org/workbox#cacheoptions).That's because this object is not passed into
sw.jsfile.More details in comments to code.
I had problem to make it passing through tests, because you use some kind of snapshot of resulting service worker file.