Vue PWA Precache manifest versus HTML prefetch link

user_7394885 0
Viewed 1295

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>:

enter image description here

Precache manifest in service-worker.js:

enter image description here

workbox service-worker progressive-web-apps vue.js link-prefetch
1 Answers

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):

  1. Browser fetches the HTML
  2. Browser sees the prefetch links
  3. At some point, browser starts to download the links for later use
  4. When Service Worker is registered, it precaches all the same assets
  5. At later visits/reloads of the page, all of the assets come from the SW's cache and nothing is downloaded again

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_file so 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.

user_50389430
Related