Force refresh after a new version update

[AmosSzust]

Hi

I read here: #13176
and that led me here: https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker
and then I got a bit confused:

Where should I create this file? in the reply I saw this folder: src/pwa/register-service-worker.js (src/pwa), in the site I saw this: src-pwa/register-service-worker.js (src-pwa), which is the right path?

Also, in the site I saw this:

devServer: {
  server: {
    type: 'https', // NECESSARY

    options: {
      // Use ABSOLUTE paths or path.join(__dirname, 'root/relative/path')
      key: "/path/to/server.key",
      pfx: "/path/to/server.pfx",
      cert: "/path/to/server.crt",
      ca: "/path/to/ca.pem",
      passphrase: 'webpack-dev-server' // do you need it?
    }
  }
}

In my quasar.config.js I have the following because while developing/debugging, I'm running locally on http:8080

    devServer: {
      server: {
        type: 'http',
      },
      port: 8080,
      open: true, // opens browser window automatically
    },

When I upload the dist/spa folder to my site, where it is running under https:port, the site is up and running as expected with https so should I change the above settings to what it says in the site or not?

Thanks

[yusufkandemir]

Where should I create this file? in the reply I saw this folder: src/pwa/register-service-worker.js (src/pwa), in the site I saw this: src-pwa/register-service-worker.js (src-pwa), which is the right path?

src/pwa was a typo, you already should have a file called src-pwa/register-service-worker.js, so use it, that's the correct file.

Also, in the site I saw this:
...

https://quasar.dev/quasar-cli-webpack/developing-pwa/handling-service-worker#ssl-certificate

You may notice in some dev environments, that Workbox will not load your service workers during quasar dev if you are not using HTTPS to serve - even on localhost.

It says some, not all. So, if HTTP works for you in your local environment, then it's fine, you don't have to do anything. In production, you must use HTTPS(which seems like you already do), but it's related to your web server configuration, devServer is irrelevant, hence the name. So, you don't have to change anything.

[AmosSzust]

Thank you very much for your reply.

you already should have a file called src-pwa/register-service-worker.js, so use it, that's the correct file

That's the thing, I don't have this file :) so just to make sure, src folder and src-pwa folder should be in the same level, at the root folder of the project, right?

[yusufkandemir]

If you have run quasar mode add pwa before, you should have that file. And yes, src and src-pwa should be at the same level, at the root level.

[AmosSzust]

I didn't run quasar mode add pwa, I just initialized a new quasar project and started working on it, which means it's a SPA project. That leads me to the last question: Is it enough to just add src-pwa/register-service-worker.js file or should I define other things somewhere else (quasar.config file etc...) in order to make the refresh for new content to work?

Thanks

[yusufkandemir]

If you are using SPA mode, you won't need to refresh for new content or similar. When you build the application, the built files will have a hash in their names, e.g. assets/index.454d87bd.js. The next time you build, if the related code didn't get updated, the file name will stay the same, if it got changed, it will have a different hash, so the browser will use the new file instead. If this is not happening, then you should revisit your web server's cache policy on index.html.

Refresh content if needed for the PWA mode because it works differently. There is a precaching process involved. The service worker precaches the assets, serves them to the user, etc. If the service worker itself gets updated, which itself is not cached by the browsers, so it's easily detected, then it basically fetches the updated assets, precaches them, etc. but the new service worker doesn't immediately take over. So, refresh for new content is basically telling the old service worker to retire and the new one to take over, on the next refresh. So, you would need to use the PWA mode for all these advantages and to modify the behavior.

[AmosSzust]

I see, so I just need to add the following 2 headers to index.html

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

Thanks!