[solved] Question about service worker & caching problem.

mesqueeb

So I’m still learning about service workers. But I notice the PWA starter kit has 2 webpack plugins mentioning service workers:

new HtmlWebpackPlugin({
  serviceWorkerLoader: `<script>${fsUtils.loadMinified(path.join(__dirname,
    './service-worker-prod.js'))}</script>`
}),

and

new SWPrecacheWebpackPlugin({
  cacheId: 'listo',
  filename: 'service-worker.js',
  staticFileGlobs: ['dist/**/*.{js,html,css,woff,ttf,eof,woff2,json,svg,gif,jpg,png,mp3}'],
  minify: false,
  stripPrefix: 'dist/'
})

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?

mesqueeb

To answer my own question:

The difference between SWPrecacheWebpackPlugin and HtmlWebpackPlugin:

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.js
This 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.

LaurentPayot

sw-precache and sw-toolbox are to be replaced by Workbox: https://github.com/quasarframework/quasar-template-pwa/issues/14

mesqueeb

@LaurentPayot For indexedDb I’m thinking of using ‘idb’: https://github.com/jakearchibald/idb
Do you think this is a good option, or will there also be a certain plugin integrated into 0.15 you know of?
What do you use for indexedDb?

LaurentPayot

@mesqueeb I just saw your question. I’m using Firebase so I’m simply using Firebase offline persistence features.

No More Posting New Topics!

[solved] Question about service worker & caching problem.