在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交互。 需要使用postMessage()将所有DOM活动（如点击）发送给Service Workers

应用程序：

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

服务人员：

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