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

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

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

# 手順

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


## Firebaseにプロジェクトを作成

[Firebase](https://console.firebase.google.com/u/0/?hl=ja)を開き、プロジェクトを追加します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106949/6a8b8e3f-620f-7707-0f90-82bd886f179d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106949/858aade1-6c81-b106-7083-30de23d22be9.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106949/ed5992cf-08d9-c43f-7b46-d60cca2464e4.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106949/890aabbd-41b4-b5e8-5cb0-dddcbef6b902.png)

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

![スクリーンショット_2017-11-25_12-24-36.png](https://qiita-image-store.s3.amazonaws.com/0/106949/d3e371c8-6c93-00ec-1384-ea840ae024e7.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106949/f9be5bad-11b7-4512-7432-806f3f964de0.png)

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


## HTMLとjavascriptのコーディング

[本家のガイド](https://firebase.google.com/docs/cloud-messaging/js/client?hl=ja)を見ながらやるのが良いかと思います。
ここでは動作確認のため、最小のファイルで実装します。

* manifest.json
* index.html
* serviceworker.js

まずはmanifestファイルを作ります。
NNNNNNNN部分は、先ほど取得した「送信者ID」の値を入れます。

```json:manifest.json
{
    "name": "Push Notification Test",                                                                                                                                                   
    "gcm_sender_id": "NNNNNNNN"
}
```

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

```html:index.html
<link rel="manifest" href="/manifest.json"/>
```

続いて、index.html上でfirebaseのSDKを読み込み、初期化します。
ここでは、Firebase Consoleで取得したscriptタグをまるごとコピペすればOKです。

```html: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通知がきたら固定のメッセージを表示するようにしています。

```script: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に出力されます。

```html: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](https://qiita-image-store.s3.amazonaws.com/0/106949/e0575301-3394-64be-5a0c-b242146f0ba0.png)

F12キーでディベロッパーツールを開き、consoleタブを開くと、以下のようなURLが表示されます。
このURLのXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX部分がユーザーを識別するキーになっています。

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


ちなみに、Chromeの場合はこちらからインストールされているService Workerを確認することができます。
[chrome://serviceworker-internals/](chrome://serviceworker-internals/)

PUSH通知をOFFにした場合は、こちらから設定を解除してください。
[chrome://settings/content/notifications](chrome://settings/content/notifications)

## PUSH通知

curlで呼び出す場合はこんな感じになります。
「key=xxxxxxxx」のxxxxxxxx部分には、Firebase Consoleで取得したサーバーキーを指定します。
「"to": "XXXXXXXX"」のXXXXXXXX部分には、Chromeのディベロッパーツールに表示されたユーザーを識別するキーを指定します。

```bash
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](https://qiita-image-store.s3.amazonaws.com/0/106949/b0bb9eda-482b-32c2-e6eb-a49763eb9b7e.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106949/a5f373d7-6fef-a122-e93f-a19382761371.png)


# 参考URL
[Firebase 入門 - Cloud Messagingを使ってみる。](https://qiita.com/t_furu/items/734571b42f01c5ac5a22)
[Firebase Cloud Messaging の Web Push を試してみた](http://ceblog.mediba.jp/post/152537686847/firebase-cloud-messaging-%E3%81%AE-web-push-%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F)