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

Author: danilowoz

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);

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"