ホームページ ウェブフロントエンド H5 チュートリアル HTML5 を使用して Web 通知を作成するチュートリアル 通知 API_html5 チュートリアルのヒント

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

May 16, 2016 pm 03:46 PM
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. を使用してここに通知を表示します
  4. });

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) が書いた

デモ

をご覧いただけます。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

HTML のネストされたテーブル

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTMLの表の境界線

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML 左マージン

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルのレイアウト

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML 内のテキストの移動

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリスト

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML の onclick ボタン

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML入力プレースホルダー

See all articles