プッシュ通知 service workerについて

###前提・実現したいこと
プッシュ通知のservice workerについて質問があります。
行いたい作業としては、ブラウザで通知を許可したら、
通知が一回飛んでくる状態にしたいです。

###該当のソースコード

JavaScript
1self.addEventListener('fetch', function(e) {
2  if ('permissions' in navigator) {
3    navigator.permissions.query({
4      name: 'notifications'
5    }).then(function(notificationPerm) {
6      notificationPerm.onchange = function() {
7        // /*通知作成して表示 */
8        let title = 'Title';
9        let body = 'body';
10        let icon = '//image.excite.co.jp/jp/woman/sp/common/apple-touch-icon.png';
11        // let tag = 'simple-push-demo-notification-tag';
12        let tag = ' ';
13
14        self.registration.showNotification(title, {
15          body: body,
16          icon: icon,
17          tag: tag
18        })
19
20      }
21    });
22  }
23});
24

###試したこと
記載しているコードで問題なく設定出来ているのですが、
let tag = ' ';

self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})

この部分の let tag = ' ';
こちらを指定しないと何故か連続して通知が行われてしまいます。
中身が空だと同じように連続して通知がきます。
ですが、文字や数字が1文字でも入っていれば一回だけ
通知が来て終了するので望んでいる結果になります。

この場合のtagを設定しないと連続して通知が来てしまう理由が知りたいです。
どなたかご教示いただけれると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

fetchイベントのリスナで処理するという内容のコードですので、Service Worker側のコードと推察します。

まず、fetchイベントですが、これは、Service Workerでコントロールされるスコープ内のwebページ(Service Workerのスクリプトと同じ、あるいは、それ以下のディレクトリにあるページ)で、画像やスクリプト等の何らかのリソースをHTTP(S)で取得する際に、プロキシのように間に入る形で発生するものです。

従いまして、そのページを読み込んだ時や、同じディレクトリ内の他のページを読み込んだ時に、画像やスクリプト、スタイルシート等を読み込む度にService Workerが呼ばれてfetchイベントが発生しますので、その結果、連続してリスナが呼ばれてNotificationが表示されることになってしまいます。

一方、tagを設定している場合は、同じtagのNotificationを上書きしますので、見た目には通知が一度だけ来ているようになります。(実際にはfetchイベントが発生する度にNotificationの上書きが発生します。)

なお、WebPushやFCM等を使ってプッシュ通知を実行している場合、Service Worker側でプッシュ通知受信時に発生するイベントはpushとなります。

参考: https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/?hl=ja#_15

js
1self.addEventListener('push', function(event) {
2  let title = 'Title';
3  let body = 'body';
4  let icon = '//image.excite.co.jp/jp/woman/sp/common/apple-touch-icon.png';
5
6  event.waitUntil(self.registration.showNotification(title, {
7    body: body,
8    icon: icon
9  }));
10});