Help us understand the problem. What is going on with this article?

JavaScriptでデスクトップ通知(HTML5 Notification)

More than 3 years have passed since last update.

デスクトップ通知ができる「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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした