Register Service Worker to handle requests from Editor Canvas (Iframe src) #6686

T-Reimer · 2026-01-13T01:58:14Z

T-Reimer
Jan 13, 2026

Is there a clean way to set the src of the iframe?

I am looking for a way to have a service worker control the loaded assets or urls from the editor. I already have a Service Worker initiated on the parent page and working. The content from the editor internal iframe however is a bit more difficult.

According to AI agents, JS spec should allow about:blank src iframes to be controlled from the parent window SW. But I ran into issues.

So here's some of the code I hacked together to somewhat get it to work. I get the requests from inside of the iframe in my SW, but as expected, it breaks things with the editor to do a in place reload.

The visible content stays there, but as soon as I scroll, it becomes blank.

Plugin

import { Editor } from "@grapesjs/studio-sdk-plugins/dist/types.js";

/**
 * Generate the iframe contents for the iframe canvas
 *
 * @param projectId
 * @returns
 */
export function getIframeContents(projectId: string) {
  return `
  <html>
    <head>      
      <script>
        // Check for the controller immediately
        const initSW = () => {
          if (navigator.serviceWorker.controller) {
            console.log("Iframe controlled by:", navigator.serviceWorker.controller.scriptURL);
            navigator.serviceWorker.controller.postMessage({
              type: "SET_PROJECT",
              projectId: "${projectId}",
              context: "iframe"
            });
          } else {
            // If not controlled, we wait for the SW to be ready and reload once
            // This is the "kickstart" for about:blank frames
            navigator.serviceWorker.ready.then(() => {
              window.location.reload();
            });
          }
        };

        initSW();
      </script>
    </head>
    <body></body>
  </html>
`;
}

/**
 * GrapesJS plugin to tweak the iframe canvas
 *
 * @param projectId
 */
export function canvasTweaksPlugin(projectId: string) {
  return (editor: Editor) => {
    editor.on(
      "frame:load:before",
      ({ el }: { el: HTMLIFrameElement; window: Window }) => {
        const virtualUrl = `/virtual-preview-frame?projectId=${projectId}`;
        if (el.src === "about:blank" || el.src === "") {
          // Set a src for the service worker to intercept
          // This is a workaround for 'about:blank' iframes losing controller inheritance
          el.src = virtualUrl;
        }
      }
    );

    if (!editor.config.canvas) {
      editor.config.canvas = {};
    }
    editor.config.canvas.frameContent = getIframeContents(projectId);
  };
}

Service Worker

// ... Some logic to determine which project the request is for

self.addEventListener("install", () => {
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener("fetch", (event) => {
  if (event.request.url.endsWith(".png")) {
    console.log("Req:", new URL(event.request.url).pathname, event.clientId);
  }

  const url = new URL(event.request.url);
  if (url.pathname === "/virtual-preview-frame") {
    const projectId = url.searchParams.get("projectId");

    // register the iframe client
    clientMap.set(event.clientId, {
      projectId: projectId || "",
      context: "iframe",
    });
    console.log("Registered iframe client:", event.clientId);

    event.respondWith(
      new Response(getIframeContents(projectId || ""), {
        headers: { "Content-Type": "text/html" },
      })
    );
    return;
  }

  // ... some additional caching and loading strategies

});

T-Reimer · 2026-01-14T15:25:09Z

T-Reimer
Jan 14, 2026
Author

Ok. So I found a workaround that seems to work for me.

Instead of changing the src on the frame:load:before event, I now run it on the frame:render.

So the canvasTweaksPlugin function becomes the following.

export function canvasTweaksPlugin(projectId: string) {
  return (editor: Editor) => {
    editor.on("frame:render", ({ el }: { el: HTMLIFrameElement }) => {
      const virtualUrl = `/virtual-preview-frame?projectId=${projectId}`;
      if (el.src === "about:blank" || el.src === "") {
        // Set a src for the service worker to intercept
        // This is a workaround for 'about:blank' iframes losing controller inheritance
        el.src = virtualUrl;
      }
    });

    if (!editor.config.canvas) {
      editor.config.canvas = {};
    }
    editor.config.canvas.frameContent = getIframeContents(projectId);
  };
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Register Service Worker to handle requests from Editor Canvas (Iframe src) #6686

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Register Service Worker to handle requests from Editor Canvas (Iframe src) #6686

Uh oh!

T-Reimer Jan 13, 2026

Replies: 1 comment

Uh oh!

T-Reimer Jan 14, 2026 Author

T-Reimer
Jan 13, 2026

T-Reimer
Jan 14, 2026
Author