■ Web Notifications API
Notification : 通知* 簡単にデスクトップ通知が実装可能デモとサンプル
https://davidwalsh.name/notifications-api
Web Push APIとの違い
Web Notifications API* 画面上に通知を表示する機能Web Push API
* サーバから通知を受信する機能以下のサイトも参照
http://garapon.hatenablog.com/entry/2016/04/20/%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96Push%E3%81%A8WebPush%E3%81%A8Web_Notification%E3%81%AE3%E3%81%A4%E3%81%AE%E9%80%9A%E7%9F%A5%E6%96%B9%E6%B3%95%E3%82%92%E6%95%B4%E7%90%86%E3%81%97%E3%81%A6
■ サンプル
例：HelloWorld的なサンプル<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Notification Demo</title></head><body><button onclick="sayHello()">Hi</button><br /></body><script type="text/javascript">
function sayHello() {
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
var notify = new Notification('Title ... Say Hello!', {
body: 'Body ... Say World!!',
icon: 'https://ident-001.west.edge.storage-yahoo.jp/res/ident-5mypszyrqsxdfvywx6dmdr5oam/profile/icon_sr?1274278682'
});
});
}
}</script></html>補足：Chrome での確認
* Chrome ではWebサーバ経由でないと確認できない (Firefoxなら気軽に試せる) * 詳細は、以下の関連記事を参照のこと。https://blogs.yahoo.co.jp/dk521123/37243216.html
■ Notificationあれこれ
指定した時間で通知を閉じる
setTimeout(function() {【Notificationインスタンス】.close();
}, 【時間】);
サンプル Notification.requestPermission(function(status) {
var notify = new Notification('Title ... Say Hello!', {
tag: 'Tag ... Say World!!',
body: 'Body ... Say World!!',
icon: 'https://ident-001.west.edge.storage-yahoo.jp/res/ident-5mypszyrqsxdfvywx6dmdr5oam/profile/icon_sr?1274278682'
});
// ★3秒後消す★
setTimeout(function() {
notify.close();
}, 3000);
});
Web Notifications APIがサポートされているブラウザか確認
if ("Notification" in window) {
// サポートされている
} else {
// サポートされていない
}
サンプル <!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Notification Demo</title></head><body><button onclick="checkSupportOrNot()">Check</button><br /></body><script type="text/javascript">
function checkSupportOrNot() {
if ("Notification" in window) {
var notify = new Notification("Support!", {});
} else {
alert("Not Support!!");
}
}</script></html>参考文献 https://developer.mozilla.org/ja/docs/Web/API/notification