@serwist/next 8.4.4 → 9.0.0-preview.0

package/src/worker/defaultCache.ts

@@ -0,0 +1,223 @@
+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
+export const defaultCache = [
+  {
+    urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
+    handler: "CacheFirst",
+    options: {
+      cacheName: "google-fonts-webfonts",
+      expiration: {
+        maxEntries: 4,
+        maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+      },
+    },
+  },
+  {
+    urlPattern: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "google-fonts-stylesheets",
+      expiration: {
+        maxEntries: 4,
+        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-font-assets",
+      expiration: {
+        maxEntries: 4,
+        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-image-assets",
+      expiration: {
+        maxEntries: 64,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+      },
+    },
+  },
+  {
+    urlPattern: /\/_next\/static.+\.js$/i,
+    handler: "CacheFirst",
+    options: {
+      cacheName: "next-static-js-assets",
+      expiration: {
+        maxEntries: 64,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\/_next\/image\?url=.+$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "next-image",
+      expiration: {
+        maxEntries: 64,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:mp3|wav|ogg)$/i,
+    handler: "CacheFirst",
+    options: {
+      rangeRequests: true,
+      cacheName: "static-audio-assets",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:mp4|webm)$/i,
+    handler: "CacheFirst",
+    options: {
+      rangeRequests: true,
+      cacheName: "static-video-assets",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:js)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-js-assets",
+      expiration: {
+        maxEntries: 48,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:css|less)$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "static-style-assets",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
+    handler: "StaleWhileRevalidate",
+    options: {
+      cacheName: "next-data",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: /\.(?:json|xml|csv)$/i,
+    handler: "NetworkFirst",
+    options: {
+      cacheName: "static-data-assets",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: ({ 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
+      if (!sameOrigin || pathname.startsWith("/api/auth/callback")) {
+        return false;
+      }
+
+      if (pathname.startsWith("/api/")) {
+        return true;
+      }
+
+      return false;
+    },
+    handler: "NetworkFirst",
+    method: "GET",
+    options: {
+      cacheName: "apis",
+      expiration: {
+        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: {
+          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: {
+          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: {
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        },
+      },
+    },
+  }),
+  {
+    urlPattern: ({ url: { pathname }, sameOrigin }) => sameOrigin && !pathname.startsWith("/api/"),
+    handler: "NetworkFirst",
+    options: {
+      cacheName: "others",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 24 * 60 * 60, // 24 hours
+      },
+    },
+  },
+  {
+    urlPattern: ({ sameOrigin }) => !sameOrigin,
+    handler: "NetworkFirst",
+    options: {
+      cacheName: "cross-origin",
+      expiration: {
+        maxEntries: 32,
+        maxAgeSeconds: 60 * 60, // 1 hour
+      },
+      networkTimeoutSeconds: 10,
+    },
+  },
+] satisfies RuntimeCaching[];

package/src/worker/definePageRuntimeCaching.ts

@@ -0,0 +1,36 @@
+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);
+};

package/dist/index.browser.d.cts

@@ -1,2 +0,0 @@
-import type { RuntimeCaching } from "@serwist/build";
-export declare const defaultCache: RuntimeCaching[];

package/dist/index.browser.d.ts

@@ -1,2 +0,0 @@
-import type { RuntimeCaching } from "@serwist/build";
-export declare const defaultCache: RuntimeCaching[];

package/dist/index.browser.js

@@ -1,208 +0,0 @@
-// Serwist RuntimeCaching config: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.RuntimeCachingEntry
-const defaultCache = [
-    {
-        urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
-        handler: "CacheFirst",
-        options: {
-            cacheName: "google-fonts-webfonts",
-            expiration: {
-                maxEntries: 4,
-                maxAgeSeconds: 365 * 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
-        handler: "StaleWhileRevalidate",
-        options: {
-            cacheName: "google-fonts-stylesheets",
-            expiration: {
-                maxEntries: 4,
-                maxAgeSeconds: 7 * 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
-        handler: "StaleWhileRevalidate",
-        options: {
-            cacheName: "static-font-assets",
-            expiration: {
-                maxEntries: 4,
-                maxAgeSeconds: 7 * 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
-        handler: "StaleWhileRevalidate",
-        options: {
-            cacheName: "static-image-assets",
-            expiration: {
-                maxEntries: 64,
-                maxAgeSeconds: 30 * 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\/_next\/static.+\.js$/i,
-        handler: "CacheFirst",
-        options: {
-            cacheName: "next-static-js-assets",
-            expiration: {
-                maxEntries: 64,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\/_next\/image\?url=.+$/i,
-        handler: "StaleWhileRevalidate",
-        options: {
-            cacheName: "next-image",
-            expiration: {
-                maxEntries: 64,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\.(?:mp3|wav|ogg)$/i,
-        handler: "CacheFirst",
-        options: {
-            rangeRequests: true,
-            cacheName: "static-audio-assets",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\.(?:mp4|webm)$/i,
-        handler: "CacheFirst",
-        options: {
-            rangeRequests: true,
-            cacheName: "static-video-assets",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\.(?:js)$/i,
-        handler: "StaleWhileRevalidate",
-        options: {
-            cacheName: "static-js-assets",
-            expiration: {
-                maxEntries: 48,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\.(?:css|less)$/i,
-        handler: "StaleWhileRevalidate",
-        options: {
-            cacheName: "static-style-assets",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
-        handler: "StaleWhileRevalidate",
-        options: {
-            cacheName: "next-data",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: /\.(?:json|xml|csv)$/i,
-        handler: "NetworkFirst",
-        options: {
-            cacheName: "static-data-assets",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: ({ 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
-            if (!sameOrigin || pathname.startsWith("/api/auth/callback")) {
-                return false;
-            }
-            if (pathname.startsWith("/api/")) {
-                return true;
-            }
-            return false;
-        },
-        handler: "NetworkFirst",
-        method: "GET",
-        options: {
-            cacheName: "apis",
-            expiration: {
-                maxEntries: 16,
-                maxAgeSeconds: 24 * 60 * 60
-            },
-            networkTimeoutSeconds: 10
-        }
-    },
-    {
-        urlPattern: ({ request, url: { pathname }, sameOrigin })=>request.headers.get("RSC") === "1" && request.headers.get("Next-Router-Prefetch") === "1" && sameOrigin && !pathname.startsWith("/api/"),
-        handler: "NetworkFirst",
-        options: {
-            cacheName: "pages-rsc-prefetch",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: ({ request, url: { pathname }, sameOrigin })=>request.headers.get("RSC") === "1" && sameOrigin && !pathname.startsWith("/api/"),
-        handler: "NetworkFirst",
-        options: {
-            cacheName: "pages-rsc",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: ({ url: { pathname }, sameOrigin })=>sameOrigin && !pathname.startsWith("/api/"),
-        handler: "NetworkFirst",
-        options: {
-            cacheName: "pages",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 24 * 60 * 60
-            }
-        }
-    },
-    {
-        urlPattern: ({ sameOrigin })=>!sameOrigin,
-        handler: "NetworkFirst",
-        options: {
-            cacheName: "cross-origin",
-            expiration: {
-                maxEntries: 32,
-                maxAgeSeconds: 60 * 60
-            },
-            networkTimeoutSeconds: 10
-        }
-    }
-];
-
-export { defaultCache };