diff --git a/sandpack-client/src/clients/runtime/index.ts b/sandpack-client/src/clients/runtime/index.ts index e9fb0eeef..b6bbcf8dd 100644 --- 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 index 0c275d1ab..ce5276ff1 100644 --- 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"