Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

OneSignalでWebサイトにpush通知機能を付ける

More than 3 years have passed since last update.

OneSignalとは

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

OneSignal_-_Multi-platform_Push_Notification_Service.jpg

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

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」を選択。
アプリケーション名の登録。

OneSignal.jpg

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

OneSignal.jpg

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

OneSignal.jpg

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

OneSignal.jpg

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

OneSignal.jpg

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

アクティビティ.jpg

OneSignal.jpg

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

OneSignal.jpg

あとは元のチュートリアルに従って、以下のスクリプトを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から。

OneSignal.jpg

ユーザーのボタンクリックでプッシュ通知がされるようにしたいのだけど、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);
      });
  },

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

jacoyutorius
Software/Server developer at AIRS. Ruby / AWS / Vue
http://jacoyutorius.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away