Webプッシュを送るためにはユーザから許諾を得る必要があります。 よくWebサイトで下図のようなポップアップを見ると思いますが、これを許可することでWebプッシュ通知が送れるようになります。

通知許可ダイアログ

通知許可ダイアログを出す方法

FCMの場合はgetTokenを呼び出したタイミングで、許可またはブロックをまだ行っていない場合は通知許諾のダイアログが表示されます。

標準的な方法で実装する場合はNotification.requestPermission()を呼び出すことでダイアログが表示されます。

Notification.requestPermission().then(function (result) {
  if (result === 'granted') {
    console.debug("許可されています");
  } else if (result === 'denied') {
    console.debug("拒否されています");
    alert("設定から通知許可できるよ");
  } else if (result === 'default') {
    console.debug("defaultです");
  }
});

一度ブロックされると表示できない

通知許可のダイアログで「拒否」を押した場合、再度ダイアログを出したり通知を送ることができなくなるため注意が必要です。

一度拒否された場合はアプリからは何もできず、通知するためにはユーザにブラウザの設定からサイトの通知を許可に切り替えてもらう必要があります。 （拒否されていることの検知はできる）

標準の通知許可ダイアログを出す前に独自のダイアログを出すことが推奨されている

通知許可のダイアログはメッセージも固定のため、いきなりこれを表示すると拒否される可能性が高くなります。

そのため、まずは独自にWebプッシュで何を送るかなど説明を出した上で通知許可のダイアログを出すことが推奨されます。 独自のダイアログ上でのキャンセルであれば、再度表示することも可能です。

独自ダイアログを事前に表示

ということで、Webプッシュの許可の取り方と、許可を取る際の注意点を紹介しました。一度拒否されてしまうと通知はもう届かないため、ユーザが受け取りたいというタイミングで許可を取るようにしましょう。