HTML5を使用したデスクトップリマインダー機能の実装コード例-H5 チュートリアル-php.cn

HTML5を使用したデスクトップリマインダー機能の実装コード例

零下一度

リリース： 2017-04-22 14:37:54

オリジナル

2670 人が閲覧しました

デスクトップリマインダーの紹介

デスクトップ通知機能を使用すると、ブラウザが最小化されている場合でもメッセージをユーザーに通知できます。これは WebIM との最も自然な組み合わせです。ただし、現在デスクトップ通知機能をサポートしているブラウザは Chrome 5 以降のみです。実際の使用プロセスでは、ユーザーへの通知機能の干渉を最小限に抑え、通知機能の発生を最小限に抑える必要があります。

複数のメッセージを受信する場合、次の点だけを確認してください。通知機能が表示されます。
2. ユーザーが IM が表示されるページにいる場合 (ページがフォーカス状態の場合)、通知は表示されません。
3.ページがフォーカス状態にある限り、IM で複数のページを開くには、通知は表示されません
4. ユーザーが通知フローティングレイヤーをクリックして特定のチャットウィンドウを見つけられるようにする方法
5. さらに、解決する必要がある利便性の問題もあります

デスクトップリマインダー通知API

window.webkitNotifications

requestPermission 通信許可のリクエスト
checkPermission通信許可を確認する
createNotification コミュニケーションを作成します
show 通知を表示

コード

<!DOCTYPE HTML>
<html>
<head
<meta charset="gbk">  
<title>Creating OS notifications in HTML5</title>
</head>
<body>
<input type="button" value="验证授权" onclick="init();" />
<input type="button" value="弹出消息" onclick="notify();" />

    <script type="text/javascript">
        const miao = 5;

        function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }

        function notify() {
            var icon = "logo.png";
            var title = "Hello World";
            var body =  "You Are My World (5秒后自动关闭)";

            if (window.webkitNotifications) {
                if (window.webkitNotifications.checkPermission() == 0) {
                    var popup = window.webkitNotifications.createNotification(icon, title, body);
					popup.ondisplay = function(event) {
                        setTimeout(function() {
                            event.currentTarget.cancel();
                        }, miao * 1000);
                    }
                    popup.show();
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>

</body>
</html>

ログイン後にコピー

を実現するには、HTML5 を学習する必要がある学生は、php 中国語 Web サイト html5 ビデオチュートリアルに注目してください。無料で視聴できる！

以上がHTML5を使用したデスクトップリマインダー機能の実装コード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。