SPAにPush通知を実装することになったので備忘録。Hostingで構築するところまでを記載します。Firebaseの説明はありません。Hostingを使ってサイトを作る準備をします。Firebaseのプロジェクトを作成するFirebaseのアカウントを持ってないならば作りましょう。firebase.google.comプロジェクトを作ります。Toolsのインストールgithub.comFirebaseをコマンドで扱うためのツールです。Hostingを使う時に使用します。firebase-toolsインストールが完了したらログインします。loginブラウザが開きますので連携を許可しましょう。適当に今回プロジェクトを作成するディレクトリを作成します。initFirebaseのどのサービスの初期化か聞かれますので一番したのHostingを選びましょうすると、プロジェクトの選択があるので、最初に作ったプロジェクトを選択します。下記の2つのファイルが作成されます。.firebasercfirebase.jsonfirebase.jsonは空のJSONオブジェクトしか入ってないと思います。リファレンスではアプリを初期化する際、公開ルートとして使用するディレクトリについて確認を求められます(デフォルトは「public」)。ファイルがない場合、自動的にファイルが作成されます。ありますが、私の環境(バージョン?)では聞かれなかったので手動で公開ルートを設定します。publicにしましょう。}}あとはpublicフォルダを作ってindex.htmlを仕込んでデプロイします。ちなみに、デプロイ前の確認としてローカルサーバを建てる機能もあります。URLをブラウザで開くとちゃんとデプロイされてるのが確認出来ます。FCMの設定ブラウザからプロジェクトを開くとウェブアプリにFirebaseを追加というボタンがあるのでクリックすると設定のスクリプトが書いてあるのでそれをコピペしてindex.htmlに貼り付けましょう。通知の許可を取るまではローカルサーバでも大丈夫です。</script></body></html>これでプロジェクトの初期設定が完了です。ServiceWorkerの作成firebase-messaging-sw.jsFCMはルートディレクトリにあるfirebase-messaging-sw.jsというファイルをServiceWorkerに読み込ませます。このファイルをpublic以下に作成して中身を以下にします。firebase.messaging();manifest.jsonmanifest.jsonもpublic以下に作成します。Developersとりあえず今回は中身を以下にします。"103953800507"}gcm_sender_idは固定値で、全ての環境で同じ値を使います。通知の許可を取る次にユーザに通知を受け取るかどうかの許可を取ります。console.log(e));これで実行すると通知の許可を取るダイアログが表示されます。InstanceIDトークンの取得InstanceIDとはFirebaseのプロジェクトごとにユーザに割り当てられるIDのことです(多分)それを元にしたトークンを使って個人ユーザにメッセージを送信することができます。console.log(e));Push通知はサーバから送ると思うのでこの時点でtokenをサーバに送りましょう。メッセージの受信設定フォアグラウンド通知(サイトを開いている状態)を受け取るためには以下の方法で受け取れます。console.log(e));Push通知を送ってみるではPush通知を送ってみましょう。送るのに必要なのはFirebaseプロジェクトのサーバーキーとInstanceIDトークンです。通知のアイコンに設定したい画像のパス}の形式にしておくと上記のスクリーンショットのように勝手に設定されます。これでPush通知の基本的な実装は終わりです。Topicsの購読Firebaseには複数のユーザに同時にPushを送るTopicsという機能があります。PROJECT_SERVER_KEYを用いてリクエストを送る必要ことで購読することが出来ます。}),まとめ纏まってない。Messagingを使ってWebサイトでPush通知を受け取るTweet広告を非表示にする関連記事2017-12-06KotlinJSを動かす先日Kotlin1.2がリリースされました。ExpoについてLTしてきました月別アーカイブはてなブログをはじめよう!saburesanさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。