ブラウザのプッシュ通知が簡単にできちゃうFirebase

2020.03.20

Logging

ブラウザのプッシュ通知が簡単にできちゃうFirebaseのでやり方を簡略的に記載します。

  1. Firebaseにプロジェクトを作成する（グーグルのアカウントが必要）。
  2. firebase cliというパッケージソフトをOSにダウンロードしそのソフトを任意のフォルダの中に移動させて起動させる。Node.jsはインストール済みとする（※手順）。
  3. 試しにホスティングしてみる。ホスティングはプロジェクトの左側の項目よりホスティングをクリックすると手順の説明通り行うと出来ます。
  4. URLより確認し表示されているか確認する。
  5. Cloud Messagingの設定よりFCM でウェブ認証情報を設定するからメッセージング オブジェクトを取得するまでをブラウザで操作し設定を行う。
  6. ローカルに下記のURLよりファイルをダウンロードする。ダウンロードするファイルはfirebase-messaging-sw.js, firebase-logo.png, index.html, main.cssになります。動かない場合は再設定が必要。
    https://github.com/firebase/quickstart-js/tree/f76b14ca00cca48dbfca5c787c0a4ca73eb9857d/messaging
  7. ダウンロードしたファイルはpublicか自分が決めたフォルダに入れる。
  8. index.htmlソースの中に ‘<YOUR_PUBLIC_VAPID_KEY_HERE>’ と記載している部分があるので変更する。
  9. firebase cli より『 firebase deploy』する。
  10. ページを再読み込みして通知を許可する。
  11. Cloud Messagingから送信してみる。
  12. 通知が届くことを確認する。
    ※今回はブラウザのプッシュ通知なのでアプリを追加する際はWEB（</>）を選んでください。
Introducing Firebase Cloud Messaging

ではでは?健闘を祈る?

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2020年03月20 09:28日

タグ

cli, Cloud, FCM, Firebase, firebase-logo, firebase-messaging-sw, index, JS, Messaging, node, OS, png, url, アカウント, インストール, ウェブ, オブジェクト, グーグル, クリック, ソフト, ダウンロード, パッケージ, ファイル, フォルダ, プッシュ, ブラウザ, プロジェクト, ホスティング, メッセージング, やり方, ローカル, 下記, 中, 任意, 作成, 取得, 左側, 必要, 情報, 手順, 操作, 確認, 移動, 簡単, 簡略, 表示, 記載, 設定, 認証, 説明, 起動, 通知, 項目,