how to re-register the service worker with next-pwa

Question

I am using next-pwa package with my next.js applications for PWA features. But I am having a problem here. Everytime, I rebuild and redeploy the application, it doesn't re-register the service worker, so I don't get the updated data. I have to manually unregister the service worker and clear the chrome cache to get the updated data. How can I solve this? Here's my PWA configuration in next.config.js file

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

/** @type {import('next').NextConfig} */
module.exports = withPWA({
  reactStrictMode: true,
  images: {
    domains: ['i.ibb.co'],
  },
  eslint: {
    dirs: ['src'],
  },
  // pwa configuration
  pwa: {
    dest: 'public/pwa',
    disable: process.env.NODE_ENV === 'development',
    runtimeCaching,
    buildExcludes: [
      /chunks\/images\/.*$/, // Don't precache files under .next/static/chunks/images this improves next-optimized-images behaviour
      /chunks\/pages\/api\/.*/, // Dont cache the API it needs fresh serverinfo
    ],
    exclude: [
      /\.map$/, // dont cache map files
      /^.*ts.*$/, // Dont let serviceworker touch the TS streams
      /-manifest.json$/, // exclude those pesky json files in _next root but still serve the ones we need from /_next/static
    ],
    skipWaiting: true, // installs new SW when available without a prompt, we only need to send a reload request to user.
    dynamicStartUrl: false, // recommend: set to false if your start url always returns same HTML document, then start url will be precached, this will help to speed up first load.
    reloadOnOnline: false, // Prevents reloads on offline/online switch
    sourcemap: false,
  },
})

Answer 1

Once a service worker with a given URL and scope has been registered, there's no need to re-register it multiple times. Even if you never call navigator.serviceWorker.register() again in a given browser, the previous registration will remain active.

The Workbox documentation features a section detailing how a browser checks for service worker updates, and how that interacts with different configurations of Workbox.

Since you're using the skipWaiting: true configuration option, I would expect that after navigating to a page in your web app when there's already in a service worker in place, the cache entries will end up being swapped out "under the hood" automatically, and the next navigation you make to a new page within the service worker's scope will end up being fulfilled with the new resources. Be aware that skipWaiting: true means that this cache swap happens immediately after the updated service worker is installed, and this could be a bit unpredictable for existing open clients if you, e.g., lazily-load assets.

There's specific guidance about how you can control when the updates to the cached resource by using skipWaiting: false and manually triggering the update in response to, e.g., a user opting-in. next-pwa may or may not have some components that help with this update flow—I'm not familiar with what it offers.