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

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

WBOY

リリース： 2016-05-16 15:46:43

オリジナル

1728 人が閲覧しました

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

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

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

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

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

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

許可を得る

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

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

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

Notification.requestPermission(関数(許可){
//コンストラクター
});

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

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

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

CSS を忘れないでください

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

#button{
フォントサイズ:1.1rem;
幅:200px;
高さ:60px;
ボーダー:2px ソリッド #df7813;
ボーダー-半径:20px/50px;
背景:#fff;
色:#df7813;
}
#button:hover{
背景:#df7813;
カラー:#fff;
トランジション:0.4 秒簡単。
}

全部の Javascript代码如下：

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

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

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

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

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

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