fix: broken pwa

next.config.js

@@ -5,49 +5,50 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 })
 const execSync = require("child_process").execSync
 
-const cache = require("next-pwa/cache")
-const withPWA = require("next-pwa")({
+const cache = require("@ducanh2912/next-pwa").runtimeCaching
+const withPWA = require("@ducanh2912/next-pwa").default({
   disable: process.env.NODE_ENV === "development",
   dest: "public",
   publicExcludes: ["*"],
-  runtimeCaching: [
-    {
-      urlPattern: ({ request }) => {
-        return request.headers.get("x-middleware-prefetch")
-      },
-      handler: "NetworkOnly",
-    },
-    {
-      urlPattern: ({ url }) => {
-        return /\/ipfs\/([^/?#]+)$/.test(url.toString())
-      },
-      handler: "CacheFirst",
-      options: {
-        cacheName: "next-ipfs",
-        expiration: {
-          maxEntries: 64,
-          maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+  workboxOptions: {
+    runtimeCaching: [
+      {
+        urlPattern: ({ request }) => {
+          return request.headers.get("x-middleware-prefetch")
         },
-        cacheableResponse: {
-          statuses: [0, 200],
+        handler: "NetworkOnly",
+      },
+      {
+        urlPattern: ({ url }) => {
+          return /\/ipfs\/([^/?#]+)$/.test(url.toString())
+        },
+        handler: "CacheFirst",
+        options: {
+          cacheName: "next-ipfs",
+          expiration: {
+            maxEntries: 64,
+            maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+          },
+          cacheableResponse: {
+            statuses: [0, 200],
+          },
         },
       },
-    },
-    {
-      // cspell:ignore Fipfs
-      urlPattern: /\/_next\/image\?url=.+%2Fipfs%2F([^/?#]+)$/i,
-      handler: "CacheFirst",
-      options: {
-        cacheName: "next-ipfs",
-        expiration: {
-          maxEntries: 64,
-          maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+      {
+        // cspell:ignore Fipfs
+        urlPattern: /\/_next\/image\?url=.+%2Fipfs%2F([^/?#]+)$/i,
+        handler: "CacheFirst",
+        options: {
+          cacheName: "next-ipfs",
+          expiration: {
+            maxEntries: 64,
+            maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+          },
         },
       },
-    },
-    // @ts-ignore
-    ...cache,
-  ],
+      ...cache,
+    ],
+  },
 })
 
 const lastCommitCommand = "git rev-parse HEAD"

package.json

@@ -145,6 +145,7 @@
     "zustand": "^4.3.8"
   },
   "devDependencies": {
+    "@ducanh2912/next-pwa": "^8.4.1",
     "@iconify/tailwind": "^0.1.2",
     "@next/bundle-analyzer": "13.4.1",
     "@playwright/test": "1.33.0",
@@ -180,7 +181,6 @@
     "eslint-plugin-unused-imports": "2.0.0",
     "husky": "8.0.3",
     "lint-staged": "13.2.2",
-    "next-pwa": "^5.6.0",
     "postcss-import": "15.1.0",
     "postcss-prune-var": "1.0.5",
     "prettier": "2.8.8",