PWA Service Worker 通知点击答案

【问题标题】：PWA Service worker notification clickPWA Service Worker 通知点击
【发布时间】：2018-01-31 16:48:44
【问题描述】：

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

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

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

我做错了什么？

【问题讨论】：

标签： javascript notifications progressive-web-apps

【解决方案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");
});

【讨论】：

谢谢！！！你救了我:) 把它放在哪里是文档中缺少的东西:(
两个更快速的问题：现在通知的行为不像原生 android 通知，我在顶部栏中看到图标，但是当切换通知时（reg.showNotification...）通知没有出现。我遇到的另一个问题是，clients.openWindow(...) 引用 youtube 总是在 chrome 中打开它并且不启动应用程序，但是 href 打开它。你遇到过这样的问题吗？
我们如何在 Angular 中做到这一点？
如果我想在点击通知时打开动态链接怎么办？
动态是什么意思？您始终可以在 notification.data 中发送有效负载，并以您需要的任何方式在处理程序中使用它。

【解决方案2】：

永远记住，在 service-worker.js 添加代码 (refer answer ) 后，重新启动浏览器以反映更改。我在进行更改并没有重新启动浏览器窗口，这让我很沮丧！

【讨论】：

如果你使用 Chrome，你可以去开发者工具 -> 应用程序 -> 服务工作者 -> skipWaiting。无需每次都重启整个浏览器。

【解决方案3】：

仅作为补充说明，以下是根据 Google Web Fundamentals 在 Service Worker 文件中使用 self 的原因：

对于大多数新开发人员来说，这段代码最奇怪的地方服务工作者是自变量。 web中常用的self 工人，即服务工人。 self 指的是全局范围，有点像网页中的窗口。但是对于网络工作者和服务 workers，self 指的是worker本身。

reference

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

【讨论】：