PWA - Update New Content Notify without Page Reload

[tuxsisir]

Hi all,

I have been scratching my head for couple of days regarding updating the service worker without reloading the page.

EDIT1: I was misunderstanding the default behaviour of service worker and waiting for the service worker to replace itself without page reload. It would need a page reload and the new service worker then only would "Reload and Update automatically" Once the service worker is detected as new from request to the server after only a page reload.

In order for the page to auto update the service worker either polling or keeping registration update in between the routes navigation (mentioned below) can be a viable solution. But this can be explored more under push notification, workbox background requests and other..

Hope this helps anyone trying to understand this.

Context:
The inspiration to get this behavior is from quasar docs itself which triggers the service worker registration (update) when there are new changes in the docs (or cdn).

As you can see in the docs that when there's new update, service worker registration update gets triggered without the page refresh.

Problem
Once there's a new build and changes are pushed to the hosting server, there are no "immediate" updates that triggers service worker registration.update() and Notify is NOT getting popped up, letting the users know there is a Updated content is available. Please refresh the page.

IT WORKS BUT ONLY ON PAGE RELOAD

The Good Thing
I am able to get the updates once I refresh the page, then only the service worker 'registration.updated()' is triggered and I am able to view the notify and reload the page, but in this case I already reloaded the page. (This is a 2 reload process) to get the new updated contents. In the mobile installed app also if I swipe out of the app and again open the app, I get the updates but not if I am in the app.

But I wanted the changes to be reflected once new build is pushed to the server without user refreshing the page.

On researching more on the "default" behavior of the service worker. There are numerous answers pointing that the new Service Worker will not just take over the page and will take over once user closes the tab, navigates away and comes back in but service-worker will not immediately activate itself.

Now comes in Workbox.

Workbox
Since Quasar is leveraging workbox and there are two different modes:

• GenerateSW
• InjectManifest

I wanted to keep things simple and since this was already done in Quasar docs with GenerateSW, I was more inclined to achieve this with generatesw mode.

However, workbox comes with its own bag of plugin and tools which has a lot going on.

• Workbox Broadcast Update is something I was interested in but again Quasar Docs is achieving this with: generatesw and without extending anything further.

qusar.conf.js from quasar docs

pwa: {
    workboxMode: 'GenerateSW',
    injectPwaMetaTags: false,
    swFilename: 'service-worker.js',

    extendWorkboxGenerateSWOptions (cfg) {
      Object.assign(cfg, {
        cleanupOutdatedCaches: true,
        skipWaiting: true, // just don't allow browser to wait for the new sw.js (Skip the wait)
        clientsClaim: true, // take control of other tabs
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/cdn/,
            handler: 'StaleWhileRevalidate'
          }
        ]
      })
    }
  }

As you can docs uses StaleWhileRevalidate runtimeCaching and Workbox docs also refers that it

HOSTING
This is where I think I am missing something but please allow me to explain some of my progress:
We use Amazon S3 to host our real app, but I was just done pushing my changes to S3 and hurting the real app with repetitive changes.

I spun off new quasar project (both with webpack and vite) but decided to test on vite one (beacuse again.. quasar docs..)

For the hosting I used firebase and here's the firebase json for headers and redirects.

{
  "hosting": {
    "public": "dist/pwa",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "/service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"
          }
        ]
      }
    ],
    "cleanUrls": true
  }
}

I gouged through the docs and made sure that sw.js has cache-control no-cache.

There are some references from workbox docs:

I made sure that I didn't miss anything regarding hosting and headers too...

The overall idea and expectation with workbox is that it will fetch the updates (changed cached responses) immediately once there are new urls updated from the new precache manifest build when pushed.

But again nothing seems to be working.

---

Some of the solutions that I figured out and hoping that it can help someone reading this.

Quick Solution
Poll the registration.update() every certain and then it works fine. I don't need to refresh the page to get the updates. I don't think it's a good solution given quasar docs has not implemented in this particular way. I think this is a way around but definitely not ideal.

register(process.env.SERVICE_WORKER_FILE, {
  ready (/* registration */) {
    console.log('Service worker is active...')
  },
  registered (registration) {
    console.log('Service worker has been registered...')
    setInterval(() => {
       registration.update();
    }, 5000)
  },
...

Manual Trigger (This Works)

If anyone is looking for temporary solution, I think this is neat and I am planning to use this solution for the time being on route changes so that users are informed without any polling.

export default defineComponent({
  name: 'IndexPage',
  setup() {
    const refresh = (() => {
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register('/service-worker.js').then((registration) => {
          registration.update();
        });
      }
    })

    return {
      refresh
    }
  }
})

---

Let's discuss what you guys think about this and the viable solution to trigger the update.
Thanks in advance.

[eugene-khyst]

Hi @tuxsisir
Have you found the solution?

[nulele]

Hi @tuxsisir,

can you please explain how did you manage to get the vite build version? Actualy I'm using webpack but I need the information to implement my idea.

I'd use the ready() method of the register-service-worker file and...

1. check if an "app-build-version" local storage variable exists and get its value
2. get the current vite/webpack build version
3. compare the current and the stored build version values
4. if they are different, update the local storage variable with the current version and then call the updated() method
5. in the updated() method you can have an alert asking to refresh or a location.refresh() instruction.

I still didn't try but if you please answer to my question I'll be alble to do it.

Thanks