@serwist/next 9.0.0-preview.0 → 9.0.0-preview.10

package/src/index.ts

@@ -1,3 +1,4 @@
+import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -5,8 +6,7 @@ import type { NextInjectManifestOptions } from "@serwist/build";
 import { validateNextInjectManifestOptions } from "@serwist/build/next";
 import { InjectManifest } from "@serwist/webpack-plugin";
 import { ChildCompilationPlugin, relativeToOutputPath } from "@serwist/webpack-plugin/internal";
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
-import fg from "fast-glob";
+import { globSync } from "glob";
 import type { NextConfig } from "next";
 import type { Compilation, Configuration, default as Webpack } from "webpack";
 
@@ -27,7 +27,7 @@ const withSerwistInit = (pluginOptions: NextInjectManifestOptions): ((nextConfig
       const tsConfigJson = loadTSConfig(options.dir, nextConfig?.typescript?.tsconfigPath);
 
       const {
-        cacheOnFrontEndNav,
+        cacheOnNavigation,
         disable,
         scope = basePath,
         swUrl,
@@ -59,7 +59,7 @@ const withSerwistInit = (pluginOptions: NextInjectManifestOptions): ((nextConfig
         new webpack.DefinePlugin({
           "self.__SERWIST_SW_ENTRY.sw": `'${_sw}'`,
           "self.__SERWIST_SW_ENTRY.scope": `'${_scope}'`,
-          "self.__SERWIST_SW_ENTRY.cacheOnFrontEndNav": `${cacheOnFrontEndNav}`,
+          "self.__SERWIST_SW_ENTRY.cacheOnNavigation": `${cacheOnNavigation}`,
           "self.__SERWIST_SW_ENTRY.register": `${register}`,
           "self.__SERWIST_SW_ENTRY.reloadOnOnline": `${reloadOnOnline}`,
         } satisfies Record<`${SerwistNextOptionsKey}.${Exclude<keyof SerwistNextOptions, "swEntryWorker">}`, string | undefined>),
@@ -100,16 +100,16 @@ const withSerwistInit = (pluginOptions: NextInjectManifestOptions): ((nextConfig
         }
 
         const {
-          swSrc: providedSwSrc,
-          swDest: providedSwDest,
+          swSrc: userSwSrc,
+          swDest: userSwDest,
           additionalPrecacheEntries,
-          exclude = [],
+          exclude,
           manifestTransforms = [],
           ...otherBuildOptions
         } = buildOptions;
 
-        let swSrc = providedSwSrc;
-        let swDest = providedSwDest;
+        let swSrc = userSwSrc;
+        let swDest = userSwDest;
 
         // If these two paths are not absolute, they will be resolved from `compilation.options.output.path`,
         // which is `${options.dir}/${nextConfig.destDir}` for Next.js apps, rather than `${options.dir}`
@@ -122,9 +122,21 @@ const withSerwistInit = (pluginOptions: NextInjectManifestOptions): ((nextConfig
         }
 
         const publicDir = path.resolve(options.dir, "public");
-        const destDir = path.dirname(swDest);
+        const { dir: destDir, base: destBase } = path.parse(swDest);
+
+        const cleanUpList = globSync(["swe-worker-*.js", "swe-worker-*.js.map", destBase, `${destBase}.map`], {
+          absolute: true,
+          nodir: true,
+          cwd: destDir,
+        });
+
+        for (const file of cleanUpList) {
+          fs.rm(file, { force: true }, (err) => {
+            if (err) throw err;
+          });
+        }
 
-        const shouldBuildSWEntryWorker = cacheOnFrontEndNav;
+        const shouldBuildSWEntryWorker = cacheOnNavigation;
         let swEntryPublicPath: string | undefined = undefined;
         let swEntryWorkerDest: string | undefined = undefined;
 
@@ -150,28 +162,22 @@ const withSerwistInit = (pluginOptions: NextInjectManifestOptions): ((nextConfig
         logger.info(`  URL: ${_sw}`);
         logger.info(`  Scope: ${_scope}`);
 
-        config.plugins.push(
-          new CleanWebpackPlugin({
-            cleanOnceBeforeBuildPatterns: [path.join(destDir, "swe-worker-*.js"), path.join(destDir, "swe-worker-*.js.map"), swDest],
-          }),
-        );
-
         // Precache files in public folder
         let resolvedManifestEntries = additionalPrecacheEntries;
 
         if (!resolvedManifestEntries) {
-          const swDestFileName = path.basename(swDest);
           const userPublicGlob = typeof globPublicPatterns === "string" ? [globPublicPatterns] : globPublicPatterns ?? ["**/*"];
-          const publicScan = fg.sync(
+          const publicScan = globSync(
             [
               ...userPublicGlob,
               // Forcibly include these in case the user outputs these files to `public`.
               "!swe-worker-*.js",
               "!swe-worker-*.js.map",
-              `!${swDestFileName.replace(/^\/+/, "")}`,
-              `!${swDestFileName.replace(/^\/+/, "")}.map`,
+              `!${destBase}`,
+              `!${destBase}.map`,
             ],
             {
+              nodir: true,
               cwd: publicDir,
             },
           );

package/src/index.worker.ts

@@ -1,5 +1,4 @@
+import { PAGES_CACHE_NAME } from "./worker/constants.js";
 import { defaultCache } from "./worker/defaultCache.js";
-import { type DefinePageRuntimeCachingOptions, type PageRuntimeCaching, definePageRuntimeCaching } from "./worker/definePageRuntimeCaching.js";
 
-export { defaultCache, definePageRuntimeCaching };
-export type { DefinePageRuntimeCachingOptions, PageRuntimeCaching };
+export { defaultCache, PAGES_CACHE_NAME };

package/src/internal-types.ts

@@ -5,7 +5,7 @@ export type SerwistNextOptionsKey = "self.__SERWIST_SW_ENTRY";
 export interface SerwistNextOptions {
   sw: string;
   scope: string;
-  cacheOnFrontEndNav: boolean;
+  cacheOnNavigation: boolean;
   register: boolean;
   reloadOnOnline: boolean;
   swEntryWorker: string | undefined;

package/src/sw-entry.ts

@@ -30,8 +30,8 @@ if (typeof window !== "undefined" && "serviceWorker" in navigator && typeof cach
     window.serwist.register();
   }
 
-  if (self.__SERWIST_SW_ENTRY.cacheOnFrontEndNav) {
-    const cacheOnFrontEndNav = async (url?: string | URL | null | undefined) => {
+  if (self.__SERWIST_SW_ENTRY.cacheOnNavigation) {
+    const cacheOnNavigation = async (url?: string | URL | null | undefined) => {
       if (!window.navigator.onLine || !url) {
         return;
       }
@@ -44,17 +44,17 @@ if (typeof window !== "undefined" && "serviceWorker" in navigator && typeof cach
     const pushState = history.pushState;
     history.pushState = (...args) => {
       pushState.apply(history, args);
-      cacheOnFrontEndNav(args[2]);
+      cacheOnNavigation(args[2]);
     };
 
     const replaceState = history.replaceState;
     history.replaceState = (...args) => {
       replaceState.apply(history, args);
-      cacheOnFrontEndNav(args[2]);
+      cacheOnNavigation(args[2]);
     };
 
     window.addEventListener("online", () => {
-      cacheOnFrontEndNav(window.location.pathname);
+      cacheOnNavigation(window.location.pathname);
     });
   }
 

package/src/worker/constants.ts

@@ -0,0 +1,5 @@
+export const PAGES_CACHE_NAME = {
+  rscPrefetch: "pages-rsc-prefetch",
+  rsc: "pages-rsc",
+  html: "pages",
+} as const;

package/src/worker/defaultCache.ts

@@ -1,144 +1,160 @@
+import { ExpirationPlugin } from "@serwist/expiration";
+import { RangeRequestsPlugin } from "@serwist/range-requests";
+import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from "@serwist/strategies";
 import type { RuntimeCaching } from "@serwist/sw";
-import { definePageRuntimeCaching } from "./definePageRuntimeCaching.js";
 
-// Serwist RuntimeCaching config: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.RuntimeCachingEntry
+import { PAGES_CACHE_NAME } from "./constants.js";
+
+// Serwist RuntimeCaching config: https://serwist.pages.dev/docs/sw/register-runtime-caching
 export const defaultCache = [
   {
-    urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
-    handler: "CacheFirst",
-    options: {
+    matcher: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
+    handler: new CacheFirst({
       cacheName: "google-fonts-webfonts",
-      expiration: {
-        maxEntries: 4,
-        maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 4,
+          maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
-    handler: "StaleWhileRevalidate",
-    options: {
+    matcher: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
+    handler: new StaleWhileRevalidate({
       cacheName: "google-fonts-stylesheets",
-      expiration: {
-        maxEntries: 4,
-        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 4,
+          maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
-    handler: "StaleWhileRevalidate",
-    options: {
+    matcher: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
+    handler: new StaleWhileRevalidate({
       cacheName: "static-font-assets",
-      expiration: {
-        maxEntries: 4,
-        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 4,
+          maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
-    handler: "StaleWhileRevalidate",
-    options: {
+    matcher: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+    handler: new StaleWhileRevalidate({
       cacheName: "static-image-assets",
-      expiration: {
-        maxEntries: 64,
-        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 64,
+          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\/_next\/static.+\.js$/i,
-    handler: "CacheFirst",
-    options: {
+    matcher: /\/_next\/static.+\.js$/i,
+    handler: new CacheFirst({
       cacheName: "next-static-js-assets",
-      expiration: {
-        maxEntries: 64,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 64,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\/_next\/image\?url=.+$/i,
-    handler: "StaleWhileRevalidate",
-    options: {
+    matcher: /\/_next\/image\?url=.+$/i,
+    handler: new StaleWhileRevalidate({
       cacheName: "next-image",
-      expiration: {
-        maxEntries: 64,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 64,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\.(?:mp3|wav|ogg)$/i,
-    handler: "CacheFirst",
-    options: {
-      rangeRequests: true,
+    matcher: /\.(?:mp3|wav|ogg)$/i,
+    handler: new CacheFirst({
       cacheName: "static-audio-assets",
-      expiration: {
-        maxEntries: 32,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+        new RangeRequestsPlugin(),
+      ],
+    }),
   },
   {
-    urlPattern: /\.(?:mp4|webm)$/i,
-    handler: "CacheFirst",
-    options: {
-      rangeRequests: true,
+    matcher: /\.(?:mp4|webm)$/i,
+    handler: new CacheFirst({
       cacheName: "static-video-assets",
-      expiration: {
-        maxEntries: 32,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+        new RangeRequestsPlugin(),
+      ],
+    }),
   },
   {
-    urlPattern: /\.(?:js)$/i,
-    handler: "StaleWhileRevalidate",
-    options: {
+    matcher: /\.(?:js)$/i,
+    handler: new StaleWhileRevalidate({
       cacheName: "static-js-assets",
-      expiration: {
-        maxEntries: 48,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 48,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\.(?:css|less)$/i,
-    handler: "StaleWhileRevalidate",
-    options: {
+    matcher: /\.(?:css|less)$/i,
+    handler: new StaleWhileRevalidate({
       cacheName: "static-style-assets",
-      expiration: {
-        maxEntries: 32,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
-    handler: "StaleWhileRevalidate",
-    options: {
+    matcher: /\/_next\/data\/.+\/.+\.json$/i,
+    handler: new NetworkFirst({
       cacheName: "next-data",
-      expiration: {
-        maxEntries: 32,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: /\.(?:json|xml|csv)$/i,
-    handler: "NetworkFirst",
-    options: {
+    matcher: /\.(?:json|xml|csv)$/i,
+    handler: new NetworkFirst({
       cacheName: "static-data-assets",
-      expiration: {
-        maxEntries: 32,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: ({ sameOrigin, url: { pathname } }) => {
+    matcher: ({ sameOrigin, url: { pathname } }) => {
       // Exclude /api/auth/callback/* to fix OAuth workflow in Safari without having an impact on other environments
       // The above route is the default for next-auth, you may need to change it if your OAuth workflow has a different callback route
       // Issue: https://github.com/shadowwalker/next-pwa/issues/131#issuecomment-821894809
@@ -152,72 +168,79 @@ export const defaultCache = [
 
       return false;
     },
-    handler: "NetworkFirst",
     method: "GET",
-    options: {
+    handler: new NetworkFirst({
       cacheName: "apis",
-      expiration: {
-        maxEntries: 16,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 16,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
       networkTimeoutSeconds: 10, // fallback to cache if API does not response within 10 seconds
-    },
+    }),
   },
-  ...definePageRuntimeCaching({
-    rscPrefetch: {
-      urlPattern: ({ request, url: { pathname }, sameOrigin }) =>
-        request.headers.get("RSC") === "1" && request.headers.get("Next-Router-Prefetch") === "1" && sameOrigin && !pathname.startsWith("/api/"),
-      handler: "NetworkFirst",
-      options: {
-        expiration: {
+  {
+    matcher: ({ request, url: { pathname }, sameOrigin }) =>
+      request.headers.get("RSC") === "1" && request.headers.get("Next-Router-Prefetch") === "1" && sameOrigin && !pathname.startsWith("/api/"),
+    handler: new NetworkFirst({
+      cacheName: PAGES_CACHE_NAME.rscPrefetch,
+      plugins: [
+        new ExpirationPlugin({
           maxEntries: 32,
           maxAgeSeconds: 24 * 60 * 60, // 24 hours
-        },
-      },
-    },
-    rsc: {
-      urlPattern: ({ request, url: { pathname }, sameOrigin }) => request.headers.get("RSC") === "1" && sameOrigin && !pathname.startsWith("/api/"),
-      handler: "NetworkFirst",
-      options: {
-        expiration: {
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: ({ request, url: { pathname }, sameOrigin }) => request.headers.get("RSC") === "1" && sameOrigin && !pathname.startsWith("/api/"),
+    handler: new NetworkFirst({
+      cacheName: PAGES_CACHE_NAME.rsc,
+      plugins: [
+        new ExpirationPlugin({
           maxEntries: 32,
           maxAgeSeconds: 24 * 60 * 60, // 24 hours
-        },
-      },
-    },
-    html: {
-      urlPattern: ({ request, url: { pathname }, sameOrigin }) =>
-        request.headers.get("Content-Type")?.includes("text/html") && sameOrigin && !pathname.startsWith("/api/"),
-      handler: "NetworkFirst",
-      options: {
-        expiration: {
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: ({ request, url: { pathname }, sameOrigin }) =>
+      request.headers.get("Content-Type")?.includes("text/html") && sameOrigin && !pathname.startsWith("/api/"),
+    handler: new NetworkFirst({
+      cacheName: PAGES_CACHE_NAME.html,
+      plugins: [
+        new ExpirationPlugin({
           maxEntries: 32,
           maxAgeSeconds: 24 * 60 * 60, // 24 hours
-        },
-      },
-    },
-  }),
+        }),
+      ],
+    }),
+  },
   {
-    urlPattern: ({ url: { pathname }, sameOrigin }) => sameOrigin && !pathname.startsWith("/api/"),
-    handler: "NetworkFirst",
-    options: {
+    matcher: ({ url: { pathname }, sameOrigin }) => sameOrigin && !pathname.startsWith("/api/"),
+    handler: new NetworkFirst({
       cacheName: "others",
-      expiration: {
-        maxEntries: 32,
-        maxAgeSeconds: 24 * 60 * 60, // 24 hours
-      },
-    },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
   },
   {
-    urlPattern: ({ sameOrigin }) => !sameOrigin,
-    handler: "NetworkFirst",
-    options: {
+    matcher: ({ sameOrigin }) => !sameOrigin,
+    handler: new NetworkFirst({
       cacheName: "cross-origin",
-      expiration: {
-        maxEntries: 32,
-        maxAgeSeconds: 60 * 60, // 1 hour
-      },
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 60 * 60, // 1 hour
+        }),
+      ],
       networkTimeoutSeconds: 10,
-    },
+    }),
   },
 ] satisfies RuntimeCaching[];

package/dist/worker/definePageRuntimeCaching.d.ts

@@ -1,16 +0,0 @@
-import type { RuntimeCaching } from "@serwist/sw";
-export interface PageRuntimeCaching extends Omit<RuntimeCaching, "options"> {
-    options?: Omit<NonNullable<RuntimeCaching["options"]>, "cacheName">;
-}
-export interface DefinePageRuntimeCachingOptions {
-    rscPrefetch?: PageRuntimeCaching;
-    rsc?: PageRuntimeCaching;
-    html?: PageRuntimeCaching;
-}
-/**
- * Conveniently define three `runtimeCaching` entries for Next.js pages.
- * @param options
- * @returns
- */
-export declare const definePageRuntimeCaching: ({ rscPrefetch, rsc, html }: DefinePageRuntimeCachingOptions) => RuntimeCaching[];
-//# sourceMappingURL=definePageRuntimeCaching.d.ts.map

package/dist/worker/definePageRuntimeCaching.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"definePageRuntimeCaching.d.ts","sourceRoot":"","sources":["../../src/worker/definePageRuntimeCaching.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IACzE,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;CACrE;AAED,MAAM,WAAW,+BAA+B;IAC9C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,GAAG,CAAC,EAAE,kBAAkB,CAAC;IACzB,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC3B;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,+BAAgC,+BAA+B,KAAG,cAAc,EAiBpH,CAAC"}

package/src/worker/definePageRuntimeCaching.ts

@@ -1,36 +0,0 @@
-import type { RuntimeCaching } from "@serwist/sw";
-import { nonNullable } from "@serwist/utils";
-
-export interface PageRuntimeCaching extends Omit<RuntimeCaching, "options"> {
-  options?: Omit<NonNullable<RuntimeCaching["options"]>, "cacheName">;
-}
-
-export interface DefinePageRuntimeCachingOptions {
-  rscPrefetch?: PageRuntimeCaching;
-  rsc?: PageRuntimeCaching;
-  html?: PageRuntimeCaching;
-}
-
-/**
- * Conveniently define three `runtimeCaching` entries for Next.js pages.
- * @param options
- * @returns
- */
-export const definePageRuntimeCaching = ({ rscPrefetch, rsc, html }: DefinePageRuntimeCachingOptions): RuntimeCaching[] => {
-  const pageRcs = [rscPrefetch, rsc, html] as RuntimeCaching[];
-
-  if (pageRcs[0]) {
-    if (!pageRcs[0].options) pageRcs[0].options = {};
-    pageRcs[0].options.cacheName = "pages-rsc-prefetch";
-  }
-  if (pageRcs[1]) {
-    if (!pageRcs[1].options) pageRcs[1].options = {};
-    pageRcs[1].options.cacheName = "pages-rsc";
-  }
-  if (pageRcs[2]) {
-    if (!pageRcs[2].options) pageRcs[2].options = {};
-    pageRcs[2].options.cacheName = "pages";
-  }
-
-  return pageRcs.filter(nonNullable);
-};