web-push - サイトがフォーカスされて最前面に表示されている場合、サイトが表示している通知を非表示にするにはどうすればよいですか?

Question

コンテキスト: Service Worker でユーザーにプッシュ通知を送信するプログレッシブ Web アプリを構築しています。

通知が現在表示されているときにユーザーが自分のサイトを閲覧した場合、通知が非表示になっていることを確認する方法はありますか?

彼らが私のサイトに移動したのに、通知が表示されたままになっているという状況を避けたいです。

Answer 1

はい、ドキュメントから、現在表示されているすべての通知を次のようにクリアできます。

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

問題を解決するために、ページが読み込まれるたびにこのコードを単純に実行するか、このコードを実行するドキュメントにイベント リスナーを追加してfocus、サイトがフォーカスされるたびに確実に適用されるようにすることができます。