PWA服务工作者通知单击

时间:2018-01-31 16:48:45

标签: javascript notifications progressive-web-apps

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

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

我添加了eventlistener,但它永远不会被解雇。

我做错了什么?

3 个答案:

答案 0 :(得分:6)

处理基于Service Worker的通知点击的正确位置在Service Worker中。您需要将监听器(带有self.addEventListener('notificationclick', ...)的部分)移动到您的服务工作者代码。

请注意,您没有window访问权限。要导航到该网址,您需要改为使用clients.openWindow

因此,您的应用程序端代码只会进行reg.showNotification调用,而Service Worker中的处理程序将如下所示:

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

答案 1 :(得分:2)

始终记住,在service-worker.js中添加代码(refer answer)后,重新启动浏览器以反映所做的更改。我正在进行更改,而不是重新启动浏览器窗口,这让我感到沮丧!

答案 2 :(得分:0)

仅作为补充说明,以下是根据 Google Web Fundamentals 在服务工作者文件中使用 self 的原因:

<块引用>

对于大多数不熟悉的开发人员来说,这段代码中最奇怪的一点 service workers 是 self 变量。 self 常用在 Web 中 工人,即服务工人。 self 指的是全局范围, 有点像网页中的窗口。但对于网络工作者和服务 worker,self 指的是 worker 本身。

reference

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