Web通知APIを使用して動的なメッセージを表示します

Web通知API：ブラウザの制限からWebサイト通知を作成

お気に入りのWebサイトやアプリケーションからのモバイル通知に慣れていますが、ブラウザが通知を直接プッシュすることがより一般的になっています。たとえば、Facebookは、新しい友達リクエストを持っている場合、またはあなたが参加している投稿に通知を送信する場合に通知を送信します。

フロントエンド開発者として、ブラウザ通知を使用して多くの情報フローを処理しないWebサイトを提供する方法に興味があります。ウェブサイトへの訪問者の関心に基づいて、関連するブラウザ通知を追加する方法は？

この記事では、新しいバージョンのフレームワークがリリースされるたびに訪問者に警告するために、Concise CSS Webサイトに通知システムを実装する方法を示します。 LocalStorageおよびブラウザ通知APIを使用してこれを実現する方法を示します。

通知API Basics

まず、訪問者のブラウザが通知をサポートするかどうかを判断する必要があります。このチュートリアルの作業のほとんどは、通知オブジェクトによって行われます。

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

現在、ブラウザが通知をサポートするかどうかのみを決定します。確認した後、訪問者に許可リクエストを表示できるかどうかを知る必要があります。

許可プロパティの出力を変数に保存します。許可が付与または拒否された場合、何も返されません。以前にアクセス許可を要求したことがない場合は、RequestPermissionメソッドを使用してアクセス許可を要求します。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

ブラウザの上記の画像に似たプロンプトが表示されるはずです。

アクセス許可を要求したので、許可が許可されている場合に通知が表示されるようにコードを変更しましょう。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

単純ですが、効果的な機能があります。

ここでは、許可が付与された後に通知を表示するために、RequestPerimess（）メソッドの約束ベースの構文を使用します。通知コンストラクターを使用して通知を表示します。このコンストラクターは、通知タイトル用とオプション用の2つの引数を取ります。渡すことができるオプションの完全なリストについては、ドキュメントリンクを参照してください。

ストレージフレームワークバージョン

上記の

localStorageを使用して、通知の表示を支援します。 LocalStorageの使用は、JavaScriptに永続的なクライアント情報を保存するための推奨方法です。 Frameworkの現在のバージョン（1.0.0など）を含むConciseversionと呼ばれるLocalStorageキーを作成します。その後、このキーを使用して、フレームワークの新しいバージョンを確認できます。

フレームワークの最新バージョンを使用して、Sciseversionキーの値を更新する方法は？誰かがウェブサイトにアクセスしたときに現在のバージョンを設定する方法が必要です。また、新しいバージョンがリリースされたときに値を更新する必要があります。 Sciseversion Valueが変更されるたびに、訪問者に通知を表示して、フレームワークの新しいバージョンを発表する必要があります。

ページに非表示の要素を追加することにより、この問題を解決します。この要素には、JS-Currentversionという名前のクラスがあり、フレームワークの現在のバージョンのみが含まれます。この要素はDOMに存在するため、JavaScriptを使用して簡単に対話できます。

この隠し要素は、Sciseversionキーにフレームワークバージョンを保存するために使用されます。また、この要素を使用して、フレームワークの新しいバージョンが公開されたらキーを更新します。

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

少量のCSSを使用してこの要素を隠すことができます：

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

注：この要素には意味のあるものが含まれていないため、スクリーンリーダーはこの要素にアクセスする必要はありません。そのため、Aria-HiddenプロパティをTrueに設定し、表示を使用します。要素を非表示にする方法としてはありません。非表示のコンテンツの詳細については、このWebAimの記事を参照してください。

この要素を取得し、JavaScriptで対話することができます。作成したばかりの隠し要素内にテキストを返す関数を記述する必要があります。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

この関数は、TextContentプロパティを使用して、.js-Currentversion要素の内容を保存します。別の変数を追加して、Sciseversion LocalStorageキーの内容を保存しましょう。

<span class="js-currentVersion" aria-hidden="true">3.4.0</span>

これで、変数内のフレームワークの最新バージョンがあり、LocalStorageキーを変数に保存します。ロジックを追加して、利用可能なフレームワークの新しいバージョンがあるかどうかを判断する時が来ました。

まず、Sciseversionキーが存在するかどうかを確認します。存在しない場合は、これが最初の訪問である可能性があるため、ユーザーに通知を表示します。キーが存在する場合、その値（currentversion変数に保存）が現在のバージョンの値（最新のバージョン変数に保存）よりも大きいかどうかを確認します。フレームワークの最新バージョンが訪問者が見た最後のバージョンよりも大きい場合、新しいバージョンがリリースされたことがわかります。

注：Semver-Compareライブラリを使用して、2つのバージョン文字列の比較を処理します。

これを知った後、訪問者に通知を表示し、Sciseversionキーを適切に更新します。

この関数を使用するには、次の許可コードを変更する必要があります。

[aria-hidden="true"] {
  display: none;
  visibility: hidden;
}

これにより、ユーザーが許可を許可した場合、または許可を付与した場合に通知を表示できます。

function checkVersion() {
  var latestVersion = document.querySelector(".js-currentVersion").textContent;
}

show notification

これまでのところ、多くの情報が含まれていない簡単な通知のみをユーザーに表示しています。ブラウザ通知を動的に作成し、通知のさまざまな側面を制御できる関数を記述しましょう。

この関数には、ボディテキスト、アイコン、タイトル、およびオプションのリンクと通知期間のパラメーターがあります。内部的には、通知ボディテキストとアイコンを保存するオプションオブジェクトを作成します。また、通知オブジェクトの新しいインスタンスを作成し、通知タイトルとオプションオブジェクトを渡します。

次に、通知にリンクしたい場合は、オンクリックハンドラーを追加します。 Settimeout（）を使用して、指定された時間後に通知をオフにします。この関数が呼び出されたときに時間が指定されていない場合、デフォルトの5秒が使用されます。

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

ここで、Chastversion（）を変更して、より多くの情報の通知をユーザーに表示しましょう。

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

DisplayNotification関数を使用して、通知への説明、画像、タイトル、リンクを提供します。

注：ES6テンプレートリテラルを使用して、式をテキストに埋め込みます。

完全なコードとテスト

このチュートリアルに記載されている完全なコードです。

（Codepenリンクまたはフルコードブ​​ロックをここに挿入する必要があります）

このコードを実行すると、ブラウザで次の通知が生成されるはずです。

テストを実行するには、ブラウザの通知許可に精通する必要があります。 Google Chrome、Safari、Firefox、Microsoft Edgeの通知の管理に関する簡単な参照を以下に示します。さらに、開発者コンソールを使用して、LocalStorage値を削除および変更して簡単にテストすることに精通している必要があります。

スクリプトを1回実行し、JS-Currentversion HTML要素の値をスクリプトに変更して、違いを確認することで、例をテストできます。同じバージョンで再実行して、不必要な通知を受け取らないことを確認することもできます。

さらに一歩進んでください

これは、動的なブラウザ通知を持っているために必要なすべてです！より柔軟なブラウザ通知を探している場合は、サービスワーカーAPIを理解することをお勧めします。サービスワーカーを使用して、通知をプッシュするために応答することができ、ユーザーは現在ウェブサイトにアクセスしているかどうかに関係なく通知を受信できるため、よりタイムリーな更新が可能になります。

ブラウザ通知API FAQ

ブラウザ通知APIとは何ですか？それはどのように機能しますか？

ブラウザ通知APIを使用すると、Webアプリケーションがユーザーにシステム通知を表示できます。これらの通知は、モバイルデバイスのプッシュ通知に似ており、Webページが焦点を合わせていなくても表示できます。 APIは、通知を表示するためにユーザー許可を要求することにより機能します。許可が得られると、Webアプリケーションは通知オブジェクトを使用して通知を作成および表示できます。

通知を表示する許可を要求する方法は？

許可を要求するには、notification.requestpermission（）メソッドを使用できます。この方法では、ユーザーに通知を表示できるかどうかを尋ねるダイアログボックスを表示します。この方法は、「許可」ステータスに解決する約束を返します。これは、「付与」、「拒否」、または「デフォルト」を解決できます。

通知を作成および表示する方法は？

許可が取得されると、通知コンストラクターを使用して通知を作成および表示できます。このコンストラクターは、通知のタイトルとオプションオブジェクトの2つのパラメーターを受け入れます。オプションオブジェクトには、本体（通知のテキスト）、アイコン（表示するアイコン）、タグ（通知の識別子）などのプロパティを含めることができます。

Webページに焦点が合っていなくても通知を表示できますか？

はい、ブラウザ通知APIを使用すると、Webページに焦点が合っていなくても通知を表示できます。これは、アプリケーションを積極的に使用していなくても、重要なイベントをユーザーに通知する必要があるWebアプリケーションにとって非常に便利です。

通知のクリックイベントを処理する方法は？

通知オブジェクトにイベントリスナーを追加することにより、通知のクリックイベントを処理できます。ユーザーが通知をクリックすると、イベントリスナー機能が呼び出されます。

プログラムで通知をオフにすることはできますか？

はい、通知オブジェクトのclose（）メソッドを呼び出すことにより、プログラムで通知を閉じることができます。これは、しばらくして通知を自動的にオフにする場合に役立ちます。

すべてのブラウザはブラウザ通知をサポートしていますか？

ほとんどの最新のブラウザは、Chrome、Firefox、Safari、Edgeなどのブラウザ通知をサポートしています。ただし、サポートはこれらのブラウザの異なるバージョン間で異なる場合があり、一部の古いブラウザは通知をまったくサポートしていない場合があります。

通知の外観をカスタマイズできますか？

通知の外観は、オペレーティングシステムとブラウザに大きく依存します。ただし、タイトル、ボディテキスト、アイコンなどの通知コンストラクターに渡されたオプションオブジェクトを使用して、通知の特定の側面をカスタマイズできます。

ユーザーが通知を表示する許可を与えているかどうかを確認する方法は？

通知.permissionプロパティにアクセスして、現在の許可ステータスを確認できます。このプロパティは、ユーザーが許可を拒否した場合、「拒否された」場合は「付与」されます。

ワーカースクリプトでブラウザ通知APIを使用できますか？

はい、ブラウザ通知APIはワーカースクリプトで使用できます。これにより、メインページが焦点を合わせていなくても、バックグラウンドタスクから通知を表示できます。

以上がWeb通知APIを使用して動的なメッセージを表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。