2014/11/26
jQueryで簡単にデスクトップ通知を実装する方法
前々からデスクトップ通知(desktop notifications)をしてくるWebサービスが気になっており、
どうやってやっているのかを調べたところ、すごく簡単に実装できたのでメモ
調べると色々とやり方があるようだったのだが、ブラウザによって方法が異なり、ちゃんとやるのは難しそうだったので以下のプラグインを使用。
<a href=”https://github.com/ttsvetko/HTML5-Desktop-Notifications” target=”_blank”>desktop-notify-min.js</a>
サンプルなどがangularjsで書かれており、社内では少し敷居が高そうだったのでjQueryで書きなおした。
重要な関数たち
1. permissionLevel()
デスクトップ通知に対するユーザーの設定が帰ってくる。
基本的には以下の3つぷらすその他。
notify.PERMISSION_GRANTED → 許可
notify.PERMISSION_DEFAULT → デフォルト(=全部許可、サイトごとに設定、全部拒否など)
notify.PERMISSION_DENIED → 全部拒否
戻り値は上記3つと比較する。
デモの例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function setText() { if ( permissionLevel == notify.PERMISSION_GRANTED ) { $( '#notificationLevel' ).html( 'デスクトップ通知が許可されている環境です' ); } else if ( permissionLevel == notify.PERMISSION_DEFAULT ) { $( '#notificationLevel' ).html( 'デスクトップ通知が許可されていない環境です。<br />ここをクリックして許可して下さい' ); } else if ( permissionLevel == notify.PERMISSION_DENIED ) { $( '#notificationLevel' ).html( 'デスクトップ通知を完全拒否しています。<br />ブラウザの設定で許可して下さい' ); } else { $( '#notificationLevel' ).html( 'よくわからないので出てってください' ); } } |
2. notify.isSupported
ユーザーの環境がそもそもデスクトップ通知に対応しているかどうか
動作環境は以下とのこと
Chrome(version 23+), Safari(version6+), Firefox(with ff-html5notifications plugin installed) and IE9+
たぶんそれ以外だとfalseとなる模様
3. requestPermission
許可するためのポップアップを出力する。
これがブラウザごとに異なったため苦労したが、1行で完了。
4. createNotification
|
1 | notify.createNotification( 'デスクトップ通知', { body: 'あああああああああああああああああ', icon: 'logo.png' } ) |
デモだと上記のように設定している。
簡単だし便利そうなのでぜひ実際のサービスでも試してみたい
Author Profile
SHARE
