@Blog{zip358.com}

検索する

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

ではでは?健闘を祈る?

タグ

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

bitbucket(ビットバケット)というウェブサービスがある。

2016.02.17

Logging

bitbucketというウェブサービスがある。
どんなサービスかというとソフトウェアやウェブアプリの開発を
プロジェクトで開発行うときに開発がスムーズに進むために
使うホスティングサービスです。
簡単にいえばGitHUBの非公開が
無料で出来ちゃうサービスです。
共同で開発をする中で
コードの差異が簡単にわかるので
開発がスムーズに進みます。
という事などの勉強会に参加しました。
ちなみにあまり使った事がないです。
 

タグ

B00Y2FKN9C, bitbucket, github, ウェブアプリ, ウェブサービス, コード, ソフトウェア, ビットバケット, プロジェクト, ホスティング, 共同, 勉強会, 基本, 差異, 開発, 開発行うとき, 非公開,