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
56
Help us understand the problem. What is going on with this article?
@shigekid

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

More than 5 years have passed since last update.

追記

超簡単にブラウザPush通知を実装する方法【サーバー編】を書きました(4/8)
特定のユーザーにブラウザPush通知を送信する方法を書きました(4/10)

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

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

必要なもの、使うもの

  • OneSignalのアカウント
  • GoogleCloudMessagingのAPIキー & プロジェクトナンバー
  • manifestファイル
  • OneSignalの提供しているJSファイル
  • HTTPS化されたWebサイト

ざっくりした手順

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

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

1.Googleの準備

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

2.OneSignalの準備

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

ここからはOneSignalの設定と一緒にキャプチャを使って説明していきます。
まずは左上のAdd a new appをクリックします。
スクリーンショット 2016-04-06 22.52.57.png

次にアプリケーション名を入れます。これは何でも良いです。今回はtestpush2という名前で作りました。
スクリーンショット 2016-04-06 22.52.36.png

さくさく行きましょう。次にWebSitePushを選択します。
スクリーンショット 2016-04-06 22.59.31.png

次にChrome&FFを選びます。
スクリーンショット 2016-04-06 22.59.44.png

次は入力項目です。それぞれの項目に必要な情報を入れましょう。
ちなみにMy site is not fully HTTPSとありますが、今回は一旦https前提なのでチェックは付けないでください。
スクリーンショット 2016-04-06 23.05.45.png

次は最初の認証を何で行なうかですが、今回はWebsitePushで行います。ServerAPIでも出来るみたいなのでここは好きな方法を選んでください。
スクリーンショット 2016-04-06 23.07.41.png

Your App IDの部分を保存しておいてください。
ここでは画面にもありますが今までよりも、少しだけ手順を踏む必要があります。
具体的な説明は以下に記載しておきます。
スクリーンショット_2016-04-06_23_16_29.png

3.Webサイトに導入

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

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などでも良いですし、ディレクトリを深くしても問題はありません。

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
スクリーンショット_2016-04-06_23_38_12.png

4.OneSignalで認証

3の最後に表示された通知ウィンドウで許可を押して数秒待つと今度はブラウザの右側にこんな通知が表示されると思います。
スクリーンショット_2016-04-06_23_39_25.png

次にOneSignalのサイトに戻って、Check Subscribed Usersをクリックしましょう。Push通知が送信出来ていると画像のようにCongratulationsという表示がされます。

まだ認証完了はしてないので注意してください

エラーになる場合はHTMLに書いたOneSignalのAppID、もしくはこの設定の最初に入力したGoogleから発行されたAPIキー、もしくはmanifest.json上のgcm_sender_idが間違ってる可能性が高いので見直してみましょう。
スクリーンショット_2016-04-06_23_39_43.png

次のページに行って今度はSendTestNotificationをクリックしましょう。
認証完了まであと少しです!
スクリーンショット 2016-04-06 23.48.46.png

そしたらまたPush通知が届くと思います。あとはこれをクリックします
スクリーンショット_2016-04-06_23_48_55.png

クリックするとこんな画面に遷移すると思います。これで認証は完了です。
スクリーンショット 2016-04-06 23.53.18.png

5.試してみる

では早速、OneSignalの画面の左メニューになるNew Messageをクリックしましょう。そうするとキャプチャのように右にタイトルとメッセージを入れるフォームが表示されます。
スクリーンショット_2016-04-06_23_59_06.png

Titleに「Push通知だよ!」、Contentに「通知が届いてるかな?」と入力して、Previewをクリック、次の確認画面でSendをクリックします。そうすると....ブラウザの右上に通知が届きましたね!
スクリーンショット_2016-04-07_0_04_54.png

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

56
Help us understand the problem. What is going on with this article?
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
shigekid
I'm using the Ruby on Rails.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
56
Help us understand the problem. What is going on with this article?