こんにちは。キャスレーコンサルティングのLS(リーディング・サービス)部の向井と申します。
今回は、HTMLとjsのみで簡単にWebブラウザのプッシュ通知を、実装する方法をご紹介します。
1.プッシュ通知
スマートフォンアプリでは、おなじみのプッシュ通知ですが
実はWebブラウザでも、簡単に導入することができます。
これまでは、ユーザが自らWebサイトの情報にアクセスしなければならなかったのですが、
プッシュ通知の導入をすると、Webサイト側から自動的に情報を送ることが可能になります。
Webサイト更新のお知らせなど、今まではメールやRSSを使用する必要がありましたが、
これらは登録の手間がかかってしまいます。
一方、プッシュ通知はユーザが一度承認するだけで、面倒な手続きは一切ありません。
また、メールは開封されずにユーザに情報が届かないケースも想定されますが、
プッシュ通知は情報を届けたいタイミングを選んで、確実に画面上に表示することが出来ます。
2.push.js
今回プッシュ通知導入にあたり、使用するのは「push.js」です。
Webブラウザ上では、「Notification API」によって画面上に通知を出します。
これは、Webブラウザからの通知を制御するためのAPIですが、
様々な処理を記述する必要があるため、どうしてもコードが長くなってしまいます。
「push.js」とは、「Notification API」をシンプルなコードで簡単に制御するためのjQueryプラグインです。
「push.js」には、クロスブラウザ対応処理や通知許可の処理があらかじめ含まれており、
ライブラリを読み込むだけで、簡単にプッシュ通知を実装することができます。
ライブラリはGitHubからダウンロードして読み込む方法の他に、コマンドラインからインストールもできますが、
下記のコードを記述することで、CDN経由で読み込むこともできます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>
★Service Worker
push.jsは、「Service Worker」を使ってブラウザにプッシュ通知を表示しています。
Service Workerとは、通常のJavaScript環境とは別に、
Webページのバックグラウンドで動かせる、イベント駆動のJavaScript環境です。
非常に大雑把ではありますが、以下のような流れでプッシュ通知が送られます。
1.ユーザがサイトにアクセスし、Service Workerにユーザの端末を登録する。
2.送信者が登録された端末へプッシュ通知を送信し、 ServiceWorker がイベントを検知し、
ユーザーの端末上に通知内容を表示する。
プッシュ通知の他にも、これを土台として様々なAPIと組み合わせることで、
オフラインでの動作、バックグラウンドでの処理が可能となります。
それでは、実際に「push.js」を使ってプログラムを作ってみましょう。
3.導入方法
今回はボタンを押すと、プッシュ通知が送られるというプログラムを作成します。
まずは、HTMLを記述していきます。
ボタンのみのシンプルなページです。
<!DOCTYPE html> <html lang="ja"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <meta charset="UTF-8"> <title>ブラウザでプッシュ通知を実装</title> </head> <body> <center> <h1 style="margin-top: 300px">ブラウザでプッシュ通知を実装しよう</h1> </center> <center> <input type="button" id="push" onclick="return push()" value="クリックするとプッシュ通知が送られます"/> </center> </body> </html>
下準備は完了したので、いよいよ「push.js」を導入していきます。
先ほどご紹介した、ライブラリをCDN経由で読み込むコードを挿入し、
プッシュ通知を呼び出すための、Push.createメソッドを記述していきます。
このメソッドにはメッセージ内容やアイコン、表示時間やクリック後の挙動など、様々な内容を設定することができます。
まず、メソッドの第一引数にプッシュ通知のタイトルを記述します。
<script>
function push(){
Push.create('更新情報');
}
</script>
これだけでも、プッシュ通知を出すことは可能です。
しかし、今回は第二引数にオプションを設定し、詳細な内容を記述してみます。
以下、利用できるオプションです。
オプション
– icon [ String ] : アイコン
– body [ String] : 通知バーの本文
– onClick [ Function ] : 通知をクリックした時のイベント
– onClose [ Function ] : 通知を閉じた時のイベント
– onError [ Function ] : エラーが発生した時のイベント
– onShow [ Function ] : 通知が表示された時のイベント
– tag [ String] : タグ
– timeout [ Integer ] : 通知が消える時間 ( * ミリ秒 )
<script>
function push(){
Push.create("更新情報",
{
body: "ブログの更新をお知らせします!",
icon: 'casley_logo.png',
timeout: 8000,
onClick: function () {
window.focus();
this.close();
}
})
}
</script>
ここで注意が必要なのは、プッシュ通知はローカルホストかHTTPSの環境で表示されます。
今回はローカルホストを立ち上げ、ページを表示します。
それでは、ボタンを押してプッシュ通知を出してみます。
プッシュ通知を許可を要求するポップアップが、表示されました。
『許可』を選択し、もう一度ボタンをクリックしてみましょう。
画面に、プッシュ通知が表示されました。
このように、プッシュ通知を送ることで、メッセージをほぼ確実にユーザに届けることができます。
プッシュ通知の導入により、サイトへの流入を促進できるのではないでしょうか。
4.最後に
いかがだったでしょうか。とても簡単にプッシュ通知を、ブラウザで実装することができましたね。
今回のデモプログラムは、とても単純なものでしたが、
天気や交通情報、サイト更新やセール開始のお知らせなど、様々な場面で活用することができます。
また、私はSlack(チャットツール)を使用しておりますが、新着メッセージがあればをプッシュ通知で知らせてくれます。
Slackのようなコミュニケーションツールにおいては、メッセージの緊急性が高いこともあるため、
レスポンス低下の防止策として、プッシュ通知の利用は非常に効果的であると言えます。
デバイスを起動している間ならば、ほぼ確実にユーザの目に入るプッシュ通知は
通知を送るタイミングや回数、伝える内容など、ユーザにとって「迷惑な配信」にならないためには工夫が必要ですが、
有効に使えばマーケティングの手法として大いに役立つはずです。
Webサイトを運営する上で、導入するメリットは十分あるのではないでしょうか。
以上、最後までお読み頂き、ありがとうございました。
