fix(cache-on-front-end-nav): fixed error 'URL object could not be clo…

…ned.' (#127) [bump]
DuCanhGH · Dec 27, 2023 · a4b8926 · a4b8926
1 parent 5198496
commit a4b8926
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/.changeset/small-dingos-give.md b/.changeset/small-dingos-give.md
@@ -0,0 +1,7 @@
+---
+"@ducanh2912/next-pwa": patch
+---
+
+fix(cache-on-front-end-nav): fixed error 'URL object could not be cloned.'
+
+- This was due to us trying to send the URL object to our worker through `postMessage`.
diff --git a/docs/content/index.mdx b/docs/content/index.mdx
@@ -8,7 +8,3 @@ type: Docs
 Take a look around:
 
 - [`next-pwa`](/docs/next-pwa/getting-started)
-
-## What's the plan for the future?
-
-- In the future, I plan on supporting [`Turbopack`](https://turbo.build/pack) as soon as we get our hands on them.
diff --git a/docs/content/next-pwa/index.mdx b/docs/content/next-pwa/index.mdx
@@ -20,7 +20,7 @@ It is also really configurable as it uses Workbox under the hood to build the se
 See [Getting started](/docs/next-pwa/getting-started). It should have abundant information on how to set the plugin up, including additional information for
 older versions of Next.js and tips!
 
-## And how to configure it?
+## How to configure it?
 
 See [Configuring](/docs/next-pwa/configuring). All available options are listed there!
 

diff --git a/packages/next-pwa/src/sw-entry-worker.ts b/packages/next-pwa/src/sw-entry-worker.ts
@@ -4,11 +4,11 @@ export type MessageType =
   | {
       type: "__FRONTEND_NAV_CACHE__";
       shouldCacheAggressively: boolean;
-      url: URL | string;
+      url: string;
     }
   | {
       type: "__START_URL_CACHE__";
-      url: URL | string;
+      url: string;
     };
 
 self.onmessage = async (ev: MessageEvent<MessageType>) => {

diff --git a/packages/next-pwa/src/sw-entry.ts b/packages/next-pwa/src/sw-entry.ts
@@ -37,18 +37,31 @@ if (
 
   if (__PWA_CACHE_ON_FRONT_END_NAV__ || __PWA_START_URL__) {
     const cacheOnFrontEndNav = async (
-      url?: string | URL | null | undefined
+      originalUrl?: string | URL | null | undefined
     ) => {
-      if (!window.navigator.onLine || !url) {
+      if (!window.navigator.onLine) {
         return;
       }
-      const isStartUrl = !!__PWA_START_URL__ && url === __PWA_START_URL__;
+
+      const url = originalUrl
+        ? originalUrl instanceof URL
+          ? originalUrl.toString()
+          : typeof originalUrl === "string"
+            ? originalUrl
+            : undefined
+        : undefined;
+
+      if (typeof url !== "string") return;
+
+      const isStartUrl =
+        !!__PWA_START_URL__ && originalUrl === __PWA_START_URL__;
+
       if (isStartUrl) {
         if (!swEntryWorker) {
-          const response = await fetch(url);
+          const response = await fetch(originalUrl);
           if (!response.redirected) {
             const startUrlCache = await caches.open("start-url");
-            return startUrlCache.put(url, response);
+            return startUrlCache.put(originalUrl, response);
           }
         } else {
           swEntryWorker.postMessage({