Pushnate導入ガイド:独自ドメインでのWebプッシュ通知を配信する

  • このエントリーをはてなブックマークに追加
  • Pocket

Pushnateは8月よりアルファ版として運営しておりましたが、本日(11/2)リリースのベータ版より独自ドメインでのプッシュ通知が可能になりました。プッシュ通知ウィンドウに自分のサイトのドメインを表示できます。導入するには以下の手順に沿って設置してください。
※独自ドメインプッシュではプッシュ許可を取るページはhttps環境である必要がありますので注意してください。

1.Google Developers Consoleでプロジェクトを作成する

Google Developers Consoleでプロジェクトを作成します。プロジェクト名をつけると、プロジェクトIDとプロジェクト番号が自動で発行されます。
project

・プロジェクトを作成したら「Google APIを利用する」から「Cloud Messaging for Android」を有効にします。

API Managerの「認証情報」にある「認証情報を追加」ボタンから「API キー」を選択します。キーの種類を聞かれますので「サーバー キー」を選択し、下図のように好きな名前をつけます。作成するとAPI キーが表示されます。
sapikey以上でGoogle Developers Consoleでの設定は終了です。発行したプロジェクト番号とAPI キーは次のステップで使います。

2.Pushnate管理画面にサイトを登録し、SDKを取得する

Pushnate管理画面の「新規サイト登録」からサイト名とトップページのURL、ステップ1で取得したAPI キーを入力します。
new

・Pushnate管理画面内の「設置方法」にある「pushnate SDK」をダウンロードします。
中にある「manifest.json」をテキストエディタなどで開き、「GOOGLE_PROJECT_ID」をステップ1で発行したプロジェクト番号に書き換えます。
※プロジェクト番号は数字のみです。間違えて他の値を設定しないように注意してください。

manifest.jsonの内容

{
  "name": "SiteNameExample",
  "short_name": "SiteNameExample",
  "start_url": "/",
  "display": "standalone",
  "gcm_sender_id": "GOOGLE_PROJECT_ID",
  "gcm_user_visible_only": true
}

・SDKの中にある「manifest.json」「pushnateSDK.js」「unregister.ja.html」をWebプッシュするサイトのなるべく上位のディレクトリ(通常はホームディレクトリ)にアップロードします。
なお「unregister.ja.html」はプッシュ通知を解除するボタンが含まれています。サイトのユーザーにプッシュ解除方法を案内する際にURLを教えてあげてください。

3.プッシュ許可を取るページにプッシュ許可コードを設置する

・Pushnate管理画面内「設置方法」にあるプッシュ許可コードを、プッシュ許可を取りたいページのHTML内に記載してください。headとbody内それぞれに記載が必要です。なお、プッシュ許可を取るページはhttps環境である必要がありますの注意してください。

独自ドメインで本格的なWebプッシュ体験を

以上で設定は完了です。

これで、プッシュ許可コードを設置したページにアクセスしたユーザーにプッシュ許可ウィンドウが表示されるようになり、プッシュ通知内に表示されるURLも独自ドメインになります。ぜひ本格的なWebプッシュ通知を一度試してみてください!

Webプッシュ、今なら無料ではじめられます

Pushnate(プッシュネイト)はAndroidやPC版Chrome 42以上で使える、Webサイトでも無料でプッシュ通知が配信できるサービスです。

プッシュ通知したいWebサイトにJavaScriptを貼り付け、ちょこっと設定するだけ。通知日時を指定したり定期的な通知も可能なので、新商品や新コンテンツ追加時など自由なタイミングでリピート訪問を促進することができます。

今すぐWebプッシュをはじめる(無料)

SNSでもご購読できます。

スポンサーリンク