fix(sw): support fixed id value (#1197)

* fix(sw): support fixed id value * refactor * revert --------- Co-authored-by: codesandbox-bot <codesandbot@codesandbox.io>
codesandbox · Sep 10, 2024 · 1fb5a56 · 1fb5a56
1 parent 0ae65cc
commit 1fb5a56
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
@@ -14,6 +14,8 @@ export const Basic: React.FC = () => {
         options={{
           showTabs: true,
           closableTabs: true,
+          experimental_enableServiceWorker: true,
+          experimental_enableStableServiceWorkerId: true,
         }}
         // customSetup={{
         //   dependencies: {

diff --git a/sandpack-react/src/contexts/utils/useClient.ts b/sandpack-react/src/contexts/utils/useClient.ts
@@ -117,9 +117,7 @@ export const useClient: UseClient = (
   const debounceHook = useRef<number | undefined>();
   const prevEnvironment = useRef(filesState.environment);
 
-  const experimental_stableServiceWorkerId = useAsyncSandpackId(
-    filesState.files
-  );
+  const asyncSandpackId = useAsyncSandpackId(filesState.files);
 
   /**
    * Callbacks
@@ -159,6 +157,22 @@ export const useClient: UseClient = (
         }, timeOut);
       }
 
+      const getStableServiceWorkerId = async () => {
+        if (options?.experimental_enableStableServiceWorkerId) {
+          const key = `SANDPACK_INTERNAL:URL-CONSISTENT-ID`;
+          let fixedId = localStorage.getItem(key);
+
+          if (!fixedId) {
+            fixedId = await asyncSandpackId();
+            localStorage.setItem(key, fixedId);
+          }
+
+          return fixedId;
+        }
+
+        return await asyncSandpackId();
+      };
+
       const client = await loadSandpackClient(
         iframe,
         {
@@ -180,10 +194,7 @@ export const useClient: UseClient = (
           teamId,
           experimental_enableServiceWorker:
             !!options?.experimental_enableServiceWorker,
-          experimental_stableServiceWorkerId:
-            options?.experimental_enableStableServiceWorkerId
-              ? await experimental_stableServiceWorkerId()
-              : undefined,
+          experimental_stableServiceWorkerId: await getStableServiceWorkerId(),
           sandboxId,
         }
       );