ブラウザへのプッシュ通知メモ

# はじめに

これはプッシュ通知について私的なメモレベルです。

# ブラウザについて

## httpsでないと動作しない

開発環境も自己署名のHTTPS環境なので検証ができてないけど、httpsじゃないと表示されないらしい。

https://developer.mozilla.org/ja/docs/Web/API/Notification/requestPermission

![2020-12-17_09h30_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/4aa4d528-6549-449e-1ecd-c8d9892d64ca.png)


ローカルで開発する場合は、自己証明書を作成する必要があります。
以下を参考にして作成してください。

* https://qiita.com/t-kuni/items/d3d72f429273cf0ee31e
* https://stackoverflow.com/questions/43665243/invalid-self-signed-ssl-cert-subject-alternative-name-missing

Chromeにルート証明書をインポートする場合ですが、インポート後に、一度Chromeを再起動した方が良さそうです。再起動しないと、証明書のエラーが消えませんでしたので、インポートだけだと反映されないように思いました。

## chrome

開発する場合は、通常モードで行ってください。

Chromeの`プライベートブラウジング`では、プッシュつ通知の許可を得るためのNotification.requestPermissionは、`必ずdeny`が返ってくる。

Chromeはプッシュ通知を許可するサイトを記録しています。プライベートブラウジングの目的上、プッシュ通知を受けるということはしないようです。

これに気づかなくて、時間を無駄にしました。。。。

![2020-12-17_09h33_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/bc4a31ec-d56d-9c4f-affd-5b86495239ca.png)



また、一度、プッシュ通知を許可すると、許可が永続されるため、許可登録のテストする場合は、その都度、登録情報の削除が必要となります。


## firefox

Notification.requestPermissionは、Chromeではリクエストするタイミングに制限はないのですが、firefoxはユーザ起点(例えばボタンクリックなど）でないと動作しないようになっているようです。

https://developer.mozilla.org/ja/docs/Web/API/Notification/requestPermission

![2020-12-17_09h35_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/cb9cdbd9-2b60-99ee-e99f-3aaae0b02046.png)

chromeの場合は、コンテンツを読み込んで自動的に実行されるJS内で、`Notification.requestPermission()`を実行した時に表示されたプッシュ通知の確認ダイアログが、firefoxでは`表示されません`。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/eb278f7a-40d4-02ae-1aeb-3a34ce9437cf.png)

開発者ツールで確認すると、

**通知の許可設定はユーザー生成の短期的なイベントハンドラー内部からしか要求されません**

とエラーが表示さます。

ボタンのクリックでイベントで実行すると確認ダイアログが表示されます。
![2020-12-17_09h41_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/28dfabba-b3bd-f610-556e-60936e054d00.png)


# chromeのプッシュ通知の解除

URL欄に[chrome://settings/content/notifications](chrome://settings/content/notifications)を入力すると通知設定画面を表示します。

以下のようにメニューをたどってもいけます。

右上隅の○が縦3つ並んでいるアイコンをクリックするとメニューが表示されます。そのメニューの下の方の`設定`をクリックします。
![2020-12-17_09h12_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/1825c7d8-7580-694a-3c95-66d5936d0044.png)

設定画面が表示されたら、左サイドメニューの`プライバシーとセキュリティ`をクリックして、中央に表示されている`サイトの設定`をクリックします。
![2020-12-17_09h07_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/673fdbb6-7b99-0bc3-1efd-2a0e1e94db39.png)

`通知メニュー`で、許可サイト、ブロックサイトが表示されますので、該当するURLを削除します。
中央のメニューの内容が入れ替わり、下の方へスクロールすると、`通知`がでてきます。こちらをクリックします。
![2020-12-17_09h07_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/9b11fa1c-3ad5-77e8-63e3-7c1d068b2ef5.png)

![2020-12-17_09h08_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/94d6f7e7-1664-5dd1-8b9b-af8b698e143d.png)

# firefoxのプッシュ通知の解除

URL欄に[about:preferences#privacy](about:preferences#privacy)を入力すると多少、ショートカットができます。
以下のようにメニューからたどってもできます。

右上隅の3本バーのアイコンをクリックします。表示されるメニューのオプションをクリックします。
![2020-12-17_09h43_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/5d5669a0-e8fb-401d-c125-e98493902849.png)


左サイドメニューの`プライバシーとセキュリティ`をクリックします。
![2020-12-17_09h46_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/8a4dbd1c-907e-25c8-951d-9948205115e6.png)

中央の表示が変更されます。下の方にスクロールしていきます。
![2020-12-17_09h46_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/96271715-360a-484d-f726-d27a6156c590.png)

`許可設定`の項目に`通知`がでてきますので、ここの`設定`をクリックします。
![2020-12-17_09h46_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/3e85917f-bccc-d155-5e4d-6528bfc1eba1.png)

ダイアログがポップアップして、プッシュ通知の許可済みのサイトが表示されます。ここでウェブサイトを選択して削除したり、ブロックしたりすることができます。
![2020-12-17_09h47_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133291/ea81d2fb-5f2c-84c0-151d-86eaf2fb955c.png)


# 参考URL

* [FCMからWeb Pushを受信する](https://qiita.com/nishi-sankosc/items/38eaa16e8732f04b17ac)