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

10905 ワード
FirebaseCloudMessaging Push通知 Push通知 テキストリンク

Firebase Cloud Messagingというサービスを利用することでブラウザに対して簡単にPUSH通知を送ることができます。
（ブラウザの種類は限定されますが）

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

手順

  1. FirebaseにてapiKeyなどを生成する
  2. HTMLとjavascriptをコーディング
  3. FirebaseのAPIを呼び出しPUSH通知を表示

Firebaseにプロジェクトを作成

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

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

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

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

クラウドメッセージングタブの中に、サーバーキーと送信者IDの値があります。
これも後ほど利用しますので、コピーしておきます。

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

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通知を許可するかどうかダイアログが開くので、許可してください。

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={サーバーキー}となるように設定します。

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

参考URL

Firebase 入門 - Cloud Messagingを使ってみる。
Firebase Cloud Messaging の Web Push を試してみた