Excluding index.html from service worker by default

[luatnd]

What did you get as the error?

Clients don't see any change on new deployment in PWA mode because index.html was cached forever in service worker (cacheFirst/cacheOnly strategy I guessed!).

I accidentally forgot to remove /index.html entry in precache-manifest.*.js so now all my clients cannot receive any update.

I searched Quasar's issues but cannot found anyone has the same problem, did I do anything wrong?

What were you expecting?

Exclude index.html from precache, switch to networkFirst by default. so that on every deployment, clients can see the changes.

What steps did you take, to get the error?

1. Deploy web page v1.0.0 in PWA mode
2. Modify something
3. Do second deployment v1.0.1 in PWA mode
4. Refresh the webpage --> No change was made, the client can still see the v1.0.0

Env

 Build mode........ pwa
 Quasar theme...... mat
 Quasar CLI........ v0.17.20
 Quasar Framework.. v0.17.17
 Debugging......... no

[stefanvanherwijnen]

Just ignoring index.html will not give you an updated version of the site. You will need to perform a complete refresh (i.e. clear the cache) to refresh all assets. The service-worker.js file states that you should disable HTTP caching for the file, but apparently modern browsers ignore the cache headers for service-worker.js, so the only way to refresh is to force it manually. Here is a topic on the forum about the same issue: https://forum.quasar-framework.org/topic/2560/solved-pwa-force-refresh-when-new-version-released

If you don't have a server to connect with, you can add a config file to the statics folder and exclude this file in workboxOptions in quasar.conf.js (and use axios to retrieve this file on runtime):

      workboxOptions: {
        exclude: ['statics/version.json']
      },

I think it would be a good idea to integrate something to fix this problem into quasar, but as PWA support isn't correctly working on for example iOS (see the earlier mentioned topic), there might not be a consistent solution yet.

[123mitnik]

I have what @stefanvanherwijnen explained (when I push a new version the client is forced to reload by checking the version on the server) also in my Nginx config for the worker and index.html I have :

add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; expires -1;

unfortunately there is no way to get the updated version from the server . It always loading the cached version .. it drives me nuts.

the only way is to pull the kill switch with add_header Clear-Site-Data "cache"; but this is the ugliest possible way and it doesn't guarantee that the clients will be updated (it will update only the clients visited app in the next 24h). Also Lighthouse complains for this header in general.

without proper way to handle this there is no way to update the pwa. I have huge amount of registered users but they are using broken outdated version of the app Searching for solution .. if someone can hep with this.

Operating System - Darwin(18.5.0) - darwin/x64
NodeJs - 11.3.0

Global packages
  NPM - 6.9.0
  yarn - 1.12.3
  @quasar/cli - 1.0.0-beta.7
  cordova - Not installed

Important local packages
  quasar - 1.0.0-beta.21 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.0.0-beta.22 -- Quasar Framework App CLI
  @quasar/extras - 1.1.2 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.6 -- Official router for Vue.js 2
  vuex - 3.1.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.3.4 -- Babel compiler core.
  webpack - 4.30.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.3.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.0 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  *None installed*

[luatnd]

@123mitnik I forgot to update, I run into problem because of the service worker caching strategy. I tried to change Workbox caching strategy without luck.

This is not working:

// For GenerateSW only:
        // runtimeCaching: [
        //   {
        //     urlPattern: '/',
        //     handler: 'networkFirst',
        //     options: {
        //       networkTimeoutSeconds: 5,
        //     },
        //   },
        //   {
        //     // using a regex, especially useful when you have Vue Routes with parameters
        //     urlPattern: /(\/|\/#|\/#\/|\/[^./]+)$/g,
        //     handler: 'networkFirst',
        //     options: {
        //       networkTimeoutSeconds: 5,
        //     },
        //   }
        // ],

After several days of testing, I used this config: But this will exclude html from service worker and work perfectly:

  ...
  pwa: {
     workboxOptions: {
       exclude: [
          /\.html$/,   // I don't know why I need to change this matching pattern from string to RegEx to get it work.
          '/statics/ionicons-cheatsheet/',
        ],
     }
  }

As you mentioned - Cache-Control was already handled so I think it would work.

Finally, to verify your config is correct, check the content of dist/pwa-mat/precache-manifest.*.js -> index.html or / must not appear there.