[solved] Question about service worker & caching problem.



  • 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?



  • 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.



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



  • @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?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.