HTML5 を使用して Web 通知を作成するチュートリアル 通知 API_html5 チュートリアルのヒント

Web バージョンの Gmail を使用している場合、新しいメールを受信するたびに、対応するプロンプト ボックスが画面の右下隅にポップアップ表示されます。 HTML5が提供するNotification APIを使えば、このような機能も簡単に実装できます。
ブラウザがサポートしていることを確認してください

ブラウザの特定のバージョンで開発している場合は、使用できない API で貴重な時間を無駄にしないように、最初に caniuse にアクセスしてブラウザの通知 API のサポートを確認することをお勧めします。
開始方法

JavaScript コードコンテンツをクリップボードにコピーします

1. var notification=new Notice('通知タイトル',{
2. 本文:'あなたのメッセージ'
3. });

上記のコードは、単純な通知バーを構築します。コンストラクターの最初のパラメーターは通知バーのタイトルを設定し、2 番目のパラメーターは次のプロパティを設定できるオプション オブジェクトです:

• body: 通知バーの本文の内容を設定します。
  dir: 通知バーのテキストの表示方向を定義します。auto (自動)、ltr (左から右)、または rtl (右から左) に設定できます。
  lang: 通知バーのテキストに使用される言語を宣言します。 (注釈: この属性の値は、BCP 47 言語タグに属している必要があります。)
  タグ: 通知バーの取得、置換、または削除を容易にするために、通知バーに ID 値を割り当てます。
  アイコン：通知バーアイコンとして使用する画像のURLを設定します

許可を得る

通知バーを表示する前に、ユーザーに許可を申請する必要があります。ユーザーの許可がある場合にのみ、通知バーを画面に表示できます。許可申請の処理では以下の戻り値が返されます:

• デフォルト: ユーザーの処理結果が不明であるため、ブラウザーはユーザーが通知バーのポップアップを拒否したものとみなします。 (「ブラウザ: 通知を要求しなかったため、通知しません」)
  拒否: ユーザーは通知バーのポップアップを拒否しました。 (「ユーザー: 画面から離れてスクロールしてください」)
  許可: ユーザーは通知バーのポップアップを許可します。 (「ユーザー: ようこそ! この通知機能を使用することに興奮しています。」)
  
  

JavaScript コードコンテンツをクリップボードにコピーします

1. Notification.requestPermission(関数(許可){
2. //コンストラクター
を使用してここに通知を表示します
3. });

HTML を使用してボタンを作成する

XML/HTML コードコンテンツをクリップボードにコピー

1. <ボタン id="ボタン" >通知を読むボタン>

CSS を忘れないでください

CSS コードコンテンツをクリップボードにコピーします

1. #button{
2. フォントサイズ:1.1rem;   
3. 幅:200px;   
4. 高さ:60px;   
5. ボーダー:2px ソリッド #df7813;   
6. ボーダー-半径:20px/50px;   
7. 背景:#fff;   
8. 色:#df7813;   
9. }
10. #button:hover{
11. 背景:#df7813;   
12. カラー:#fff;   
13. トランジション:0.4 秒 簡単。   
14. }

全部の Javascript代码如下：

JavaScript コード复制コンテンツ到剪贴板

1. document.addEventListener('DOMContentLoaded',function(){
2. document.getElementById('ボタン').addEventListener('クリック',関数(){
3. if(! ('通知' in window) ){
4. alert('申し訳ありませんが、あなたのブラウザは通知を表示するのに十分ではありません');   
5. return;   
6. }
7. Notification.requestPermission(関数(許可){
8. var config = {
9. body:'ボタンをクリックしていただきありがとうございます。 気に入っていただければ幸いです。'、
10. icon:'https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png' 、
11. dir:'auto'
12. };   
13. var notification = new Notification(「ここにいます!」,config);   
14. });   
15. });   
16. });   

この段階のコードから、ブラウザが通知 API をサポートしていない場合、ポイント選択時に「兄弟、抱っこしてください。」という警告が表示される可能性があることがわかります。あなたのブラウザは通知を表示するのに十分ではありません）。その場合、ユーザーの承認を取得した後、画面中に独自の通知が表示される可能性があります。

これは何を意味しますか?

この問題に対して、setTimeout 関数を使用して一定の時間を設定し、通知を有効にすることができます。

JavaScript コード复制コンテンツ到剪贴板

1. var config = {
2. body:「今日はあまりにも多くの人が私に注目しました。あなたも同じことをしましたね。」 ありがとうございます、
3. icon:'icon.png'、
4. dir:'auto'
5. }
6. var notification = new Notification("ここにいます!",config);   
7. setTimeout(function(){
8. notification.close(); //通知を閉じます
9. },5000);   

まだ理解されていない場合は、通知 API をさらに深く理解することが望ましく、以下のセクションを参照してください:

MDN

通知 API に関する Paul lund のチュートリアル CodePen 上でデモを見る

は、CodePen 上で Prakash (@imprakash) が書いた

デモ

をご覧いただけます。