HTML5デスクトップ通知の例-jsチュートリアル-php.cn

HTML5デスクトップ通知の例

Jennifer Aniston

リリース： 2025-02-24 10:34:13

オリジナル

752 人が閲覧しました

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

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

html5デスクトップリマインダー背景情報

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

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

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

HTML5 Desktop Notifications Example

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

HTML5 Desktop Notifications Example

スクリプト

スクリプトは非常にシンプルで、タイトルとメッセージを含むデスクトップリマインダーを生成するためにのみ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デスクトップ通知の外観をカスタマイズできます。タイトル、ボディテキスト、アイコン、さらにはモバイルデバイスの振動モードを設定できます。ただし、カスタマイズレベルはブラウザとオペレーティングシステムによって異なる場合があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記事の画像リンクは保持されていることに注意してくださいが、これらのリンクが有効であることを確認する必要があります。さらに、一部のリンクテキストを実際のリンクアドレスに置き換える必要があります。

以上がHTML5デスクトップ通知の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。