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

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

おすすめ(無料): #javascript

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

はじめに

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

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

プッシュと通知

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

プッシュ — サーバーが Service Worker に情報を提供するときに呼び出されます。
• 通知 — これは、ユーザーに情報を表示する Web アプリケーション内の Service Worker またはスクリプトのアクションです。

Push(Push)

implementation

Push 通常 3 つのステップ:

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

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

ブラウザ サポートの検出

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

Check

navigator

オブジェクトのserviceWorker
1. Checkwindow
PushManager
2. オブジェクトのオブジェクト コードは次のとおりです。

Service Worker の登録

ブラウザがこの機能をサポートしている場合、次のステップは Service Worker を登録することです。

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

リクエスト権限

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

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

Notification.requestpermission()

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

権限が付与、クローズ、またはブロックされると、対応する 1 つの文字列を受け取ります:

granted

、default、または

denied

。

ユーザーが

ブロック ボタンをクリックした場合、ユーザーが許可ステータスを変更して手動で 許可を「却下」するまで、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 オブジェクトを取得したら、それをサーバーに送信する必要があります。サーバー上でデータベースへのサブスクリプションを保存し、今後はそれを使用してこのユーザーにプッシュ メッセージを送信します。

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

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

プッシュ サービス

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

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

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

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

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

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

プッシュ サービス API

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

IETF 標準です。

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

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

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

浏览器中的推送事件

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

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

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

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

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

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

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

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

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

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

  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 サイトの他の関連記事を参照してください。