Microsoft Edge で Web Notifications を試す

他のブラウザで実装済みの機能がやっと試せるようになりました。
Insider Build 14316 以前では動作しません。
また、動作を試す際はローカル環境では動作しないため、ローカルサーバーかサイトに置いて試す必要があります。

f:id:x67x6fx74x6f:20160413135305p:plain

動作

サイトが実行する Web Notifications に対して通知を許可するか否かを促すメッセージが表示されます。

f:id:x67x6fx74x6f:20160413135455p:plain

許可すると画面右下にアイコン、タイトル本文、実行されたドメインが書かれたものが、アプリの通知のように表示され、アクションセンターに列挙されます。

f:id:x67x6fx74x6f:20160413135343p:plain

他のブラウザの場合、通知が表示されると通知をクリックするか、JavaScript から止めるか、いくつかの他の通知が来ない限り表示は消えませんが、Edge の場合は一定時間で非表示となります。（今後変わる可能性があり）

準備

現状、アドレスバーに about:flags を入力しフラグを立てないと使えません。

サンプル

軽く動作させるサンプルです。いろいろ省いているので、詳しい設定は下にある MDN リンクを見てもらった方がよいです。

流れ

どこかで Notification.requestPermission を動かし、通知を許可するか否かを促すメッセージを表示させる
Notification.permission もしくは requestPermission の引数で通知許可の状態を調べる
許可(承諾：granted)されていれば、 Notification のコンストラクタへ情報入れて表示する
必要であれば通知の振る舞いを設定する

簡単な通知

// ユーザへの通知許可を促す
Notification.requestPermission()

function showNotify(){
    // ユーザが許可した場合は、通知を作成する
    if (Notification.permission === "granted") {
        new Notification("めっせーじを受信しました その壱")
    }
}

サンプル2

通知の際に振る舞いを設定する

こちらは requestPermission の中で通知を開始しています。

var n;

function showNotify(){
    // ユーザへの通知許可を促す
    Notification.requestPermission(function (permission) {
        console.log(permission)
        // ユーザが許可した場合は、通知を作成する
        if (permission === "granted") {

        // 通知開始
        n = new Notification("めっせーじを受信しました その弐",
                {
                    "icon": "http://www.skypeassets.com/i/common/images/icons/apple-touch-icon.png",
                    "body": "偽スカイプからのめっせーじ",
                })
            n.onshow = function()  { console.log("onshow")  }
            n.onclick = function() { console.log("onclick") }
            n.onerror = function() { console.log("onerror") }
            n.onclose = function() { console.log("onclose") }
        }
    })
}

function closeNotify(){
    // 通知を閉じる
    n.close();
}