- ホーム
-
記録
- ブラウザのプッシュ通知が簡単にできちゃうFirebase
ブラウザのプッシュ通知が簡単にできちゃうFirebase
ブラウザのプッシュ通知が簡単にできちゃうFirebaseのでやり方を簡略的に記載します。
- Firebaseにプロジェクトを作成する(グーグルのアカウントが必要)。
- firebase cliというパッケージソフトをOSにダウンロードしそのソフトを任意のフォルダの中に移動させて起動させる。Node.jsはインストール済みとする(※手順)。
- 試しにホスティングしてみる。ホスティングはプロジェクトの左側の項目よりホスティングをクリックすると手順の説明通り行うと出来ます。
- URLより確認し表示されているか確認する。
- Cloud Messagingの設定よりFCM でウェブ認証情報を設定するからメッセージング オブジェクトを取得するまでをブラウザで操作し設定を行う。
- ローカルに下記のURLよりファイルをダウンロードする。ダウンロードするファイルはfirebase-messaging-sw.js, firebase-logo.png, index.html, main.cssになります。動かない場合は再設定が必要。
https://github.com/firebase/quickstart-js/tree/f76b14ca00cca48dbfca5c787c0a4ca73eb9857d/messaging - ダウンロードしたファイルはpublicか自分が決めたフォルダに入れる。
- index.htmlソースの中に ‘<YOUR_PUBLIC_VAPID_KEY_HERE>’ と記載している部分があるので変更する。
- firebase cli より『 firebase deploy』する。
- ページを再読み込みして通知を許可する。
- Cloud Messagingから送信してみる。
- 通知が届くことを確認する。
※今回はブラウザのプッシュ通知なのでアプリを追加する際はWEB(</>)を選んでください。
Introducing Firebase Cloud Messaging
ではでは?健闘を祈る?
- 投稿者: @toshiaki_taoka
- 記録
- cli, Cloud, FCM, Firebase, firebase-logo, firebase-messaging-sw, index, JS, Messaging, node, OS, png, url, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, 中, 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目
関連記事
-
記録
思いのほか、体重増加しているようでして・・。自己最高の66Kgあるこ…
-
記録
GCPでメール代行するならmailgunだと思います。GCPではポ…
-
記録
映画、ジョンウィックチャプター2を観てきましたので感想を残しときます…
-
記録
Hand divinationFortune telling is…
-
記録
強烈な歌詞、平井堅の「ノンフィクション」。ドラマの主題歌になってい…
-
記録
7日間で人生を変える旅を読んでみて、自分も旅に行きたいという気持ちに…
アーカイブ