[HTML5] Desktopにメッセージを送るNotification

[HTML5] Desktopにメッセージを送るNotification

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

こんにちは。ハンナです。

最近注目を集めているチームコミュニケーションツールの【Slack】のウェブバージョンを見るとプログラムを設置したこともないのにBrowserではなくDesktopにアラームが表示されていることを見たことがありますよね。

それは、なぜできるのか?
理由はHTML5のNotificationを利用しているからです。

HTML5のNotification

Desktopにアラームを権限要求するNotificationと、Desktopにアラーム送るNotificationを利用すれば簡単にできます。

下記のDemoを見てください。
https://jsfiddle.net/kh0gvpu0/5/embedded/result/

とりあえず下のようなHTMLを作成します。

image06


メッセージ内容:

Desktop Notificationの権限要請はNotification.requestPermission(callback)のMethodで処理ができます。
Desktopアラーム権限要請のボタンクリックしてブラウザのラベルでユーザが確認します。

アラーム使用許可の結果はcallbackのparameterに送ります。
parameterの内容は許可が【granted】、拒絶は【denied】、それと【default】があります。

$('#premissionBtn').on("click", function () {

             if("Notification" in window){

                Notification.requestPermission(function (result) {

                    if (result == 'denied') {
                            console.log('Desktop Notificationの権限要請を拒絶しました。')
                        return;
                    }else if (result == 'default') {
                            console.log('Desktop Notificationの権限要請がキャンセルなりました。')
                        return;
                    }else {
                            $(this).attr('disabled', 'disabled');
                            $('#msg').removeAttr('disabled');
                            $('#notificationBtn').removeAttr('disabled');
                        return;
                    }
                }); 
            }else{
                console.log('このブラウザはNoticationを支援していません。')
            }
        });

if(“Notification” in window)でNotification支援するブラウザを確認します。
サポート・ブラウザであれば下図のようにNotificationの許可を選択するアラートが出ます。

image07

$('#notificationBtn').on("click", function () {
            
    var msg =  $('#msg').val();
    //メッセージがある場合だけ
    if (msg !== null && msg.length > 0) {
        
        var options = {
            body: msg,
icon: "http://www.showcase-tv.com/favicon.ico"
        }
        var title = "Showcase-Tvアラーム!";

        //desktopアラーム要請 
        var notification = new Notification(title, options);
        
        //アラーム5秒後、
        setTimeout(function () {
            //アラーム消し
            notification.close();
        },5000);
   }
        
});

var notification = new Notification(title, options)を利用してメッセージを送ることができます。
一番のparameterはアラームタイトル、二番のparameterはoptionになります。

option中にはbodyと言うメッセージとアラームイメージのiconと色々ありますが、このPropertiesはMDNのNotificationを参考してください。

image04

アラームが来ました。

Notificationでユーザにメッセージとかお知らせなどができて、いろいろと応用できるのではないかと思います。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ