HTML5 を使用して Web 通知を作成するチュートリアル 通知 API_html5 チュートリアルのヒント
May 16, 2016 pm 03:46 PM
api
html5
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);
- });
- });
- });
これは何を意味しますか?
この問題に対して、setTimeout 関数を使用して一定の時間を設定し、通知を有効にすることができます。
JavaScript コード复制コンテンツ到剪贴板
まだ理解されていない場合は、通知 API をさらに深く理解することが望ましく、以下のセクションを参照してください:
- var config = {
- body:「今日はあまりにも多くの人が私に注目しました。あなたも同じことをしましたね。」 ありがとうございます、
- icon:'icon.png'、
- dir:'auto'
- }
- var notification = new Notification("ここにいます!",config);
- setTimeout(function(){
- notification.close(); //通知を閉じます
- },5000);
MDN
通知 API に関する Paul lund のチュートリアル
CodePen 上でデモを見る
は、CodePen 上で Prakash (@imprakash) が書いた
デモをご覧いただけます。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7285
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1206
29

