A New Breeze in Electron Programming with Electron v35's Service Worker Preload Scripts

Earlier this month, Electron 35.0.0 was released.

• Electron 35.0.0 | Electron

This release adds the ability to attach Preload Scripts to a Service Worker. Just as the Preload script in the Renderer process has traditionally served as a bridge between the web page and the Main process (Node.js), the Preload script in the Service Worker provides a bridging function between the Service Worker and the Main process.

Being able to attach Preload Scripts to a Service Worker is likely a significant benefit for developers who write extensions that run in both Chrome and Electron apps. Moreover, I felt that it has the potential to transform Electron’s programming paradigm.

Traditionally, Preload Scripts provide a bridge to the Renderer process that runs the web page, enabling communication with the Main process operating in a Node.js environment.

flowchart LR
  subgraph R[Renderer Process]
    RP[Preload Realm]
  end
  RP --> M[Main Process]

With the support of Service Worker Preload Scripts, it becomes possible to implement communication with the Main process in the Service Worker in the same way as in the Renderer process.

flowchart LR
  subgraph R[Renderer Process]
    RP[Preload Realm]
  end
  M[Main Process]
  RP --> M
  subgraph S[Service Worker]
    SP[Preload Realm]
  end
  SP --> M
  R -.-> S

By introducing Service Workers, it becomes possible to divide the increasingly bloated responsibilities of the Main process or offload heavy processing— which might interfere with UI operations— to the Service Worker.

In this example, the goal was to build a message pipeline as follows^[1]:

• Register the Service Worker from the Renderer process when the Electron app starts
• Implement a call from the Renderer process to the Service Worker
• In the Service Worker, call an external REST API and retain the results
  • The REST API is invoked by two triggers: when a message is received and periodically
  • If the REST API results differ from the previous result, a change notification is sent to the Main process via the contextBridge in the Preload
• In the Main process, upon receiving the change notification, a desktop Notification is displayed

flowchart TD
  R[Renderer Process]--登録-->S[Service Worker:<br>外部 REST API の手動および定期的呼び出し] --変更通知--> SP[Service Worker preload:<br>contextBridge] --変更通知--> C[Main Process:<br>Notification 表示]
  R--リクエスト-->S

The project structure is as follows:

.
├── index.html
├── main.mjs              # Main プロセス
├── package.json
├── preload-sw.js         # Service Worker preload スクリプト
├── preload.js            # Renderer preload スクリプト
├── renderer.js           # Renderer プロセス
└── service-worker.js     # Service Worker

The complete source code created for this example is available in the following repository.

electron-study/serviceworker-notification-example at master · kondoumh/electron-study

In the Renderer process, the Service Worker is registered at startup.

onload = () => {
  navigator.serviceWorker.register('service-worker.js')
    .then(() => console.log('Service Worker registered'))
    .catch((err) => console.error('Service Worker registration failed:', err));
}

We register the Preload Script using the Session class's registerPreloadScript method. In version 35.0.0, the type field now accepts service-worker, so that should be specified.

app.whenReady().then( async () => {
  session.defaultSession.registerPreloadScript({
    type: 'service-worker',
    id: 'worker-preload',
    filePath: path.join(__dirname, 'preload-sw.js'),
  });
  // Create window, etc.
}

Just like with the traditional Renderer process Preload script, we implement the communication API to the Main process using contextBridge and ipcRenderer. In this example, an API is implemented and exposed in the Service Worker that sends text information to the Main process under the identifier NOTIFY_TEXT.

const { contextBridge, ipcRenderer } = require('electron');

if (process.type == 'service-worker') {
  exposeApi();
}

function exposeApi() {
  const api = {
    notify: (text) => {
      ipcRenderer.invoke("NOTIFY_TEXT", text);
    },
  };

  contextBridge.exposeInMainWorld("myElectronApi", api);
}

The Service Worker calls an external REST API and sends the result using the myElectronApi defined in the Preload. This process is executed every 10 seconds^[2].

let lastStatus = null;

function checkStatus() {
  fetch('https://jsonplaceholder.typicode.com/todos/1') // Fake API for testing
    .then(res => res.json())
    .then(data => {
      if (data && data.title !== lastStatus) {
        lastStatus = data.title;
        myElectronApi.notify(data.title);
      }
    })
    .catch(err => console.error('[Service Worker] API error:', err));
}

checkStatus();
setInterval(checkStatus, 10000); // Check every 10 seconds

Unlike IPC requests from the Renderer process, IPC requests from the Service Worker cannot be handled using ipcMain. Instead, they must be processed using the handle method of the ipc property of the ServiceWorker class (IpcMainServiceWorker class). The handling is implemented using the session object's API within the same app.whenReady() context where the Service Worker Preload Scripts were registered.

app.whenReady().then( async () => {
  // ...
  session.defaultSession.serviceWorkers.on("running-status-changed", details => {
    if (details.runningStatus === "running") {
      const sw = session.defaultSession.serviceWorkers.getWorkerFromVersionID(details.versionId);
      if (!sw) return;
      sw.ipc.handle("NOTIFY_TEXT", (event, text) => {
        // Show a notification
        const notification = {
          title: 'Service Worker Notification',
          body: text,
        };
        new Notification(notification).show();
      });
    }
  }

  // Window creation process
}

Upon receiving the Service Worker lifecycle event running-status-changed, the runningStatus of the Service Worker is evaluated. If it is running, the ServiceWorker instance is retrieved using the getWorkerFromVersionID method, and the event is handled using ipc.handle. Here, the Notification API is used to display a desktop notification with the text sent via the IPC request.

  session.defaultSession.serviceWorkers.on(
    "console-message",
    (event, messageDetails) => {
      // Listen for console messages from the service worker
      console.log('Service Worker: %d console message: %s', messageDetails.versionId, messageDetails.message);
    }
  )

So far, we have achieved communication from the Service Worker to the Main process, but we haven’t yet implemented invoking the Service Worker from the UI (Renderer process).

We add a button in the UI to invoke the Service Worker.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <!-- Add a button -->
    <p>
      <button id="service-worker">Call Service Worker</button>
    </p>
    <script src="./renderer.js"></script>
  </body>
</html>

By using the standard Web API ServiceWorkerContainer, the Renderer process can send messages to the Service Worker. An EventListener is added to the button to implement the Service Worker call.

document.querySelector("#service-worker").addEventListener("click", () => {
  navigator.serviceWorker.getRegistration().then((registration) => {
    if (registration) {
      registration.active.postMessage("Hello from the renderer process!");
    } else {
      console.error("No active service worker found.");
    }
  });
});

Finally, in the Service Worker, a listener is registered and using the myElectronApi defined in the Preload, the process of sending a message to the Main process is added.

// Omitted

globalThis.addEventListener('message', (event) => {
  myElectronApi.notify(event.data);
});

I ran the application we built—with DevTools visible—to see it in action.

Both the periodic events and the button-click events triggered notifications, and a desktop Notification was displayed.

In conclusion, I explored the Service Worker Preload Scripts introduced in Electron 35.0.0. I look forward to further official information, and if I discover any valuable use cases, I plan to write another article.