デスクトップ通知ができる「Notification」の通知を出してみるところまでです。
通知だけ
とりあえず動かすだけなら
test.html
<script>
var n = new Notification("Hello World");
</script>
Notificationの利用可否チェック
現時点でIEは未対応です
test.html
if (window.Notification) {
alert('Notificationは有効です');
} else {
alert('Notificationは無効です');
}
パーミッション確認
ブラウザにサイトごと許可・拒否されているか保存されており、初めての場合はdefaultが返ってきます
test.html
if (Notification.permission === 'granted') {
alert('通知許可されています');
} else if (Notification.permission === 'denied') {
alert('通知拒否されています');
} else if (Notification.permission === 'default') {
alert('通知可能か不明です');
}
リクエスト
意図的に許可のリクエストを行う場合はrequestPermissionを指定します。最初の通知の場合はブラウザから通知して良いかどうか確認されます。リクエストを行わず通知を行った場合は、ブラウザから確認されるので必ずしも必要というわけではなさそうです。
test.html
Notification.requestPermission(function(result) {
if (result === 'denied') {
alert('リクエスト結果：通知許可されませんでした');
} else if (result === 'default') {
alert('リクエスト結果：通知可能か不明です');
} else if (result === 'granted') {
alert('リクエスト結果：通知許可されました！！');
}
})
通知
Notification を行います
test.html
var n = new Notification("Hello World");
組み合わせ
チェックと通知を組み合わせてみました
notification.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Desktop Notification</title>
</head>
<body>
<script>
// Notification対応しているかどうか
if (window.Notification) {
alert('Notificationは有効です');
// Permissionの確認
if (Notification.permission === 'granted') {
// 許可されている場合はNotificationで通知
alert('通知許可されています');
var n = new Notification("Hello World");
} else if (Notification.permission === 'denied') {
alert('通知拒否されています');
} else if (Notification.permission === 'default') {
alert('通知可能か不明です');
// 許可が取れていない場合はNotificationの許可を取る
Notification.requestPermission(function(result) {
if (result === 'denied') {
alert('リクエスト結果：通知許可されませんでした');
} else if (result === 'default') {
alert('リクエスト結果：通知可能か不明です');
} else if (result === 'granted') {
alert('リクエスト結果：通知許可されました！！');
var n = new Notification("Hello World");
}
})
}
} else {
alert('Notificationは無効です');
}
</script>
</body>
</html>