javascript - 在 PWA service worker 中监听按钮点击

Question

我正在尝试按照以下 PWA 推送通知示例进行操作，但有一个关于服务 worker 的一般性问题

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

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

我的 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 Workers 不能直接监听 DOM 或与 DOM 交互。所有 DOM 事件(如点击)都需要使用 postMessage()

发送给 Service Workers

应用:

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

服务 worker :

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