I thing the SWPrecacheWebpackPlugin “generates” a service worker file automatically, but the HtmlWebpackPlugin also attaches a service worker to the HTML based on this file? build/service-worker-prod.js

Question 1) What is the difference between these two?

The reason I’m studying this, is because it seems that a lot of my users experience problems when I update my skeleton: e.g. I add a menu item. Then if I deploy, and my users open my website, they will still see the old menu, or sometimes even a mix of the two…

Now I need to force my users to do a page reload that refreshes the cache once after each update…

Question 2) Is there something wrong with my service worker set up?

After research I think I need this:

Adopt the UX pattern of displaying a “Reload for the latest updates” toast message on the screen letting the user know that the cached content has been refreshed, and allowing them to take action to see the latest content. This is, I think, the best approach.

Just like Facebook does. However, I couldn’t find any documentation in this. Did anyone in the Quasar Community ever implement this before?

SWPrecacheWebpackPlugin() is the plugin that “generates” a service worker file automatically and saves it in dist/service-worker.js.

HtmlWebpackPlugin() only creates a short <script> inside your index.html file to “register” the service worker!
The script to “register” this is the file that can be found at build/service-worker-prod.jsThis is not the service-worker file!

Adding code meant for in a service-worker might break your setup. If you want to edit your service-worker file you’ll have to adjust the setup of SWPrecacheWebpackPlugin().

More documentation for changing your service-worker.js file’s setup can be found on the sw-precache-webpack-plugin github page.
And for an even better understanding, also look at the original sw-precache github page, as sw-precache-webpack-plugin is only a webpack-wrapper for this.