html5デスクトップ通知デモと詳細(xì)な説明

みなさん、こんにちは！今日は、簡(jiǎn)単なデモンストレーションを通じて、HTML5と少量のJavaScriptコードを使用してデスクトップ通知を?qū)g裝する方法を紹介します。 githubプロジェクト

html5デスクトップリマインダー背景情報(bào)

通知により、ユーザーは、電子メールの配信など、Webページのコンテキストの外で思い出させることができます。

通知を表示、キューに置き、交換できます。メッセージ本文の左側(cè)に表示される左側(cè)のメッセージ本文にアイコンを追加することもできます。また、複數(shù)のインスタンス化にtagメンバーを使用することもできます（このケースの結(jié)果は通知です。2番目の通知は、最初の通知を同じtagに置き換えます）。 [W3C Web通知APIの詳細(xì)]（W3C Web通知APIリンクをここに挿入する必要があります）。

私のテストによると、一度に最大4つのリマインダーしか表示できず、キューに登録されます。また、ハイパーリンクを入れることはできません（これは素晴らしい機(jī)能になります）。デスクトップリマインダーの外観を以下に示します。

これらの機(jī)能のほとんどと同様に、セキュリティ上の理由で承認(rèn)するように求められます。

スクリプト

スクリプトは非常にシンプルで、タイトルとメッセージを含むデスクトップリマインダーを生成するためにのみwebkitNotificationsを使用します。

/*
   @Copyright: jQuery4u 2012
   @Author: Sam Deering
   @Script: html5desktopalert.js
*/
(function($,W,D,undefined)
{
    W.JQUERY4U = W.JQUERY4U || {};

    W.JQUERY4U.HTML5DESKTOPALERT = {

        name: "jQuery HTML5 DESKTOP ALERT",

        namespace: "W.JQUERY4U.HTML5DESKTOPALERT",

        settings:
        {
           //turn into plugin? ...
        },

        cache:
        {
            //runtime data, dom elements etc...
        },

        init: function(settings)
        {
            this.settings = $.extend({}, this.settings, settings);
            this.cache.notifications = window.webkitNotifications;
            this.testBrowserSupport();
            this.setupEventHandlers();
        },

        setupEventHandlers: function()
        {
           var _this = this;
           $('#alert-me-btn').bind('click', function(e)
           {
               _this.checkPermission("desktopAlert");
           });
        },

        //tests HTML5 browser support and permission request
        testBrowserSupport: function()
        {
            var $browserMsg = $('#browser-support-msg');
            if(this.cache.notifications)
            {
                $browserMsg.html("Yay! Notifications are supported on this browser.").parent().addClass('alert-success');
            }
            else
            {
                $browserMsg.html("Sorry. Notifications aren't supported on this browser.").parent().addClass('alert-error');
            }
        },

        checkPermission: function(callback)
        {
            var _this = this;
            if (this.cache.notifications.checkPermission() == 0)
            {
                _this[callback]();
            }
            else
            {
                this.cache.notifications.requestPermission(function()
                {
                    if (this.cache.notifications.checkPermission() == 0) _this[callback]();
                });
            }
        },

        desktopAlert: function()
        {
            console.log('sending alert...');
            var notification = window.webkitNotifications.createNotification("", $('#da-title').val(), $('#da-message').val());
            notification.show();
        }
    }

    $(D).ready( function()
    {
        //start up the form events
        W.JQUERY4U.HTML5DESKTOPALERT.init();
    });


})(jQuery,window,document);

HTML5デスクトップ通知FAQ（FAQS）

HTML5デスクトップ通知のアクセス許可をリクエストする方法は？

html5デスクトップ通知へのアクセス許可を要求するには、Notification.requestPermission()メソッドを使用する必要があります。この方法により、ユーザーはWebページが通知を送信することを許可または防止するように促します。このメソッドは、ユーザーアクション（ボタンをクリックするなど）によってトリガーされるようにトリガーする必要があります。

HTML5デスクトップ通知の外観をカスタマイズできますか？

はい、HTML5デスクトップ通知の外観をカスタマイズできます。タイトル、ボディテキスト、アイコン、さらにはモバイルデバイスの振動(dòng)モードを設(shè)定できます。ただし、カスタマイズレベルはブラウザとオペレーティングシステムによって異なる場(chǎng)合があります。

HTML5デスクトップ通知はすべてのブラウザによってサポートされていますか？

いいえ、すべてのブラウザがHTML5デスクトップ通知をサポートしているわけではありません。 Chrome、Firefox、Safariなどのほとんどの最新のブラウザはそれらをサポートしていますが、インターネットエクスプローラーはサポートしていません。この機(jī)能の互換性を異なるブラウザと一緒に確認(rèn)することをお?jiǎng)幛幛筏蓼埂?

HTML5デスクトップ通知をオフにする方法は？

通知インスタンスのclose()メソッドを呼び出すことにより、プログラムでHTML5デスクトップ通知を閉じることができます。または、ほとんどのデスクトップ通知には、ユーザーがクリックできる近接ボタンがあります。

ブラウザが非アクティブなときにHTML5デスクトップ通知を送信できますか？

はい、ブラウザが非アクティブまたは最小化されている場(chǎng)合でも、HTML5デスクトップ通知を送信できます。ただし、これには、より高度なトピックであるサービスワーカーとプッシュAPIを使用する必要があります。

HTML5デスクトップ通知のクリックイベントを処理する方法は？

通知インスタンスの「クリック」イベントにイベントリスナーを追加することにより、HTML5デスクトップ通知のクリックイベントを処理できます。イベントハンドラーでは、通知をクリックすると何が起こるかを定義できます。

モバイルブラウザでHTML5デスクトップ通知を使用できますか？

はい、モバイルブラウザでHTML5デスクトップ通知を使用できます。ただし、通知の動(dòng)作と外観は、オペレーティングシステムとブラウザによって異なる場(chǎng)合があります。

HTML5デスクトップ通知を使用する際の制限または制限は何ですか？

はい、HTML5デスクトップ通知を使用することにはいくつかの制限があります。たとえば、ユーザーは、通知を表示するためにWebページの許可を付與する必要があります。さらに、一部のブラウザでは、スパムを防ぐために通知の頻度を制限する場(chǎng)合があります。

WebワーカーでHTML5デスクトップ通知を使用できますか？

はい、WebワーカーでHTML5デスクトップ通知を使用できます。ただし、通知コンストラクターの代わりにself.registration.showNotification()メソッドを使用する必要があります。

ユーザーがHTML5デスクトップ通知に許可を許可しているかどうかを確認(rèn)する方法は？

Notification.permissionの値をチェックして、ユーザーがHTML5デスクトップ通知に許可を付與しているかどうかを確認(rèn)できます。 「付與」されている場(chǎng)合、ユーザーは許可を付與しています。 「拒否」されている場(chǎng)合、ユーザーは通知をブロックしました。 「デフォルト」の場(chǎng)合、ユーザーは選択していません。

記事の畫(huà)像リンクは保持されていることに注意してくださいが、これらのリンクが有効であることを確認(rèn)する必要があります。 さらに、一部のリンクテキストを?qū)g際のリンクアドレスに置き換える必要があります。

以上がHTML5デスクトップ通知の例の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。