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

Question

背景：我正在构建一个渐进式 Web 应用程序，向我的用户发送带有 service worker 的推送通知。

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

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

Answer 1

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

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

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