JavaScript, Notification APIを使ってトースト通知をする

はじめに

トースト通知（バナー通知）を使ってみたい。
C#でやってみたいが、少し調べてみたら面倒そうな印象を受けた（やるならUWPか・・・）。
他に試せるとしたらC#以外に触れている言語だとJavaScriptだ。
初めてのJavaScriptで少しトースト通知に触れた記憶があったのであらためて調べて試した。

動作環境

Web Browser
- Google Chrome
  - 81.0.4044.113(Official Build)(64bit)

開発環境

Editor
- Visual Studio Code
  - 1.44.1

トースト通知を表示するには？

Notificationオブジェクトを利用する。 ~~MDNを見れば良いと思うんだ。~~

Notification APIは使えるか？

    if(window.Notification) {
        console.log("OK");
    }
    else {
        console.log("NG");
    }

通知の設定はどうなっているか？

    const permission = Notification.permission;

    if(permission === "default") {
        console.log("通知未設定");
    }
    else if(permission === "granted") {
        console.log("通知を許可した。");
    }
    else if(permission === "denied") {
        console.log("通知を拒否した。");
    }

まずは通知の設定を確認しdefaultやdeniedならNotification.requestPermissionメソッドを使い、許可を得る。
許可を得ればgrantedになるので、あとはNotificationオブジェクトのインスタンスを作成すればトースト通知が使える。

通知の設定をするには？

    Notification.requestPermission((result) => {
        if(permission === "default") {
            console.log("通知未設定");
        }
        else if(permission === "granted") {
            console.log("通知を許可した。");
        }
        else if(permission === "denied") {
            console.log("通知を拒否した。");
        }
    });

「許可」ボタンを押すとgrantedとなり、トースト通知が使える。
「ブロック」ボタンを押すとdenied、「×」ボタンを押すとdefaultとなりトースト通知は使えない。
↓設定ダイアログ
f:id:HayaUp:20200418011038j:plain

トースト通知を表示する１、タイトルのみ

    const title         = "Good day!";
    const notification  = new Notification(title);

↓こうなる
f:id:HayaUp:20200418011146j:plain

トースト通知を表示する２、本文（サブタイトルっぽい）を追加

    const title         = "Good day!";
    const options       = { body : "It's a wonderful day!?" };
    const notification  = new Notification(title, options);

↓こうなる
f:id:HayaUp:20200418011212j:plain

トースト通知を表示する３、アイコンを追加

    const title         = "Good day!";
    const options       = {
        body : "It's a wonderful day!?",
        icon : "../Image/Icon/onsen.png"
    };
    const notification  = new Notification(title, options);

↓こうなる
f:id:HayaUp:20200418011225p:plain