OneSignalでWebサイトにpush通知機能を付ける #プッシュ通知

OneSignalとは

W3C Push APIの使い方を調べていたのですが、
Rebuild.fmのServiceWorkerがヒントにならないかと思い、Chromeのコンソールで開いてみたところ、OneSignralというサードパーティのライブラリが使われていることがわかりました。

日本語の情報は少ないものの、無料である程度は使えるようだし、ドキュメントも充実していたので試してみることに。

PushAPIはSSLでしか受け付けないのだけど、OneSignalを使うと非SSLのサイトでもプッシュ通知を送ることができるようです。
（その場合、~.onesignal.comから通知が発行される）

まずはチュートリアルに従ってやってみます。

Google Cloud Messagingの登録

Chromeブラウザへプッシュ通知を行うにはGoogle Cloud MessagingのAPIKeyが必要なので、まずはGoogle Developer Consoleでアプリケーションを作成し、API Keyとプロジェクト番号（プロジェクトIDではないことに注意!）を取得する必要があります。
この辺は別の方の記事が詳しいのでそちらを参照してください。

初めてのService Worker （Push API編）

OneSignalチュートリアル

HTTPでプッシュ通知を行う方法は↓のチュートリアル。
Dashboardからプッシュ通知を組み込みたいアプリの登録をして数行のコードをhtmlに組み込む。

Web Push SDK Installation (HTTP)

OneSignalアプリケーションの登録

Dashboardから「Add a new app」を選択。
アプリケーション名の登録。

モバイルアプリ等にも対応してるみたいだけど、今回はWebsite Pushを選択。

Safariへ通知するにはもう一手間かかるらしい。今回はChromeを選択。

localhostで試すぶんには「Site URL」を「*」で登録。
「Google Server API Key」にはGoogle Developer Consoleで発行されたAPIKeyを入力。
非HTTPSサイトから通知をしたいので「My Site is not fully HTTPS.」にチェックを入れる。

「Choose Subdomain」には任意の値。HTTPの場合はこのサブドメインを含むURLから通知が発行される。
「Google Project Number」にはGoogle Developer Consoleから発行されたプロジェクト番号。

プロジェクト番号は「全てのアクティビティを表示」をクリックしたページから参照できる。

最後にAPPIDが発行されるので、メモしておく。

あとは元のチュートリアルに従って、以下のスクリプトをhtmlのhead内に記述する。
アプリケーション登録時に発行されたAPPIDはここに。

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
  var OneSignal = OneSignal || [];
  OneSignal.push(["init", {
    appId: "YOUR_APP_ID",
    subdomainName: 'PushAPI',
    notifyButton: {
        enable: true // Set to false to hide
    }
  }]);
</script>

ページを開くと右下にonesignralのアイコンが表示されるのでそれをクリックすればsubscribeされる。

通知を送ってみる

通知を送るのはDashboardから。

ユーザーのボタンクリックでプッシュ通知がされるようにしたいのだけど、API Referenceを読んだ感じだと、SDKからpushする方法が無さそう..?
この辺はもう少し調べてみます。

2016.5.9 追記

ドキュメントをしっかり読んだところ通知用のAPIが公開されていることがわかりました。

/notifications (Create Notification)

jsxからのPOSTはsuperagentというnpmを使っています。

import request from "superagent"

~

pushNotify(){
    var api_url = "https://onesignal.com/api/v1/notifications";
    var api_key = "my_api_key";
    var json = {
      "app_id": "my_app_id",
      "contents": {"en" : "Hello! this is " + this.props.name},
      "included_segments": ["All"]
    };

    request.post(api_url)
      .send(JSON.stringify(json))
      .set("Content-Type", "application/json")
      .set("Authorization", "Basic " + api_key)
      .end((err, res) => {
        console.log(res);
        console.log(err);
      });
  },

サクッと試してみるぶんには数分でいけるので是非是非お試しください。