An example using Service Worker?

[alastaircoote]

When I saw this I assumed I could slot a service worker in the same place a web worker was being used in the example, but service workers don't have self.postMessage, so it doesn't work. I've got it working now by hooking up the proxy through a MessagePort in a message event - is that the best way to do it?

Either way, it would be great to have an example showing the best practise for this.

[surma]

You are right, a ServiceWorker doesn’t have self.postMessage at there might be potentially multiple open windows. So yeah, sending a MessagePort is one good solution. Another option would be to get the actual window object using self.clients.get() or self.clients.matchAll().

It’s probably a good idea for me to write an example for this.

Hope this helps.

[surma]

I am curious, tho. What is your current use-case with Comlink + ServiceWorker? What are you exposing?

[alastaircoote]

I'm using Notification APIs that are only available in a SW (as far as I know), as well as checking progress of caching events. I know it's not a core use of Comlink but I've found it useful so far!

[surma]

You can use Notification API without SW :)

Progress of caching is definitely an interesting use case.

[alastaircoote]

AFAIK you can show a notification, but can't for example call getNotifications():

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/getNotifications

Would love to be wrong though :)

[surma]

That’s correct. I thought you just wanted to show notifications

[gruns]

+1 for a canonical, best-practice example of establishing an RPC connection with a ServiceWorker.

[jeffposnick]

I'm trying to follow the recommendation in #27 (comment):

Another option would be to get the actual window object using self.clients.get() or self.clients.matchAll().

While the WindowClient interface has a postMessage() method, it doesn't have addEventListener() or removeEventListener(), so trying to do something like:

class RunInSW {
  // ...
}

self.addEventListener('message', async (event) => {
  if (event.data === 'init-comlink') {
    const clients = await self.clients.matchAll();
    for (const client of clients) {
      Comlink.expose(RunInSW, client);
    }
  }
});

leads to

Error: endpoint does not have all of addEventListener, removeEventListener and postMessage defined

[jeffposnick]

Here's what I've come up with so far, which seems to work:

In the window context:

function initComlink() {
  const channel = new MessageChannel();
  navigator.serviceWorker.controller.postMessage(channel.port2, [channel.port2]);
  window._runInSW = Comlink.proxy(channel.port1);
  channel.port1.start();
}

if (navigator.serviceWorker.controller) {
  initComlink();
}
navigator.serviceWorker.addEventListener('controllerchange', initComlink);

In the SW context:

self.addEventListener('message', (event) => {
  if (event.data instanceof MessagePort) {
    Comlink.expose(api, event.data);
    event.data.start();
  }
});

[surma]

I think I like your solution better. I’ll adjust my PR :)