【HTML5】デスクトップ通知が出来る「Notification」
HTML5を使用して簡単にデスクトップ通知が実現出来る「Notification」の使用方法をご紹介。
今までアラート等で通知するしかなかった通知情報がデスクトップに出せるようになるので、色々なことが出来そうです。
サポートバージョン
| ブラウザ | バージョン |
|---|---|
| Chome | 22～ |
| FireFox | 22～ |
| InternetExplorer | サポート外 |
| Opera | 25～ |
| Safari | 6～ |
サンプル
通知ボタンをクリックすると以下のように通知許可を求められるので許可してください。
許可された後、デスクトップに通知が表示されます。
ソース
サンプルで使用したソースの紹介。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <script>function show() { // Notificationを取得 var Notification = window.Notification || window.mozNotification || window.webkitNotification; // Notificationの権限チェック Notification.requestPermission(function (permission) { // console.log(permission); }); // 通知インスタンス生成 var instance = new Notification( "お知らせタイトル", // 通知タイトル { body: "1\r\n2\r\n3", // 通知内容 } ); instance .config({autoClose: 1000}); // 1000[ミリ秒後]に通知を閉じる instance.onclick = function () { console.log("onclick"); }; instance.onerror = function () { console.log("onerror"); }; instance.onshow = function () { console.log("onshow"); }; instance.onclose = function () { console.log("onclose"); };}</script><button type="button" onclick="show()">通知</button> |
1 2 3 4 5 | instance.onclose = function () { console.log("onclose"); window.open().close() window.focus()}; |
これを使用すれば、長時間処理の終了時に通知したり、node.js等と合わせて通知をしたりなど様々な事が出来そうです。
ただ、IEではサポートされていないので、気をつけなければいけません。
関連記事
No Responses