如果我的网站被聚焦并被带到前台，我如何隐藏我的网站正在显示的通知？

Question

上下文：我正在构建一个渐进式 Web 应用程序，它通过 Service Worker 向我的用户发送推送通知。

有没有办法确保如果用户浏览我的网站，而通知当前显示通知是隐藏的？

我想避免他们导航到我的网站并且通知仍在显示，现在过时的情况。

Answer 1

是的，您可以从文档中清除所有当前显示的通知，如下所示：

// From a document.
navigator.serviceWorker.ready.then(registration => {
    registration.getNotifications().then(notifications =>
        notifications.forEach(notification => notification.close()));
});

您可以选择在每次加载页面时简单地运行此代码来解决您的问题，或者您可以另外向运行此代码的文档添加一个 focus 事件侦听器，以确保每次加载您的网站时都应用它成为焦点。