Javascript Service Worker - 如何在浏览器关闭时触发事件答案

【问题标题】：Javascript Service Worker - How to fire an event when the browser is closedJavascript Service Worker - 如何在浏览器关闭时触发事件
【发布时间】：2017-12-02 06:57:36
【问题描述】：

我目前正在尝试使用 Service Worker，尤其是 chrome 中的推送通知。问题只是我不知道如何启动它。

以下：在我的 index.html 中，我首先请求通知权限。如果授予权限，我将注册我的服务人员。当服务人员准备好时，我正在使用 promise 来获取解析函数，并将注册作为第一个参数。然后我要显示通知

代码如下：

<script>
navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
            registration.showNotification('Notification with ServiceWorker', {
                "body": "Test",
                "vibrate": [200, 100, 200, 100, 200, 100, 400]
            });
        });
    }
});
</script>

现在我不知道如何启动 sw.js

当我注册一个事件时，我需要一些能够触发我的事件的东西。当我关闭浏览器时，我无法触发事件。

对于我的问题：我有一个 JSON 文件。是否可以在该文件上设置事件并在文件更改时触发事件？

【问题讨论】：

您需要实现一个具有适当push 事件处理程序的服务工作者，并且您需要将其注册为推送消息服务的客户端。 developers.google.com/web/fundamentals/getting-started/codelabs/… 有一些基础知识，firebase.google.com/docs/cloud-messaging/js/client 有使用 Firebase 云消息服务作为后端的实现的详细信息。

标签： javascript google-chrome push-notification service-worker

【解决方案1】：

要开始使用 service worker，您需要在 index html 中对其进行初始化。像这样的

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js', {scope: './'}).then((registration) => {
        console.log('sw registered');
    }).catch(function(error) {
        console.log('registration failed');
    });
}

这会将service-worker.js 注册为您的服务人员。更多详情here.

接下来，您将不得不收听push 之类的事件

self.addEventListener('push', ()=>{
    // listen to push notifications here
});

出于测试目的，您可以使用 chrome 开发工具

您可以单击上图中的“推送”链接来模拟推送通知。但是，要在浏览器关闭时测试案例，您需要设置一个有效的推送通知系统，以便在浏览器关闭时将通知发送给服务人员。

【讨论】：