HTML5 が通知 API デスクトップ通知機能を実装_html5 チュートリアル スキル

HTML5 デスクトップ通知が必要な理由
従来のデスクトップ通知は div として記述し、ページの右下隅に配置すると自動的にポップアップし、メッセージを取得できます。ポーリングやその他の方法でユーザーにプッシュします。この方法の欠点の 1 つは、JD.com を使用して買い物をするときに、Renren にニュースがプッシュされていることを知りませんが、現在のページを Renren に切り替えるまでニュースがプッシュされていることを知るまで待たなければならないことです。 。このメッセージ プッシュの方法はページの生存に基づいていますが、そのような戦略が必要です。どのページを見ていても、メッセージがある限り、それは私にプッシュされるべきです。これが webkitNotification が望んでいる問題です。解決する。通知によって生成されたメッセージは特定のページには添付されず、ブラウザーにのみ添付されます。
デスクトップ通知を生成する通常のプロセス
まず、デスクトップ通知がどのように生成されるかを見てみましょう:
1. ブラウザーが通知をサポートしているかどうかを確認します。
2. ブラウザの通知権限を確認します(通知が許可されているかどうか)
3. 権限が不足している場合は、ブラウザの通知権限を取得します
4. メッセージ通知を表示します
>注：最初の点については、若干の説明が必要です。通知はまだ標準化されていないため、現時点では chrome19 と safari6 のみをサポートしています。Firefox26 もサポートしているという情報がありますが、私の Firefox27 のテストの結果は次のとおりです。それはサポートできません。
HTML5 のデスクトップ通知については誰もがよく知っていると思います。一般的なアプリケーションには Web バージョンの WeChat が含まれますが、使用する前にデスクトップ通知機能を設定する必要があります。
クライアントプログラムを使用してこのような機能を実装することは難しくありません。従来の Web バージョンのデスクトップ通知の場合、div を作成してページの右下隅に配置すると、自動的にポップアップし、ポーリングやその他の方法でメッセージを取得してユーザーにプッシュできます。この方法の欠点の 1 つは、淘宝網を使用して買い物をするときに、Weibo にメッセージがプッシュされていることに気づかないことですが、メッセージがプッシュされていることがわかるには、現在のページを Sina Weibo に切り替えるまで待たなければならないことです。私に。このメッセージ プッシュの方法はページの生存に基づいていますが、そのような戦略が必要です。どのページを見ていても、メッセージがある限り、それは私にプッシュされるべきです。これが webkitNotification が望んでいる問題です。解決する。
通知はまだ標準化されていないため、w3cschool などの Web サイトでは学習できません。ただし、現在の主流ブラウザのほとんどは通知をサポートしています。 html5 のデスクトップ通知レンダリングは次のとおりです:

コードは次のとおりです: