PWA
[PWA] PWAでWebサイトをアプリ化してみよう ～プッシュ通知編～
はち
更新日:2021/08/12
はちです。前回から1ヶ月ほど空いてしまいましたが、今回はPWAアプリで、通知を出す処理を実装していきます。
前回の記事：「PWA導入編」はこちらからどうぞ
トークンをブラウザから取得しておく
前回も記載しましたが、トークンはajaxでDB格納とかしてあげるのが1番良いと思います。
※先のDB処理を実装している場合は省略してください。
通知テストしてみる
先程メモしておいたサーバーキーとブラウザを通知許可した際に取得したトークンを使用します
※テストするのに1番早いのでcurlでjsonを直でぶん投げます。
適当なLinuxのサーバーにログインして
|
1 2 3 4 5 6 7 8 9 10 |
curl -X POST -H "Authorization: key=サーバーキー" -H "Content-Type: application/json" -d '{ "notification": { "title": "テストだよーん", "body": "テストでーす" }, "data":{ "url": "http://" }, "to": "取得したトークン" }' "https://fcm.googleapis.com/fcm/send" |
to取得トークンで送る場合は1回の送信で最大1000件まで送れるそうです。
1000件以上の場合は、別処理でもう1度投げるか、トピック機能を使うと良さそうです。
通知処理をPHPで実装する
要はcurlでキックできればいいので、PHPでキックする処理を適当に作っていきます。
開発言語は正直なんでも良いです。Pythonのほうが早ければPythonでもいいかと。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//初期設定 $api_key = "サーバーキー"; $url = "https://fcm.googleapis.com/fcm/send"; $header = array("Content-Type:application/json","Authorization:key=".$api_key); $title = "タイトル"; $body = "本文"; $click_url = "通知を押したら遷移するページのURL"; //通知データの作成 $arr_json["notification"] = array("title"=> $title,"body" => $body); $arr_json["data"] = array("url"=> $click_url); //CURLをキックします $handle = curl_init(); curl_setopt($handle, CURLOPT_URL, $url); curl_setopt($handle, CURLOPT_POST, true); curl_setopt($handle, CURLOPT_HTTPHEADER, $header); curl_setopt($handle, CURLOPT_RETURNTRANSFER, true); curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($handle, CURLOPT_POSTFIELDS, json_encode($arr_notification_json)); $result = curl_exec($handle); curl_close($handle); |
PHPの処理はかなり雑ですが、メイン処理をした後にこいつでcurlをキックすると、端末にプッシュ通知が届きます。
思った以上に簡単だと思いませんか？（ちなみに前回も書きましたがiOSではプッシュ通知はまだ受け取れません(´・ω・`)）
次回はPWAで何かテクニックがあれば書いていこうと思います:)
