ホームページ > 記事 > ウェブフロントエンド > JavaScriptによるWebプッシュ通知の仕組みを詳しく解説

JavaScriptによるWebプッシュ通知の仕組みを詳しく解説

coldplay.xixi転載: 2020-12-15 17:15:513709ブラウズ

javascriptWebプッシュ通知の仕組みを紹介するコラム

おすすめ(無料): #javascript

プッシュ通知はモバイルデバイスで非常に一般的です。 Web 側では、プッシュ通知の機能に対する開発者の高い需要にもかかわらず、いくつかの理由によりプッシュ通知が Web に導入されたのは比較的遅かったです。

はじめに

Web プッシュ通知を使用すると、Web アプリケーションを更新する必要があるときに更新メッセージを受信するかどうかをユーザーが選択できます。その目的は、ユーザーベースの注意を再び引き付けることです。情報は通常、ユーザーにとって興味深いものであり、重要なリアルタイムのコンテンツです。

この場合に Service Worker を使用する理由は、Service Worker がバックグラウンドで動作するためです。これは、ユーザーが通知自体を操作したときにのみコードが実行されることを意味するため、プッシュ通知に役立ちます。

プッシュと通知

プッシュと通知には独自の API

通知 — これは、ユーザーに情報を表示する Web アプリケーション内の Service Worker またはスクリプトのアクションです。

Push(Push)

implementation

Push 通常 3 つのステップ:

UI —プッシュされたユーザーをサブスクライブするために必要なクライアントロジック。これは、ユーザーがメッセージをプッシュするために自分自身を登録できるようにするために、Web アプリケーション UI に必要な JavaScript ロジックです。
プッシュ通知の送信 — ユーザーのデバイスへのプッシュメッセージをトリガーする API 呼び出しをサーバーに実装します。
プッシュメッセージを受け入れる — ブラウザに到着したプッシュメッセージを処理します。

より詳細なプロセスについては次に説明します。

ブラウザサポートの検出

まず、現在のブラウザがプッシュメッセージをサポートしているかどうかを確認する必要があります。プッシュメッセージがサポートされているかどうかは、次の 2 つの簡単なチェックで判断できます。

Check

navigator

Checkwindow
オブジェクトのオブジェクト コードは次のとおりです。

Service Worker の登録

JavaScriptによるWebプッシュ通知の仕組みを詳しく解説ブラウザがこの機能をサポートしている場合、次のステップは Service Worker を登録することです。

Service Worker の登録方法については、前の記事「JavaScript の仕組み: Service Worker のライフサイクルと使用シナリオ」で説明しています。

リクエスト権限

Service Worker が登録されたら、ユーザーのサブスクライブを開始できます。これを行うには、ユーザーにプッシュメッセージを送信するためのユーザーの許可が必要です。

権限を取得する API は比較的シンプルですが、API がコールバックから Promise を返すように変更されたことが欠点です。これにより問題が発生します。現在のブラウザがどのバージョンの API を実装しているかわからないため、次のように両方のバージョンを同時に実装して処理する必要があります。 #call

Notification.requestpermission()

次のプロンプトがブラウザに表示されます:

JavaScriptによるWebプッシュ通知の仕組みを詳しく解説権限が付与、クローズ、またはブロックされると、対応する 1 つの文字列を受け取ります:

granted

、default、または

denied

。 JavaScriptによるWebプッシュ通知の仕組みを詳しく解説

ユーザーが

ブロック ボタンをクリックした場合、ユーザーが許可ステータスを変更して手動で 許可を「却下」するまで、Web アプリケーションはユーザーの許可を再度要求できなくなることに注意してください。 アプリケーションの権限。このオプションは設定パネルに表示されません。 PushManager を使用してユーザーをサブスクライブする

Service Worker を登録して権限を取得したら、サービスの登録時に

registration.pushManager.subscribe() を呼び出してユーザーをサブスクライブできます。労働者。 コードスニペット全体は次のようになります (Service Worker の登録を含む):

##registration.pushManager.subscribe(options) 受け入れるoptions

必須パラメータとオプションのパラメータを含むオブジェクト:

userVisibleOnly: 返されたプッシュサブスクリプションがユーザーに表示されるメッセージにのみ使用されることを示すブール値。
applicationServerKey: プッシュサーバーがクライアントアプリケーションにメッセージを送信するために使用する公開キー。この値は、P-256 曲線に実装された楕円曲線デジタル署名 (ECDSA) を使用して、アプリケーションサーバーによって生成された署名キーペアの一部です。 DOMString または ArrayBuffer を指定できます。

サーバーは アプリケーションサーバーキー のペアを生成する必要があります。これらのキーは VAPID キーとも呼ばれ、サーバー固有です。これらは公開鍵と秘密鍵のペアです。秘密キーは端末に秘密に保存され、公開キーはクライアントと交換されます。これらのキーを使用すると、プッシュサービスは、どのアプリケーションサーバーが特定のユーザーにサブスクライブされているかを認識し、そのユーザーのプッシュメッセージをトリガーしたサーバーが同じサーバーであることを確認できます。

アプリケーションの秘密鍵と公開鍵のペアを作成する必要があるのは 1 回だけです。1 つの方法は https://web-push-codelab.glit... にアクセスすることです。

ユーザーをサブスクライブするとき、ブラウザーは applicationServerKey (公開キー) をプッシュサービスに渡します。これは、プッシュサービスがアプリケーションの公開キーをユーザーの PushSubscription にバインドできることを意味します。 。

プロセスは大まかに次のようなものです:

Web アプリケーションをロードした後、subscribe() メソッドを呼び出してサーバーキーを渡します。
ブラウザはプッシュサービスに対してネットワークリクエストを行い、エンドポイントを生成し、そのエンドポイントをキーに関連付けて、そのエンドポイントをブラウザに返します。
ブラウザは、subscribe() の promise を返すことによって取得された PushSubscription オブジェクトにこのエンドポイントを追加します。

その後、メッセージをプッシュする場合は常に、アプリケーションサーバーの秘密キーで署名された情報を含む Authorization ヘッダー を作成する必要があります。プッシュサービスは、プッシュメッセージの送信リクエストを受信すると、その特定のエンドポイントにリンクされている公開キーを検索してメッセージヘッダーを検証します (ステップ 2)。

PushSubscription オブジェクト

PushSubscription このオブジェクトには、ユーザーのデバイスにプッシュメッセージを送信するために必要なすべての情報が含まれています。

{
  "endpoint": "https://domain.pushservice.com/some-id",
  "keys": {
    "p256dh":
"BIPUL12DLfytvTajnryr3PJdAgXS3HGMlLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WArAPIxr4gK0_dQds4yiI=",
    "auth":"FPssMOQPmLmXWmdSTdbKVw=="
  }
}

endpoint: プッシュメッセージとポストリクエストをトリガーするためのプッシュサービスの URL。
keys: このオブジェクトには、プッシュメッセージ経由で送信されるメッセージデータの暗号化に使用される値が含まれています。

ユーザーが購読され、PushSubscription オブジェクトを取得したら、それをサーバーに送信する必要があります。サーバー上でデータベースへのサブスクリプションを保存し、今後はそれを使用してこのユーザーにプッシュメッセージを送信します。

JavaScriptによるWebプッシュ通知の仕組みを詳しく解説

プッシュメッセージの送信

ユーザーにプッシュメッセージを送信する場合、最初に必要なのはプッシュサービスです。 API 呼び出しを通じて、今送信する必要があるデータ、メッセージの送信先、およびメッセージの送信方法に関する標準をサーバーに伝えます。通常、この API 呼び出しはサーバー上で行われます。

プッシュサービス

プッシュサービスはリクエストを受信し、リクエストを検証して、対応するブラウザにプッシュメッセージを送信します。

プッシュサービスはお客様が管理するものではなく、サードパーティのサービスであることに注意してください。サーバーは、API を通じてプッシュサービスと通信するサーバーです。プッシュサービスの例としては、Google の FCM があります。

プッシュサービスは、面倒な作業をすべて処理します。たとえば、ブラウザがオフラインの場合、プッシュサービスは、対応するメッセージを送信する前にメッセージをキューに入れ、ブラウザが再びオンラインになるのを待ちます。

各ブラウザは必要なプッシュサービスを使用できますが、これは開発者の制御の範囲を超えています。ただし、すべてのプッシュサービスには同じ API があるため、実装に問題が生じることはありません。

プッシュメッセージリクエストを処理する URL を取得するには、

PushSubscription オブジェクトに格納されているエンドポイントの値を確認する必要があります。

プッシュサービス API

プッシュサービス API は、ユーザーにメッセージを送信する方法を提供します。 API は Web プロトコルであり、サービスをプッシュするための API 呼び出しを行う方法を定義する

IETF 標準です。

プッシュメッセージを使用して送信されるデータは暗号化する必要があります。こうすることで、プッシュサービスが送信中のデータを閲覧できないようにすることができます。どのプッシュサービスを使用するかはブラウザによって決定されるため、これは重要です (信頼されていない、安全性が十分でないサービスが使用されている可能性があります)。

プッシュメッセージごとに、次の指示を与えることもできます:

TTL — 定义消息在删除和未发送之前应排队多长时间。
优先级 — 定义每个消息的优先级，推送服务只发送高优先级的消息，确保用户因为一些突发情况关机或者断电等。
主题 — 为推送消息提供一个主题名称，该名称将用相同的主题替换挂起的消息，这样，一旦设备处于活动状态，用户就不会收到过时的信息。

JavaScriptによるWebプッシュ通知の仕組みを詳しく解説

浏览器中的推送事件

一旦按照上面的解释将消息发送到推送服务，该消息将处于挂起状态，直到发生以下情况之一:

设备上线
消息由于 TTL 而在队列上过期

当推送服务传递消息时，浏览器将接收它，解密它，并在的 Service Worker 中分派一个 push 事件。这里最重要的是，即使 Web 页面没有打开，浏览器也可以执行你的 Service Worker。流程如下:

推送消息到达浏览器，浏览器解密它
浏览器唤醒 Service Worker
push 事件被分发给 Service Worker

设置推送事件监听器的代码应该与用 JavaScript 编写的任何其他事件监听器类似：

self.addEventListener(&#39;push&#39;, function(event) {
  if (event.data) {
    console.log(&#39;This push event has data: &#39;, event.data.text());
  } else {
    console.log(&#39;This push event has no data.&#39;);
  }
});

需要了解 Service Worker 的一点是，你没有 Service Worker 代码运行时长的控制权。浏览器决定何时将其唤醒以及何时终止它。

在 Service Worker 中，event.waitUntil(promise)，告诉浏览器在该promse 未完成之前工作将一直进行中，如果它希望完成该工作，它不应该终止 Sercice Worker。

以下是一个处理 push 事件的例子:

self.addEventListener(&#39;push&#39;, function(event) {
  var promise = self.registration.showNotification(&#39;Push notification!&#39;);

  event.waitUntil(promise);
});

调用 self.registration.showNotification() 将向用户显示一个通知，并返回一个 promise，该 promise 在显示通知后将执行 resolve 方法。

showNotification(title, options) 方法可以根据需要进行可视化调整，title 参数是一个字符串，而参数 options 是一个对象，内容如下:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "dir": "<String of &#39;auto&#39; | &#39;ltr&#39; | &#39;rtl&#39;>",

  "//": "Behavioural Options",
  "tag": "<String>",
  "data": "<Anything>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "silent": "<Boolean>",

  "//": "Both Visual & Behavioural Options",
  "actions": "<Array of Strings>",

  "//": "Information Option. No visual affect.",
  "timestamp": "<Long>"
}

可以了解更多的细节，每个选项在这里做什么- https://developer.mozilla.org...

当有紧急、重要和时间敏感的信息需要与用户分享时，推送通知是吸引用户注意力的好方法。

例如，我们在 SessionStack 计划利用推送通知让我们的用户知道他们的产品何时出现崩溃、问题或异常。这将让我们的用户立即知道发生了什么错误。然后，他们可以将问题作为视频回放，并利用我们的库收集的数据(如DOM更改、用户交互、网络请求、未处理的异常和调试消息)查看发生在最终用户身上的所有事情。

以上がJavaScriptによるWebプッシュ通知の仕組みを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript 字符串 Event 对象事件 default dom promise 数据库 https ui

声明：

この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：jqueryでimg要素のsrc属性を変更する方法次の記事：jqueryでimg要素のsrc属性を変更する方法

続きを見る

JavaScriptによるWebプッシュ通知の仕組みを詳しく解説

javascriptWebプッシュ通知の仕組みを紹介するコラム

Service Worker の登録方法については、前の記事「JavaScript の仕組み: Service Worker のライフ サイクルと使用シナリオ」で説明しています。

PushSubscription オブジェクト

プッシュ メッセージの送信

プッシュ サービス

浏览器中的推送事件

関連記事

Service Worker の登録方法については、前の記事「JavaScript の仕組み: Service Worker のライフサイクルと使用シナリオ」で説明しています。

プッシュメッセージの送信

プッシュサービス