記録

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

ブラウザのプッシュ通知が簡単にできちゃう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

ではでは?健闘を祈る?







    地元(高知県)の話でごめんなさいradiko.jp(ラジコ)前のページ

    倹者{ケンジャ}の流儀というYOUTUBER次のページ

    関連記事

    1. 記録

      OMOINOHOKA:思いのほか。

      思いのほか、体重増加しているようでして・・。自己最高の66Kgあるこ…

    2. 記録

      GCPでメール代行するならmailgunだと思います。

      GCPでメール代行するならmailgunだと思います。GCPではポ…

    3. 記録

      映画ジョンウィック:チャプター2の短文感想。 #映画感想

      映画、ジョンウィックチャプター2を観てきましたので感想を残しときます…

    4. 記録

      Divination or AI

      Hand divinationFortune telling is…

    5. 記録

      強烈な歌詞、平井堅の「ノンフィクション」。

      強烈な歌詞、平井堅の「ノンフィクション」。ドラマの主題歌になってい…

    6. 記録

      7日間で人生を変える旅を読んでみて(`・ω・´)

      7日間で人生を変える旅を読んでみて、自分も旅に行きたいという気持ちに…

    2020年3月
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  

    カテゴリー

    アーカイブ

    PAGE TOP