PWA対応 WebサイトのPUSH通知

PWA対応 WebサイトのPUSH通知を試します。

アプリのPUSH通知のようにWEBだけでもPUSH通知は可能です。

しかし今はiosが対応していないためPCとandroidのみとなります。

PWAの基本的なところは前回の「PWA対応 Webサイトのアイコンをホーム画面に追加」を参照してください。

①プロジェクトの作成

ここで新しいプロジェクトを作成

https://console.developers.google.com

②CloudMessagingの設定

コンソール内でCloudMessagingを検索し選択

認証情報も作成

③index.htmlの変更

registration.pushManagerを追記する

 

④manifest.jsonの変更

“gcm_sender_id”: “xxxxxx”,
“gcm_user_visible_only”: true

の部分を追記

xxxxxxはプロジェクトIDの値を使用します。

 

⑤serviceWorker.jsの変更

 

⑥確認

https://idealive-t-pj2.tk/index.htmlのページを開くと許可を求めてきます。

許可を行うとコンソールにエンドポイントの値が取得されています。

※実際はこの値をサーバに送り、DB等に保持しておく必要があります。

 

curl –header “Authorization: key=apiキー” –header Content-Type:”application/json” https://fcm.googleapis.com/fcm/send -d “{\”registration_ids\”:[\”エンドポイントの値\”]}”

上記送信でプッシュできるはずなのですが、メッセージがきませんでした・・・

調べてみると今はCloudMessageではなく、Firebaseで行うのが正解のようです。

 

⑥Firebase設定

https://console.firebase.google.com/に接続

プロジェクトの追加を行うとCloudMessegeで使用したプロジェクトがそのまま選択できる状態になっていました。

キーの値を確認

再度送信

curl –header “Authorization: key=apiキー” –header Content-Type:”application/json” https://fcm.googleapis.com/fcm/send -d “{\”registration_ids\”:[\”エンドポイントの値\”]}”

PCの右下あたりにプッシュでました。

 

少しひっかかりましたが、なんとかプッシュできました。

以上です。

“PWA対応 WebサイトのPUSH通知” への 0 件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です