So the problem we are currently facing is that only some pages can be accessed in an offline connection, some cannot be accessed and return to the main page, namely Dashboard Page. We follow the guide from 'https://developers.google.com/web/fundamentals/primers/service-workers' in registering service workers and registering them as importScript in 'https://pwa.nuxtjs.org/workbox' module.

Here is our custom-sw.js Code:

var CACHE_NAME = "cache-v2";
var urlsToCache = ["index.html"];

self.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      console.log("Opened cache");
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener("activate", function (e) {
  console.log("[ServiceWorker] Activate");
  e.waitUntil(
    caches.keys().then(function (keyList) {
      return Promise.all(
        keyList.map(function (key)
 {
          if (key !== CACHE_NAME) {
            console.log("[ServiceWorker] Removing old cache", key);
            return caches.delete(key)
;
          }
        })
      );
    })
  );
  return self.clients.claim();
});

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.open(CACHE_NAME).then(async function (cache) {
      const response = await cache.match(event.request);
      console.log("SERVICE WORKER: ", event.request);
      var fetchPromise = fetch(event.request)
        .then(function (networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        .catch((err) => {
          console.log("ERROR WHILE FETCHING: ", err.message);
          return response;
        });
      return response || fetchPromise;
    })
  );
});

and Here is our pwa module in nuxt.config.js:

pwa: {
// disable the modules you don't need
meta: { author: "PocketAngler Ltd" },
// if you omit a module key form configuration sensible defaults will be applied
manifest: {
  name: "PocketAngler Platform",
  short_name: "PocketAngler",
  display: "standalone",
  lang: "en",
},
icon: {
  source: "/favicon.png",
  fileName: "favicon.png",
  sizes: [64, 120, 144, 152, 192, 384, 512],
},
workbox: {
  importScripts: ["custom-sw.js"],
  // by default the workbox module will not install the service worker in dev environment to avoid conflicts with HMR
  // only set this true for testing and remember to always clear your browser cache in development
  dev: process.env.NODE_ENV !== "production",
},
 generate: {
   fallback: true,
 },
},

Can we get the solve for this one? We need open all page in offline mode