Queries around deleting cache, unregistring SW and offline feature

[maverickdude]

I have a few queries. Service workers are new to me and thus I need help answers on a few queries.

Query 1:
In my app, viewing cached pages works fine when offline.
Also, the offline page is showing fine on navigating to any uncached route (except homepage) when offline.
But as soon as the offline page has been shown, going back to homepage and then any previously cached page will show offline page only. I'm not sure if it's the expected behaviour.
Apologies for not sharing a minimal reproduction example at the moment.

Query 2: How to unregister service-worker for all users?
I found a way to do it here. But is there a config based way or a better way to do this?

Query 3: How to clear existing Workbox cache after unregistering service-worker?
From above link I tried to unregister SW and it worked. But when checking in Chrome devtools, it still sometimes showed the active SW. When I reload the page then the SW shows as deleted.
Also, after unregistering, it still showed the cached pages when offline. Is this the expected behaviour?
If yes, do I need to remove the Workbox cache seperately?
Btw, I found a way to remove cache here. Is this right?

Query 4: How to opt-out from offline feature?
If I had previously enabled offline feature but later want to keep the PWA but disable the offline feature and unregister SW, is that possible?
Sorry I couldn't find the related docs.

My next.config.js

const withPWA = require('@ducanh2912/next-pwa').default({

  // Cache every <link rel="stylesheet" /> and <script /> on frontend navigation. Requires cacheOnFrontEndNav to be enabled.
  aggressiveFrontEndNavCaching: true,

  // Enable additional route cache when navigate between pages with next/link on front end. Checkout this example for some context about why this is implemented.
  // default: false
  cacheOnFrontEndNav: true,

  // Turn on caching for the start URL.
  cacheStartUrl: true,

  // Change the directory in which next-pwa looks for a custom worker implementation to import into the service worker.
  customWorkerSrc: 'public/worker',

  // The output directory of the service worker. Relative to Next.js's root directory.
  dest: 'public',

  // Whether next-pwa should be disabled.
  // disable: process.env.NEXT_PUBLIC_APP_ENV === 'development',

  // Configure routes to be precached so that they can be used as a fallback when fetching a resource from both the cache and the network fails. If you just need a fallback document, simply create pages/_offline.tsx or app/~offline/page.tsx
  fallbacks: {
    document: '/_offline', // If you want to fallback to a custom page rather than /_offline
  },

  // Whether next-pwa should automatically register the service worker. Set this to false if you want to register the service worker yourself.
  register: true,

  // Reload the app when it has gone back online.
  // default: true
  reloadOnOnline: true,

  // Service worker script file name.
  // default: /sw.js
  sw: 'service-worker.js',

  // Use swc to minify the custom worker, the fallback worker, and more.
  swcMinify: true,

  // next-pwa uses workbox-webpack-plugin under the hood, other options can be found in the documentation for GenerateSW and InjectManifest.
  // GenerateSW - https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#generatesw-plugin
  // InjectManifest - https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#injectmanifest-plugin
  workboxOptions: {

    // Default value is: false
    disableDevLogs: true,

    // If set to 'production', then an optimized service worker bundle that excludes debugging info will be produced. If not explicitly configured here, the mode value configured in the current webpack compilation will be used.
    mode: 'production'
  }
});

module.exports = withPWA(withBundleAnalyzer({
  trailingSlash: true,
}));

[maverickdude]

@DuCanhGH Could you please help me with above queries?

[DuCanhGH]

@maverickdude I've read your comment, but I've been a bit too focused on Serwist at the moment. Then again, I'd like you to elaborate further on the first question, as I don't understand the described behaviour, and the fourth question, for I don't really grasp its meaning well. The others should be easy enough to answer. Later then :)

[maverickdude]

Thanks @DuCanhGH
I will try to share a video of the first query and elaborate more on the fourth soon.

[DuCanhGH]

@maverickdude

• Question 2: No, there's not a config-based way of doing this. It is possible, but I don't feel the need.
• Question 3: The caches are not cleaned when you unregister the service worker. You have to do the chore yourself after unregistering. The code would look something like this:

(async () => {
  const registrations = await navigator.serviceWorker.getRegistrations();
  await Promise.all(registrations.map((registration) => registration.unregister());
  const cacheNames = await caches.keys();
  await Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName)));
})();