PWA服务工作者通知点击

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);
}

我添加了事件监听器，但它从未触发。

我做错了什么？

- marco burrometo

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");
});

- NOtherDev

---

谢谢！你救了我一命 :) 只是文档中缺少放置位置的说明。 - marco burrometo

另外还有两个问题：现在通知并不像本机android通知一样运行，我可以在顶部栏中看到图标，但是当通知被切换时（reg.showNotification...），通知并不会出现。我遇到的另一个问题是，通过clients.openWindow(...)引用Youtube时，它总是在Chrome中打开，而不是启动应用程序，但href则可以启动它。你是否遇到过这些问题？ - marco burrometo

我们如何在Angular中实现这个？ - dhamo dharan

如果我想在通知点击时打开动态链接怎么办？ - Ahmad

动态是什么意思？您可以始终在 notification.data 中发送有效负载，并以任何需要的方式在处理程序中使用它。 - NOtherDev

对于可能不理解或使用来自MDN这样的示例代码的任何人来说，notificationclick事件代码必须位于service worker的JS文件中。在MDN的情况下，它必须位于sw.js文件中。 - undefined

Answer 2

永远记得，在service-worker.js中添加代码(参考答案)后，重启浏览器以反映更改。我在进行更改时没有重新启动浏览器窗口，这让我感到沮丧！

- A W

---

如果您使用的是Chrome浏览器，您可以直接前往“开发者工具”->“应用程序”->“服务工作者”->“skipWaiting”，无需每次都重新启动整个浏览器。 - Yandros

Answer 3

为了补充解释，以下是 Google Web Fundamentals 对于在服务工作者文件中使用 self 的原因：

对于大多数新接触服务工作者的开发者来说，最奇怪的代码部分就是 self 变量。self 在 Web Workers 中经常被使用，而服务工作者也是一种 Web Worker。self 指的是全局作用域，有点像网页中的 window。但是对于 Web Workers 和服务工作者来说，self 指的是工作者本身。

reference

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

- Luis Febro