こんにちは、MUGENUPの倉成です。最近はWebアプリでもデスクトップ通知が出来るものが増えていますよね。今日はそんなデスクトップ通知の実装を取り上げてみようと思います。

便利なライブラリ

デスクトップ通知はブラウザによって実装が異なり、各ブラウザの対応は手間がかかるので、今回はクロスブラウザ対応を簡単にできるHTML5-Desktop-Notificationsを使います。他のデスクトップ通知のライブラリにはnotifyもあり、こちらもHTML5-Desktop-Notificationsと同じくらいのStarが付いているようです。

使い方

さて、ここからはHTML5-Desktop-Notificationsの使い方をREADMEにそって

1. ブラウザ対応状況の確認
2. ユーザーに通知の許可を求める
3. 通知を発行

の3段階で説明していきたいと思います。

なお、本記事はこのコミット時のコードを対象にしており、今後の開発により変更が発生する場合があります。

また、HTML5-Desktop-NotificationsのサンプルコードはAngular.jsベースとなっており、馴染みのない方も多いと思うので、gistにサンプルコードを書いてみました、こちらも合わせて見ていただければと思います。

https://gist.github.com/kuranari-tm/e8d8b6411b90da10910e

Step1（ブラウザが通知に対応しているかチェック）

まずは以下のコードでブラウザがデスクトップ通知に対応しているか確認しましょう。コードは

notify.isSupported// ブラウザが対応していればtrue, そうでなければfalse

です。なおnotifyはHTML5-Desktop-Notificationsで定義されているグローバル変数です。

Step2（ユーザーに通知を求める）

デスクトップ通知は、ユーザーから通知の許可をもらわなければ通知が発行できません。次は、notify.permissionLevel()でドメインに対する通知の許可状況をチェックします。

許可・拒否の状態は

notify.PERMISSION_DEFAULT// 通知が許可されていないnotify.PERMISSION_GRANTED// 通知が許可されているnotify.PERMISSION_DENIED// 通知が拒否されている

の3状態で、PERMISSION_DEFAULTとなっている場合は

notify.requestPermission()

で、ユーザーから通知の許可をもらいましょう。

DEFAULTとDENIEDの違いですが、notify.requestPermission()を実行時にDEFAULTでは上のような「デスクトップ通知の表示を許可しますか？」のメッセージが表示されますが、DENIEDではこのメッセージは表示されず、ユーザーがブラウザの設定を変更するまでは通知機能を使用することが出来ません。

その場合、例えばChromeでは以下の箇所からドメインに対する通知の許可をユーザーに行ってもらわなければなりません。

通知の設定はドメイン単位で保存されるため、初回一度だけ許可をもらえば、その後は通知を自由に発行することが出来ます*1

Step3（通知を発行）

さて、Step2までで設定が終了したので、notify.createNotificationで通知を発行します。

notify.createNotification(String title [, Object options])

この関数を実行すると、MacのChrome(version.36)では以下のような表示がされます。

optionsに渡せるパラメータは

body, icon, tag, timeout

の4つです。

第一引数のtitle、そしてオプションのbody,iconは上の通知画像を見れば、大体どこに対応するか分かるかと思います。ただし、iconが必須パラメータになっていることには注意しましょう。

tagはユニークな値を設定することで、複数のタブでページを開いていた場合に、開いているタブと同じ数の通知が発行されることを防ぐことが出来ます。

timeoutはREADMEには通知が閉じるまでの時間を設定できると書いてありますが、README通りに設定を行っても求める挙動が実現できません。一定時間経過後に自動で閉じる設定をするには

notify.config({autoClose: 1000});// 1000[ミリ秒後]に通知を閉じる

とする必要があります。issueに上がっているようにみえるのですが、ちょっとハマりどころです。

なお、通知をクリックした時に何らかの処理をしたいといった処理は本家では実装されていませんが、Fork先では実装されているものもあるようなので、必要があればこちらを参考に機能を追加しても良いかもしれません。

終わりに

gistのサンプルコードでもjsは30行程度で、とても簡単にデスクトップ通知(しかもクロスブラウザ対応まで)を実装することが出来ました。

Webサービスにデスクトップ通知があることで使い勝手が格段に良くなるケースも少なく無いと思うので、意外と簡単に実装できてしまうデスクトップ通知機能、ぜひ一度使ってみてください！

おまけ：ローカルで通知が表示されない場合

セキリティ設定の影響でChromeなど幾つかのブラウザではサーバーを通さないローカルのjsが動作しないことがあります。その場合は以下のサイトを参考に

$ python -m SimpleHTTPServer 8080

コマンド1つで今すぐWebサーバを起動させるためのワンライナー(Ruby or Python) - 元RX-7乗りの適当な日々

とし、ブラウザからlocalhost:8080にアクセスすると、簡単にサーバー経由で動作を確認することが出来ます。