Posted at

さくっとブラウザにPUSH通知

More than 1 year has passed since last update.

Firebase Cloud Messagingというサービスを利用することでブラウザに対して簡単にPUSH通知を送ることができます。

(ブラウザの種類は限定されますが)

動作確認という意味で、さくっとPUSH通知できるところまでやってみたいと思います。

ここではGoogle Chrome上で動作確認しています。


手順


  1. FirebaseにてapiKeyなどを生成する

  2. HTMLとjavascriptをコーディング

  3. FirebaseのAPIを呼び出しPUSH通知を表示


Firebaseにプロジェクトを作成

Firebaseを開き、プロジェクトを追加します。

image.png

image.png

プロジェクトを追加したあと、Firebase Consoleに移動します。

トップにある「ウェブアプリにFirebaseを追加」というボタンをクリックするとscriptが記載されたポップアップが立ち上がります。

image.png

ここに記載されているscriptタグをまるっとコピーしておきます。

image.png

次にプロジェクトの設定を開きます。

スクリーンショット_2017-11-25_12-24-36.png

クラウドメッセージングタブの中に、サーバーキーと送信者IDの値があります。

これも後ほど利用しますので、コピーしておきます。

image.png

以上で、ブラウザ上での設定は完了です。


HTMLとjavascriptのコーディング

本家のガイドを見ながらやるのが良いかと思います。

ここでは動作確認のため、最小のファイルで実装します。


  • manifest.json

  • index.html

  • serviceworker.js

まずはmanifestファイルを作ります。

NNNNNNNN部分は、先ほど取得した「送信者ID」の値を入れます。


manifest.json

{

"name": "Push Notification Test",
"gcm_sender_id": "NNNNNNNN"
}

次に、index.htmlからmanifestファイルを参照します。


index.html

<link rel="manifest" href="/manifest.json"/>


続いて、index.html上でfirebaseのSDKを読み込み、初期化します。

ここでは、Firebase Consoleで取得したscriptタグをまるごとコピペすればOKです。


index.html

<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>

<script>
var config = {
apiKey: "XXXX",
authDomain: "XXXX",
databaseURL: "XXXX",
projectId: "XXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXX"
};
firebase.initializeApp(config);
</script>

Service Workerを実装します。

push通知がきたら固定のメッセージを表示するようにしています。


serviceworker.js

console.log('Service Worker is running.', self);

self.addEventListener('install', function(event) {
self.skipWaiting();
});

self.addEventListener('push', function(event) {
event.waitUntil(
self.registration.showNotification('Push Received', {
body: 'Push Notification Received',
tag: 'push-notification-tag'
})
);
});

self.addEventListener("notificationclick", function(event) {
event.notification.close();
}, false);


index.htmlにserviceworker.jsを登録する処理を追加します。

登録が成功している場合、endpointがconsoleに出力されます。


index.html

<script>

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceworker.js').then(function(reg) {
reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) {
console.log(sub.endpoint);
});
}).catch(function(error) {
console.log(error);
});
}
</script>


Service Workerのインストール

Chromeでページを開くと、Push通知を許可するかどうかダイアログが開くので、許可してください。

image.png

F12キーでディベロッパーツールを開き、consoleタブを開くと、以下のようなURLが表示されます。

このURLのXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX部分がユーザーを識別するキーになっています。

https://android.googleapis.com/gcm/send/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

ちなみに、Chromeの場合はこちらからインストールされているService Workerを確認することができます。

chrome://serviceworker-internals/

PUSH通知をOFFにした場合は、こちらから設定を解除してください。

chrome://settings/content/notifications


PUSH通知

curlで呼び出す場合はこんな感じになります。

「key=xxxxxxxx」のxxxxxxxx部分には、Firebase Consoleで取得したサーバーキーを指定します。

「"to": "XXXXXXXX"」のXXXXXXXX部分には、Chromeのディベロッパーツールに表示されたユーザーを識別するキーを指定します。

curl "https://fcm.googleapis.com/fcm/send" \

-X POST \
-H "Content-Type: application/json" \
-H "Authorization: key=xxxxxxxx" \
-d '{
"notification": {
"title": "タイトル",
"body": "本文",
"click_action": "http://example.com"
},
"to": "XXXXXXXX"
}'

Advanced REST Clientを使う場合は、こんな感じになります。

ヘッダーにAuthorizationを追加し、key={サーバーキー}となるように設定します。

image.png

BodyはJSON形式で記述します。

image.png


参考URL

Firebase 入門 - Cloud Messagingを使ってみる。

Firebase Cloud Messaging の Web Push を試してみた