PWA Service Worker 通知单击

Question

我正在尝试显示通知并在单击时执行某些操作。

    try {
    navigator.serviceWorker.getRegistration()
        .then(reg => {
            reg.showNotification("Guarda il videoclip!", {
                body: "clicca qua!",
                icon: "images/she_is_fire.png",
                vibrate: [100, 50, 100],
                tag: 'sample',
                actions: [{ action: 'explore', title: 'Guarda', icon: 'images/she_is_fire.png' }],
            });
            self.addEventListener('notificationclick', function(event) {
                event.notification.close();
                window.open("https://youtu.be/PAvHeRGZ_lA");
            }, false);
        })
        .catch(err => alert('Service Worker registration error: ' + err));

} catch (err) {
    alert('Notification API error: ' + err);
}

我添加了事件监听器，但它永远不会被触发。

我做错了什么？

Answer 1

处理基于 Service Worker 的通知点击的正确位置是在 Service Worker 中。您需要将侦听器（带有

self.addEventListener('notificationclick', ...)

的部分）移至您的 Service Worker 代码。

请注意，您没有

window

访问权限。要导航到 URL，您需要使用

clients.openWindow

。

因此您的应用程序端代码将只有

reg.showNotification

调用，并且 Service Worker 中的处理程序将如下所示：

self.addEventListener('notificationclick', function (event) {
  event.notification.close();
  clients.openWindow("https://youtu.be/PAvHeRGZ_lA");
});

Answer 2

永远记住，在 service-worker.js 中添加代码（参考答案）后，重新启动浏览器以反映更改。我正在进行更改而不是重新启动浏览器窗口，这让我感到沮丧！

Answer 3

仅供补充说明，根据 Google Web 基础知识，以下是在 Service Worker 文件中使用

self

的原因：

对于大多数刚接触此代码的开发人员来说，这段代码中最奇怪的一点是 Service Workers 是 self 变量。 self 常用于 Web 工人，即服务人员。 self 指的是全局范围， 有点像网页中的窗口。但对于网络工作者和服务 工人，self指的是工人本身。

参考

我发布此解释是因为帮助我理解所有这些事件，包括点击。

Answer 4

如果您尝试使用 Visual Studio 生成的浏览器窗口在本地测试此功能，请尝试在不同的浏览器中打开它或部署它，它将起作用。

VS 有一些奇怪的故障，并且

localhost

没有触发此事件。

我花了2个小时调试这个。希望这可以为大家节省一些时间。