fix(sw): assign new channel port on reload (#1166)

codesandbox · Jul 25, 2024 · 2d92bea · 2d92bea
1 parent 55cb609
commit 2d92bea
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/sandpack-client/src/clients/runtime/index.ts b/sandpack-client/src/clients/runtime/index.ts
@@ -195,14 +195,18 @@ export class SandpackRuntime extends SandpackClient {
       }
     };
 
-    this.iframe.onload = () => {
+    const sendMessage = () => {
       const initMsg = {
         $channel: CHANNEL_NAME,
         $type: "preview/init",
       };
 
       iframeContentWindow.postMessage(initMsg, "*", [channel.port2]);
+
+      this.iframe.removeEventListener("load", sendMessage);
     };
+
+    this.iframe.addEventListener("load", sendMessage);
   }
 
   private handleWorkerRequest(
@@ -362,6 +366,10 @@ export class SandpackRuntime extends SandpackClient {
      */
     if (message.type === "refresh") {
       this.setLocationURLIntoIFrame();
+
+      if (this.options.experimental_enableServiceWorker) {
+        this.serviceWorkerHandshake();
+      }
     }
 
     this.iframeProtocol.dispatch(message);

diff --git a/sandpack-react/src/presets/CustomSandpack.stories.tsx b/sandpack-react/src/presets/CustomSandpack.stories.tsx
@@ -55,6 +55,7 @@ export const ExperimentalServiceWorker: React.FC = () => {
         `,
       }}
       options={{
+        bundlerURL: "https://nqfrns-3000.csb.app/",
         experimental_enableServiceWorker: true,
       }}
       template="react"