読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Microsoft Edge で Web Notifications を試す

開発 Microsoft Edge JavaScript

他のブラウザで実装済みの機能がやっと試せるようになりました。
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 リンクを見てもらった方がよいです。

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

 

簡単な通知
// ユーザへの通知許可を促す
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();
}

サンプル2

 

更に詳しく知りたい

MDN
Web Notifications を使用する

developer.mozilla.org

 

Microsoft Edge Platform Documentation
Web Notifications API

https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/device/web-notifications-api/

スポンサーリンク