fix(core): fixed invalid precache manifest and scope with basePath

[bump]
DuCanhGH · Jan 29, 2024 · e5f1d14 · e5f1d14
1 parent e4c8af7
commit e5f1d14
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 9 deletions.
diff --git a/.changeset/thick-pans-agree.md b/.changeset/thick-pans-agree.md
@@ -0,0 +1,9 @@
+---
+"@ducanh2912/next-pwa": patch
+---
+
+fix(core): fixed invalid precache manifest and scope with `basePath`
+
+- A fast backport of https://github.com/serwist/serwist/pull/56.
+- This is caused by "/\_next/../public" in modifyURLPrefix not being matched when basePath is set, since the URL is actually "${basePath}/\_next/../public/\*\*/\*". We now use `manifestTransforms` instead of `modifyURLPrefix`.
+- Also, with the refactor to using a context, we mistakenly changed `scope` from "${scope}" (suffixed with / if originally not) to "${basePath}/${scope}". This reverts that change. Sorry for the inconvenience!
diff --git a/packages/next-pwa/__tests__/integration/base-path/app/favicon.ico b/packages/next-pwa/__tests__/integration/base-path/app/favicon.ico
diff --git a/packages/next-pwa/__tests__/integration/base-path/app/layout.tsx b/packages/next-pwa/__tests__/integration/base-path/app/layout.tsx
@@ -0,0 +1,8 @@
+const RootLayout = ({ children }: { children: React.ReactNode }) => (
+  <html lang="en">
+    <head />
+    <body>{children}</body>
+  </html>
+);
+
+export default RootLayout;
diff --git a/packages/next-pwa/__tests__/integration/base-path/app/page.tsx b/packages/next-pwa/__tests__/integration/base-path/app/page.tsx
@@ -0,0 +1,10 @@
+import Image from "next/image";
+
+const Page = () => (
+  <main>
+    <p id="welcome-text">This is a Next.js PWA!</p>
+    <Image src="/next.svg" alt="Next.js Logo" width={180} height={37} priority />
+  </main>
+);
+
+export default Page;
diff --git a/packages/next-pwa/__tests__/integration/base-path/index.test.ts b/packages/next-pwa/__tests__/integration/base-path/index.test.ts
@@ -0,0 +1,26 @@
+import { createDescribe } from "../../test-utils/index.ts";
+
+createDescribe("integration basePath", { sourceDir: __dirname, skipInstall: false }, ({ next, testMode }) => {
+  it("should render", async () => {
+    const $ = await next.render("/next-pwa");
+    expect($("#welcome-text").text()).toBe("This is a Next.js PWA!");
+  });
+
+  it("should fetch image", async () => {
+    const image = await next.fetch("/next-pwa/next.svg");
+    expect(image.status).toBe(200);
+    const favicon = await next.fetch("/next-pwa/favicon.ico");
+    expect(favicon.status).toBe(200);
+  });
+
+  it("should be able to fetch service worker", async () => {
+    const sw = await next.fetch("/next-pwa/sw.js");
+    expect(sw.status).toBe(200);
+    expect(sw.headers.get("Content-Type")?.includes("application/javascript")).toBe(true);
+    const swContent = await sw.text();
+    if (testMode === "start") {
+      expect(/url:\"\/next-pwa\/swe-worker-(.*?).js\"/.test(swContent)).toBe(true);
+      expect(/url:\"\/next-pwa\/_next\/..\/public\/swe-worker-(.*?).js\"/.test(swContent)).toBe(false);
+    }
+  });
+});
diff --git a/packages/next-pwa/__tests__/integration/base-path/next.config.mjs b/packages/next-pwa/__tests__/integration/base-path/next.config.mjs
@@ -0,0 +1,14 @@
+// @ts-check
+import withPWAInit from "@ducanh2912/next-pwa";
+
+const withPWA = withPWAInit({
+  dest: "public",
+  cacheOnFrontEndNav: true,
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  basePath: "/next-pwa",
+};
+
+export default withPWA(nextConfig);
diff --git a/packages/next-pwa/__tests__/integration/base-path/public/next.svg b/packages/next-pwa/__tests__/integration/base-path/public/next.svg
diff --git a/packages/next-pwa/__tests__/integration/base-path/tsconfig.json b/packages/next-pwa/__tests__/integration/base-path/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/next-pwa/src/context.ts b/packages/next-pwa/src/context.ts
@@ -17,7 +17,7 @@ const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 export interface PluginOptionsComplete extends Required<PluginOptions> {
   disable: false;
-  workboxOptions: RequireFields<WorkboxOptions, "swDest" | "additionalManifestEntries" | "exclude" | "modifyURLPrefix" | "manifestTransforms">;
+  workboxOptions: RequireFields<WorkboxOptions, "swDest" | "additionalManifestEntries" | "exclude" | "manifestTransforms">;
 }
 
 type PublicPath = NonNullable<NonNullable<WebpackConfig["output"]>["publicPath"]>;
@@ -59,7 +59,6 @@ export const parseOptions = (
     customWorkerPrefix = "worker",
     workboxOptions: {
       additionalManifestEntries,
-      modifyURLPrefix: _modifyURLPrefix = {},
       manifestTransforms: _manifestTransforms = [],
       exclude: _exclude = [/\/_next\/static\/.*(?<!\.p)\.woff2/, /\.map$/, /^manifest.*\.js$/],
       ...workbox
@@ -81,6 +80,8 @@ export const parseOptions = (
           "!worker-*.js.map",
           "!fallback-*.js",
           "!fallback-*.js.map",
+          "!swe-worker-*.js",
+          "!swe-worker-*.js.map",
           `!${sw.replace(/^\/+/, "")}`,
           `!${sw.replace(/^\/+/, "")}.map`,
           ...publicExcludes,
@@ -135,7 +136,7 @@ export const parseOptions = (
     cacheOnFrontEndNav,
     aggressiveFrontEndNavCaching,
     reloadOnOnline,
-    scope: path.posix.join(nextConfig.basePath, scope),
+    scope: path.posix.join(scope, "/"),
     customWorkerSrc,
     customWorkerDest: path.resolve(webpackContext.dir, customWorkerDest),
     customWorkerPrefix,
@@ -155,16 +156,14 @@ export const parseOptions = (
           return false;
         },
       ],
-      modifyURLPrefix: {
-        ..._modifyURLPrefix,
-        "/_next/../public/": "/",
-      },
       manifestTransforms: [
         ..._manifestTransforms,
         async (manifestEntries, compilation) => {
           const manifest = manifestEntries.map((m) => {
-            m.url = m.url.replace("/_next//static/image", "/_next/static/image");
-            m.url = m.url.replace("/_next//static/media", "/_next/static/media");
+            m.url = m.url
+              .replace("/_next//static/image", "/_next/static/image")
+              .replace("/_next//static/media", "/_next/static/media")
+              .replace("/_next/../public", "");
             if (m.revision === null) {
               let key = m.url;
               if (typeof publicPath === "string" && key.startsWith(publicPath)) {