在 PWA 服务工作者中监听按钮点击

Question

我正在尝试遵循以下 PWA 推送通知示例，但对服务人员有一个一般性问题

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

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

我的 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() 需要包含一个点击事件的监听器，以便用户可以订阅/取消订阅

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

但是 pushButton 变量没有定义。

如何在 Service Worker JS 文件中向 DOM 上的元素添加侦听器事件？

Answer 1

Service Worker 不能直接监听 DOM，也不能直接与 DOM 交互。所有 DOM 活动（如点击）都需要发送给 Service WorkerspostMessage()

应用程序：

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

服务人员：

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