Migrate pwa to Serwist

next.config.js

@@ -1,9 +1,23 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const withPWA = require("@ducanh2912/next-pwa").default({
-    dest: "public",
-});
+const {
+    PHASE_DEVELOPMENT_SERVER,
+    PHASE_PRODUCTION_BUILD,
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+} = require("next/constants");
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
+/** @type {(phase: string, defaultConfig: import("next").NextConfig) => Promise<import("next").NextConfig>} */
+module.exports = async (phase) => {
+    /** @type {import("next").NextConfig} */
+    const nextConfig = {};
 
-module.exports = withPWA(nextConfig);
+    if (phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD) {
+        const withSerwist = (await import("@serwist/next")).default({
+            // Note: This is only an example. If you use Pages Router,
+            // use something else that works, such as "service-worker/index.ts".
+            swSrc: "src/app/sw.ts",
+            swDest: "public/sw.js",
+        });
+        return withSerwist(nextConfig);
+    }
+
+    return nextConfig;
+};

package.json

@@ -10,11 +10,11 @@
     "format": "prettier --write ./src"
   },
   "dependencies": {
-    "@ducanh2912/next-pwa": "^10.2.5",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@serwist/next": "^9.0.3",
     "@vercel/analytics": "^1.0.2",
     "next": "^14.1.4",
     "postcss": "^8.4.30",
@@ -40,6 +40,7 @@
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.6.4",
     "sass": "^1.67.0",
+    "serwist": "^9.0.3",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2",
     "webpack": "^5.88.2"

src/app/sw.ts

@@ -0,0 +1,25 @@
+import { defaultCache } from '@serwist/next/worker';
+import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist';
+import { Serwist } from 'serwist';
+
+// This declares the value of `injectionPoint` to TypeScript.
+// `injectionPoint` is the string that will be replaced by the
+// actual precache manifest. By default, this string is set to
+// `"self.__SW_MANIFEST"`.
+declare global {
+  interface WorkerGlobalScope extends SerwistGlobalConfig {
+    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+  }
+}
+
+declare const self: ServiceWorkerGlobalScope;
+
+const serwist = new Serwist({
+  precacheEntries: self.__SW_MANIFEST,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: true,
+  runtimeCaching: defaultCache,
+});
+
+serwist.addEventListeners();

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "esnext", "webworker"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,8 +22,9 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["@serwist/next/typings"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "public/sw.js"]
 }