服务工作者 - 等待client.openWindow在postMessage之前完成

Posted 2021-04-07

我正在使用服务工作者来处理后台通知。当我收到消息时，我正在使用Notification创建一个新的self.registration.showNotification(title, { icon, body })。我正在使用self.addEventListener('notificationclick', ()=>{})观看通知上的点击事件。点击我正在检查是否有任何WindowClient是打开的，如果是，我正在获取其中一个窗口客户端并在其上调用postMessage将通知中的数据发送到应用程序以允许应用程序处理通知。如果没有打开的窗口我正在调用openWindow，一旦完成，我将使用postMessage将数据发送到该窗口。

event.waitUntil(
    clients.matchAll({ type: 'window' }).then((windows) => {
        if (windows.length > 0) {
            const window = windows[0];
            window.postMessage(_data);
            window.focus();
            return;
        }
        return clients.openWindow(this.origin).then((window) => {
            window.postMessage(_data);
            return;
        });
    })
);

我面临的问题是postMessage内部的openWindow呼叫从未被传递。我猜这是因为postMessage调用WindowClient发生在页面加载完成之前，所以eventListener没有注册来侦听该消息呢？是对的吗？

如何从服务工作者和postMessage打开一个新窗口到该新窗口。

答案

clients.openWindow(event.data.url).then(function(windowClient) {
        // do something with the windowClient.
      });

另一答案

我遇到了同样的问题。我的错误是我在窗口上注册了事件处理程序。但它应该在服务工作者上注册，如下所示：

// next line doesn't work
window.addEventListener("message", event => { /* handler */ });

// this one works
navigator.serviceWorker.addEventListener('message', event => { /* handler */ });

请参阅以下页面中的示例： https://developer.mozilla.org/en-US/docs/Web/API/Clients https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage

UPD：澄清一下，这段代码进入了刚打开的窗口。签入Chromium v​​.66。