HTML5によるメッセージ通知の利用（Web Notification）

HTML5に関する記事をたくさん書いてきましたが、いつも思うのは、高度なAPIはすべてスルーしなければいけないということです。システムを理解し、より高いレベルから考えることで、より少ない労力でより多くのことを成し遂げられるようになることが重要なのです。

最初の外観

まず、一番簡単な例として chrome デベロッパーツールにコードを貼り付けて、以下のように直接実行します。

new Notification('Jartto\'s message notification', {
  dir: 'rtl',
  body: 'This is a message, sent via Web Notification, as a test! ,
  icon: 'https://raw.githubusercontent.com/chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'
})

メッセージの通知がないのですが、どうしたのでしょうか？心配しないで、読んでみてください。

II. ユーザー認証

上記の例に従って、実行しましたが、メッセージプッシュボックスの引き上げに成功しませんでした。この時点で、そのユーザーが認証されているかどうかを確認し、コンソールに入力する必要があります。 > Notification.permission

すぐにわかるのですが、元のユーザー権限は default と同じで、ユーザーの選択がわからないため、ブラウザは denied というのは、拒否されたときも同じです。

III. 互換性

これらを参照 HTML5 の高度な API は、常にいくつかの懸念があります。サンプルは使いやすくていいのですが、本当に互換性があるのか、考えてみる価値はあります。

ご覧の通り、基本的にすべてのブラウザが対応していますが、例外として iOS Safari と Opera Mini ということで、モバイルアプリは注意が必要です。

IV. APIドキュメント

まずは、5分もあれば十分に簡単なAPIを体系的に見ていきましょう。

使用例

let notification = new Notification(title, options)

パラメータです。

title: 確実に表示される通知のタイトル

options: 通知を設定することができるオブジェクトです。以下の属性が含まれる。

• dir : テキストの方向。この値は auto (自動)、ltr (左から右)、または rtl (右から左) です。
• lang: 通知で使用される言語を指定します。この文字列は、BCP 47の言語タグ文書で有効でなければなりません。
• の本文です。通知で表示される追加文字列
• タグを使用します。必要に応じて通知を更新、置換、または削除するために、通知にIDを与えます。
• icon: 通知のアイコンを表示するために使用される画像URLです。

属性です。

Notification.permission。通知表示の現在の許可状況を示す文字列。可能な値は以下の通りです。

• denied (ユーザーが通知の表示を拒否した)。
• granted (ユーザーが通知の表示を許可した),
• default (ユーザーの選択がわからないため、ブラウザの動作は denied は拒否されたときと同じです)

メソッドです。

• Notification.onclick。ユーザーが通知をクリックするたびに発生するクリックイベントの処理を処理します。
• Notification.onshow。通知が表示されたときにトリガーされる show イベントの処理を行います。
• Notification.onerror。通知がエラーに遭遇するたびにトリガーされる、エラー イベントの処理を行います。
• Notification.onclose: ユーザーが通知を閉じたときにトリガーされるcloseイベントの処理を行います。
• Notification.requestPermission()：現在のページがユーザーに通知の表示許可を要求したいときに使用されます。
• Notification.close()：通知を閉じるために使用されます。

Notification.requestPermission このメソッドは、ユーザーアクション（onclick イベントなど）によってのみ呼び出すことができ、それ以外の方法では呼び出すことはできません。

V. 完全な例

上記のAPIに従って、完全な例を書いてみましょう。

function notifyMe(){
  // Check if the browser supports it first
  if (! ("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Check if the user agrees to receive notifications
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise we need to get permission from the user
  else if (Notification.permission ! == 'denied') {
    Notification.requestPermission(function (permission){
      // If the user agrees, you can send them a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }


  // Finally, if it executes here, it means that the user has refused to authorize the notification in question
  // Out of respect, we shouldn't bother them anymore
}

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。