在 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 活动（如点击）都需要通过 postMessage() 发送给 Service Worker

应用：

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

服务工作者：

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