2

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,
  },
})
Pranta
  • 2,928
  • 7
  • 24
  • 37

1 Answers1

0

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.

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Thanks. But how does my website know that the data has changed and it needs to re-register the service worker once my rebuild my next.js website? – Pranta May 06 '22 at 16:27
  • You should never need to re-register your service worker, unless you need to use a different URL or scope for the service worker script file. https://developer.chrome.com/docs/workbox/service-worker-lifecycle/#when-updates-happen describes how updates happen, from the perspective of Workbox's precaching. – Jeff Posnick May 06 '22 at 17:34
  • https://web.dev/service-worker-lifecycle/#updates is a more generic description of how service worker updates happen, without referencing anything Workbox-specific. – Jeff Posnick May 06 '22 at 17:35
  • But I don't think the cache is updating automatically, because I am seeing the previous version of the app even after re-deploying the next.js website. Basically, I want to update the cache every time I re-deploy or rebuild the website. How can I do that? – Pranta May 06 '22 at 19:32