HTML 5デスクトップアラート機能の開発

7262 ワード
httml 5

デスクトップアラートの紹介
デスクトップ通知機能は、ブラウザがステータスを最小化してもユーザーにメッセージを通知できるようにします.これはWebIMと最も天然な結合です.ただし、現在Desktop Notification機能をサポートしているブラウザはChrome 5+のみです.実際に使用する過程で、できるだけ通知機能のユーザーに対する干渉を減らすべきで、通知機能の出現を最大限に減らすべきで、これは以下のいくつかの問題を解決する必要がある:
  • 1. 複数のメッセージを受信した場合、通知が1つしか表示されないことを確認します.
  • 2. ユーザがIMが表示されたページにある場合(ページがFocus状態にある)通知は表示されない.
  • 3. ユーザが複数のTabを使用して複数のIMが存在するページを開くと、1つのページがFocus状態にある限り通知は表示されない.
  • 4. ユーザに通知フローティングレイヤをクリックすることで、特定のチャットウィンドウ
    • にナビゲートする方法
  • 5.さらに、利便性の問題
    • を解決する必要がある.
    デスクトップアラートNotificationのAPI
    window.webkitNotifications
  • requestPermission要求通信許可
  • checkPermission通信許可
    • をチェック
  • createNotification作成通信
  • show表示通知
    • コード実装
     1 <!DOCTYPE HTML>

 2 <html>

 3 <head

 4 <meta charset="gbk">  

 5 <title>Creating OS notifications in HTML5</title>

 6 </head>

 7 <body>

 8 <input type="button" value="    " onclick="init();" />

 9 <input type="button" value="    " onclick="notify();" />

10 

11     <script type="text/javascript">

12         const miao = 5;

13 

14         function init() {

15             if (window.webkitNotifications) {

16                 window.webkitNotifications.requestPermission();

17             }

18         }

19 

20         function notify() {

21             var icon = "logo.png";

22             var title = "Hello World";

23             var body =  "You Are My World (5      )";

24 

25             if (window.webkitNotifications) {

26                 if (window.webkitNotifications.checkPermission() == 0) {

27                     var popup = window.webkitNotifications.createNotification(icon, title, body);

28                     popup.ondisplay = function(event) {

29                         setTimeout(function() {

30                             event.currentTarget.cancel();

31                         }, miao * 1000);

32                     }

33                     popup.show();

34                     popup.show();

35                 } else {

36                     window.webkitNotifications.requestPermission();

37                     return;

38                 }

39             }

40         }

41     </script>

42 

43 </body>

44 </html>

    HTML 5デスクトップアラート機能を開発Demo html5-desktop-notification.html(Chromeブラウザのみサポート)
    Beyond Compare 4失効処理
    impressマスク(PPT)フレームワーク