スマートフォンアプリではおなじみのプッシュ通知ですが、Webサイトからもプッシュ通知できることをご存知でしょうか?

JavaScriptのServiceWorkerPush APIを使用することで、Webサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。

本サイトでもプッシュ通知機能を導入しており、たくさんの方に利用していただいています。まだ利用されていない方やプッシュ通知を体験してみたい方は、こちらから設定してみてください。簡単にユーザーが利用できることがおわかりになると思います。

プッシュ通知のデモ

プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください(2016年5月現在の最新版はChrome 50です)。

「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windowsをお使いの方は、こちらからcURLをインストールすれば、コマンドプロンプトから実行できます。

プッシュ通知のサンプル

ソースコードはこちらから確認できます。

※本デモはChrome 42以降のバージョンでのみ動作します。
※ブラウザの設定でプッシュ通知を拒否している方は有効にしたうえでデモをご確認ください。

▼実際にデモを操作している映像です。

160513_serviceworker

プッシュ通知のメリット

これまでWebサイトの更新をユーザーに伝えるための手段としては、RSSやメールなどが利用されていました。ユーザーが利用するためには、RSSの場合はRSSリーダーに登録する手間が必要ですし、メールの場合でもメールアドレスをユーザーに登録してもらわなければいけないため、利用するためのハードルが高いです。

プッシュ通知の場合は、Webサイト上で許可するだけで有効になるため、手間がかからずユーザーは気軽に利用することができます。

プッシュ通知の実装方法について

上記のサンプルをもとに、Google Cloud Messagingを利用したプッシュ通知の実装方法を説明します。まずはGoogle Developer ConsoleよりGCM(Google Cloud Messaging)のAPIキーを取得します。

Google Cloud MessagingのAPIキーを取得する

Google Developer Consoleへアクセスし、検索ボックスにgoogle cloud messagingと入力し検索してください。

APIキーを取得する

検索結果からgoogle cloud messagingを選択したら、次に[プロジェクトの作成]を選択します。

APIキーを取得する

プロジェクト作成画面では、任意のプロジェクト名を入力し、利用規約に同意してプロジェクトを作成します。プロジェクトを作成すると、[有効にする]ボタンが押せるようになっているので、有効にしてください。APIを有効にすると、認証情報を作成するようメッセージが表示されるため、[認証情報に進む]を選択し、認証情報の作成を行います。

APIキーを取得する

使用するAPIに「Google Cloiud Messaging」を、APIを呼び出す場所に「ウェブサーバー(node.js、Tomcatなど)」を指定し、認証情報を作成してください。次の画面では任意のAPIキーの名前を設定し、[APIキーを作成する]ボタンを押してください。

APIキーを取得する

以上でAPIキーの取得は完了です。APIキーは後ほど使用するため、メモしておきましょう。[完了]ボタンを押して認証情報の作成を終了してください。

APIキーを取得する

また、後ほどプロジェクト番号も必要になりますので、Google Cloud Platformにアクセスし、プロジェクト番号を控えておきましょう。プロジェクトIDでは無いので注意してください。

APIキーを取得する

次のページでは、サンプルコードを使用してプッシュ通知を行うまでの手順を説明します。