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

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

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

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

通知API Basics

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

(function() {
  if ("Notification" in window) {
    // 代碼在此處
  }
})();

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

許可プロパティの出力を変數(shù)に保存します。許可が付與または拒否された場合、何も返されません。以前にアクセス許可を要求したことがない場合は、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（）メソッドの約束ベースの構(gòu)文を使用します。通知コンストラクターを使用して通知を表示します。このコンストラクターは、通知タイトル用とオプション用の2つの引數(shù)を取ります。渡すことができるオプションの完全なリストについては、ドキュメントリンクを參照してください。

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

上記の

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

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

ページに非表示の要素を追加することにより、この問題を解決します。この要素には、JS-Currentversionという名前のクラスがあり、フレームワークの現(xiàn)在のバージョンのみが含まれます。この要素は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に設(shè)定し、表示を使用します。要素を非表示にする方法としてはありません。非表示のコンテンツの詳細(xì)については、このWebAimの記事を參照してください。

この要素を取得し、JavaScriptで対話することができます。作成したばかりの隠し要素內(nèi)にテキストを返す関數(shù)を記述する必要があります。

(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!");
      });
  }
})();

この関數(shù)は、TextContentプロパティを使用して、.js-Currentversion要素の內(nèi)容を保存します。別の変數(shù)を追加して、Sciseversion LocalStorageキーの內(nèi)容を保存しましょう。

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

これで、変數(shù)內(nèi)のフレームワークの最新バージョンがあり、LocalStorageキーを変數(shù)に保存します。ロジックを追加して、利用可能なフレームワークの新しいバージョンがあるかどうかを判斷する時が來ました。

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

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

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

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

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

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

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

show notification

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

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

次に、通知にリンクしたい場合は、オンクリックハンドラーを追加します。 Settimeout（）を使用して、指定された時間後に通知をオフにします。この関數(shù)が呼び出されたときに時間が指定されていない場合、デフォルトの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関數(shù)を使用して、通知への説明、畫像、タイトル、リンクを提供します。

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

完全なコードとテスト

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

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

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

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

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

さらに一歩進(jìn)んでください

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

ブラウザ通知API FAQ

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

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

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

許可を要求するには、notification.requestpermission（）メソッドを使用できます。この方法では、ユーザーに通知を表示できるかどうかを?qū)い亭毳昆ぅⅴ恁哎堀氓工虮硎兢筏蓼?。この方法は、「許可」ステータスに解決する約束を返します。これは、「付與」、「拒否」、または「デフォルト」を解決できます。

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

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

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

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

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

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

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

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

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

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

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

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

ユーザーが通知を表示する許可を與えているかどうかを確認(rèn)する方法は？

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

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

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

以上がWeb通知APIを使用して動的なメッセージを表示しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。