I'm wondering, when building a Vue PWA app using the CLI and letting all config at default values, my built app is:
- prefetching all chunks on initial load using the HTML prefetch links
- precaching all chunks using Workbox's PWA mechanism
How do these two mechanisms interact and should I disable one of both?
Thanks!
Prefetch mechanism in index.html <HEAD>:
Precache manifest in service-worker.js:
They clash. The browser downloads them multiple times.
What happens most likely is this (I'm saying most likely because the prefetch link is a hint to the browser and different browsers might implement its use in varying ways and priorities):
The double donwload happens because the SW's precache thing uses cache busting and tries to download assets like
/realname.hash.js?bla=hash_in_the_manifest_fileso even though your files already have the hash values in their names, the precache mechanic is not satisfied with it.Actually, if you look at the documentation of the Workbox precache plugin you see that they suggest you to drop the revision (hash) checking if you already use hash values in the filenames.