ホームページ > ウェブフロントエンド > jsチュートリアル > ユーザーがブラウザーメッセージのリマインダーを受信できるようにするにはどうすればよいですか?

ユーザーがブラウザーメッセージのリマインダーを受信できるようにするにはどうすればよいですか?

零下一度
リリース: 2017-06-26 11:46:36
オリジナル
3707 人が閲覧しました

ブラウザが最小化されている場合でも、ユーザーがタイムリーにメッセージリマインダーを受信できるようにするにはどうすればよいですか? この問題は、webRd として正面から取り組む必要があります。大きく 2 つのシナリオに分けられます。1 つはデスクトップ通知に似ており、もう 1 つは QQ リマインダーに似ています (システム タスク バーで点滅してハイライト表示されます)。別々に:

デスクトップリマインダー:

この H5 には強力な API があります。そう、それは通知です。聞いたことはありませんか?まず、これについて学習しましょう。これは非常に詳細です。簡単に言うと、IE9 以降をサポートする、Notification に基づく小さなクラス ライブラリについて説明します。 Safari6、Firefox、Chrome ;まあ、これはすべて私の先人の製品です。私は単なる実店舗です。ここに簡単なデモがあります:

ps: 練習にはどのような便利なクラス ライブラリですか?クラス ライブラリを使用する方が良いです。

<br>
ログイン後にコピー
function _Notification(title,option){
    var Notification = window.Notification || window.mozNotification || window.webkitNotification;
    Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);
    function creatNotification(title, option){
       var instance = new Notification(title, option);
        instance.onclick = function () {
            console.log('onclick');
        };
        instance.onerror = function () {
            console.log('onerror');
        };
        instance.onshow = function () {
            console.log('onshow');
        };
        instance.onclose = function () {
            console.log("close")
        }
    }
    function requestPermission(title, option){
        Notification.requestPermission(function(status) {
            status === "granted"?creatNotification(title, option):failNotification(title);
        });
    }
    function failNotification(title){
        var timer;
        return function(timer){
            var index = 0;
            clearInterval(timer);
            timer = setInterval(function() {
                if(index%2) {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【   】'+ title;
                }else {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【新消息】'+ title;
                }
                index++;
                if(index > 20) {
                    clearInterval(timer);
                }
            }, 500);
        }(timer);
    }
}
ログイン後にコピー
 <br>
ログイン後にコピー

タスクバーのリマインダー:

これは実際には問題ですが、著者はまだそれを研究していません。リマインダーが点滅しますが、ユーザーがポップアップ ウィンドウを禁止している状況は解決する必要があります。これは、[送信] からシミュレートできます。 || ブラウザーのバブリングを使用すると、ほとんどのインターセプト状況を解決できます。作成者が望んでいること; プロンプトの内容が常にポップアップ ウィンドウに表示されるため、ユーザーは混乱しやすいです。メモリがオーバーフローする可能性がありますが、脳が混乱していない限り、忘れてください。;

以上がユーザーがブラウザーメッセージのリマインダーを受信できるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート