在PWA服务工作者中单击按钮单击

Question

我正在尝试按照以下示例了解PWA推送通知，但对服务工作者有一般性问题

https://developers.google.com/web/fundamentals/codelabs/push-notifications/

在我的Service Worker中，我想为按钮/锚标记添加一个监听器

我的服务工作者初始化如下：

if ("serviceWorker" in navigator && "PushManager" in window) {
    navigator.serviceWorker
        .register("./scripts/my.serviceworker.js", { scope: "/" })
        .then(function (swReg) {
            console.log("Service Worker Registered: ", swReg);
            swRegistration = swReg;
            initializeUI();
        });
};

函数initializeUI（）需要包含click事件的监听器，以便用户可以订阅/取消订阅

function initializeUI() {
    var pushButton = document.querySelector(".pwa-pushbutton");
    pushButton.addEventListener("click", function () {
        console.log("Button pushed");
        if (isSubscribed) {
            // TODO: Unsubscribe user
        } else {
            subscribeUser();
        }
    });

但是没有定义pushButton变量。

如何在服务工作者JS文件中向DOM上的元素添加侦听器事件？

Answer 1

服务工作者无法直接收听或与DOM交互。所有DOM活动（如点击）都需要通过postMessage()

发送给服务工作者

应用：

function onClick(event => {
  navigator.serviceWorker.controller.postMessage({
    value1: 'hello',
    value2: 'there'
  });
})

服务工作者：

self.addEventListener('message', event => { 
  const val1 = event.data.value1,
        val2 = event.data.value2;
});