超簡単にブラウザPush通知を実装する方法【ブラウザ編】

### 追記
[超簡単にブラウザPush通知を実装する方法【サーバー編】](http://qiita.com/shigekid/items/ffcda99de43bdb52e89c)を書きました(4/8)
[特定のユーザーにブラウザPush通知を送信する方法](http://qiita.com/shigekid/items/4c13051df3564cb9eadc)を書きました(4/10)


## **この記事で説明しないこと**

 - ブラウザPush通知の仕組み
 - HTTPSに対応しているWebサイトの作り方、対応方法

## **必要なもの、使うもの**

 - [OneSignal](https://onesignal.com/)のアカウント
 - GoogleCloudMessagingのAPIキー & プロジェクトナンバー
 - manifestファイル
 - OneSignalの提供しているJSファイル
 - HTTPS化されたWebサイト

## **ざっくりした手順**
※一部順番はどうでも良い部分もありますが順を追って説明するためにあえて順番を付けてます。

1. Googleの準備
2. OneSignalの準備
3. Webサイトに導入
4. OneSignalで認証
5. 試してみる

###**1.Googleの準備**
Push通知を送るためにはGCM（GoogleCloudMessaging）を使う必要があります。
ここに関してはOneSignalのドキュメントで画像付きでとてもわかりやすく説明してくれています。
なので[こちらのページ](https://documentation.onesignal.com/v2.0/docs/website-generating-a-gcm-push-notification)を見てそのままの手順で準備は完了です。
この手順の途中にあるように**GoogleCloudMessagingのAPIキー**と**プロジェクトナンバー**は控えておいてください。
ちなみに一点だけ補足をすると、上記サイトですと**Google Cloud Messaging for Android**となっていますが現在は**Google Cloud Messaging**のようです。


###**2.OneSignalの準備**
まずアカウントを作ってくださいwこれが無いと何も出来ませんw
FaceBookアカウント、Githubアカウントがあればすぐに作れます。無い場合はメアドで作りましょう。

ここからはOneSignalの設定と一緒にキャプチャを使って説明していきます。
まずは左上の**Add a new app**をクリックします。
<img width="247" alt="スクリーンショット 2016-04-06 22.52.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/ca9d671e-9db4-7ed3-a528-bb0141f88c37.png">


次にアプリケーション名を入れます。これは何でも良いです。今回はtestpush2という名前で作りました。
<img width="637" alt="スクリーンショット 2016-04-06 22.52.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/607ca5c7-0a9e-9e9f-f8e9-a0444474c77d.png">


さくさく行きましょう。次に**WebSitePush**を選択します。
<img width="796" alt="スクリーンショット 2016-04-06 22.59.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/e9190161-e7a7-3ae1-68a3-584e1d7b30b1.png">

次に**Chrome&FF**を選びます。
<img width="816" alt="スクリーンショット 2016-04-06 22.59.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/8baa8812-f424-7aaa-57c5-c3501062fc37.png">

次は入力項目です。それぞれの項目に必要な情報を入れましょう。
ちなみにMy site is not fully HTTPSとありますが、今回は一旦https前提なのでチェックは付けないでください。
<img width="797" alt="スクリーンショット 2016-04-06 23.05.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/73adcbb9-87b7-c32d-126e-4e3cb0b7facb.png">

次は最初の認証を何で行なうかですが、今回はWebsitePushで行います。ServerAPIでも出来るみたいなのでここは好きな方法を選んでください。
<img width="786" alt="スクリーンショット 2016-04-06 23.07.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/00e9f041-256d-9931-d641-87370cd9a73e.png">

**Your App ID**の部分を保存しておいてください。
ここでは画面にもありますが今までよりも、少しだけ手順を踏む必要があります。
具体的な説明は以下に記載しておきます。
<img width="796" alt="スクリーンショット_2016-04-06_23_16_29.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/5a6e4650-0b28-7b5e-3322-16330cb288cb.png">

###**3.Webサイトに導入**
この時点でHTTPSに対応しているWebサイトが必要です。HTMLを用意します。
以下HTMLのサンプルです。この時点でmanifest.jsonというものが必要です。

```lang:manifest.json
{
  "name": "サイト名",
  "short_name": "サイト名",
  "start_url": "/",
  "display": "standalone",
  "gcm_sender_id": "1で取得したGoogleのプロジェクトナンバー",
  "gcm_user_visible_only": true
}
```
manifest.jsonは`https://example.com/manifest.json`でアクセスさせるように作らないとダメそうですが、方法によっては出来るのかもしれません。ここは検証不足です。
次にHTMLのサンプルです。このHTMLはTOPページである必要はありません。今回は認証を行ないたいだけなので、auth.htmlなどでも良いですし、ディレクトリを深くしても問題はありません。

```lang:index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="manifest" href="/manifest.json">
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js"></script>
    <script>
      var OneSignal = OneSignal || [];
      OneSignal.push(["init", {
        appId: "さきほど取得したApp IDを入力",
        autoRegister: true
      }]);
    </script>
  </head>
  <body>
  </body>
</html>
```

あとは上記ファイルをサーバーにアップロードしてhtmlファイルにアクセスしましょう。
するとこんな通知が出ると思いますので勿論「許可」を選びましょうw
<img width="387" alt="スクリーンショット_2016-04-06_23_38_12.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/5436c1a3-239d-c184-92c0-1f1544462638.png">

###**4.OneSignalで認証**
3の最後に表示された通知ウィンドウで許可を押して数秒待つと今度はブラウザの右側にこんな通知が表示されると思います。
<img width="359" alt="スクリーンショット_2016-04-06_23_39_25.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/cecc2230-75aa-d344-c62b-88a7c3a8624a.png">

次にOneSignalのサイトに戻って、**Check Subscribed Users**をクリックしましょう。Push通知が送信出来ていると画像のように**Congratulations**という表示がされます。
#####**まだ認証完了はしてないので注意してください**

エラーになる場合は**HTMLに書いたOneSignalのAppID**、もしくはこの設定の最初に入力した**Googleから発行されたAPIキー**、もしくは**manifest.json上のgcm_sender_id**が間違ってる可能性が高いので見直してみましょう。
<img width="800" alt="スクリーンショット_2016-04-06_23_39_43.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/1e37065f-7862-190a-6ea5-bd71c3eafcfc.png">

次のページに行って今度は**SendTestNotification**をクリックしましょう。
認証完了まであと少しです！
<img width="803" alt="スクリーンショット 2016-04-06 23.48.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/34dcf015-ad8c-0cbd-db38-8de94ec55f78.png">

そしたらまたPush通知が届くと思います。あとはこれを**クリックします**。
<img width="374" alt="スクリーンショット_2016-04-06_23_48_55.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/f3cbd77a-92dc-8e51-cc8f-a0cace80b1af.png">

クリックするとこんな画面に遷移すると思います。これで認証は完了です。
<img width="1052" alt="スクリーンショット 2016-04-06 23.53.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/7a07a1ab-3adb-3377-1a1c-cb600ccbb864.png">

###**5.試してみる**
では早速、OneSignalの画面の左メニューになる**New Message**をクリックしましょう。そうするとキャプチャのように右にタイトルとメッセージを入れるフォームが表示されます。
<img width="1127" alt="スクリーンショット_2016-04-06_23_59_06.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/37d93369-1eb2-55fd-6477-c5ee0481aa08.png">

Titleに「Push通知だよ！」、Contentに「通知が届いてるかな？」と入力して、Previewをクリック、次の確認画面でSendをクリックします。そうすると....ブラウザの右上に通知が届きましたね！
<img width="365" alt="スクリーンショット_2016-04-07_0_04_54.png" src="https://qiita-image-store.s3.amazonaws.com/0/1389/355f07dd-3efd-6780-d9fd-eb1273df0881.png">


以上でPush通知をChromeへ送信する設定は完了です。
OneSignal上でメッセージを手動で作って送る分には問題ないと思います。
ただ手動ではなくてシステム的に、何かをトリガーにして対象ユーザーに送りたいですよね？
次回はこれを応用してサーバーサイドからPush通知を送る方法と送る対象のセグメントを切る方法を書こうと思います。