おすすめ(無料): #javascript
プッシュ通知はモバイル デバイスで非常に一般的です。 Web 側では、プッシュ通知の機能に対する開発者の高い需要にもかかわらず、いくつかの理由によりプッシュ通知が Web に導入されたのは比較的遅かったです。 はじめにWeb プッシュ通知を使用すると、Web アプリケーションを更新する必要があるときに更新メッセージを受信するかどうかをユーザーが選択できます。その目的は、ユーザー ベースの注意を再び引き付けることです。情報は通常、ユーザーにとって興味深いものであり、重要なリアルタイムのコンテンツです。 この場合に Service Worker を使用する理由は、Service Worker がバックグラウンドで動作するためです。これは、ユーザーが通知自体を操作したときにのみコードが実行されることを意味するため、プッシュ通知に役立ちます。 プッシュと通知プッシュと通知には独自の APIPush 通常 3 つのステップ:
Check
navigator
window コードは次のとおりです。
ブラウザがこの機能をサポートしている場合、次のステップは Service Worker を登録することです。
リクエスト権限
Service Worker が登録されたら、ユーザーのサブスクライブを開始できます。これを行うには、ユーザーにプッシュ メッセージを送信するためのユーザーの許可が必要です。
次のプロンプトがブラウザに表示されます:
権限が付与、クローズ、またはブロックされると、対応する 1 つの文字列を受け取ります:
、default、または
。 
ブロック ボタンをクリックした場合、ユーザーが許可ステータスを変更して手動で 許可を「却下」するまで、Web アプリケーションはユーザーの許可を再度要求できなくなることに注意してください。 アプリケーションの権限。このオプションは設定パネルに表示されません。 PushManager を使用してユーザーをサブスクライブする
registration.pushManager.subscribe() を呼び出してユーザーをサブスクライブできます。労働者。 コード スニペット全体は次のようになります (Service Worker の登録を含む):
##registration.pushManager.subscribe(options) 受け入れるoptions
DOMString または ArrayBuffer を指定できます。 サーバーは アプリケーション サーバー キー のペアを生成する必要があります。これらのキーは VAPID キーとも呼ばれ、サーバー固有です。これらは公開鍵と秘密鍵のペアです。秘密キーは端末に秘密に保存され、公開キーはクライアントと交換されます。これらのキーを使用すると、プッシュ サービスは、どのアプリケーション サーバーが特定のユーザーにサブスクライブされているかを認識し、そのユーザーのプッシュ メッセージをトリガーしたサーバーが同じサーバーであることを確認できます。
アプリケーションの秘密鍵と公開鍵のペアを作成する必要があるのは 1 回だけです。1 つの方法は https://web-push-codelab.glit... にアクセスすることです。
ユーザーをサブスクライブするとき、ブラウザーは applicationServerKey (公開キー) をプッシュ サービスに渡します。これは、プッシュ サービスがアプリケーションの公開キーをユーザーの PushSubscription にバインドできることを意味します。 。
プロセスは大まかに次のようなものです:
subscribe() メソッドを呼び出してサーバー キーを渡します。 subscribe() の promise を返すことによって取得された PushSubscription オブジェクトにこのエンドポイントを追加します。 その後、メッセージをプッシュする場合は常に、アプリケーション サーバーの秘密キーで署名された情報を含む Authorization ヘッダー を作成する必要があります。プッシュ サービスは、プッシュ メッセージの送信リクエストを受信すると、その特定のエンドポイントにリンクされている公開キーを検索してメッセージ ヘッダーを検証します (ステップ 2)。
PushSubscription このオブジェクトには、ユーザーのデバイスにプッシュ メッセージを送信するために必要なすべての情報が含まれています。
{
"endpoint": "https://domain.pushservice.com/some-id",
"keys": {
"p256dh":
"BIPUL12DLfytvTajnryr3PJdAgXS3HGMlLqndGcJGabyhHheJYlNGCeXl1dn18gSJ1WArAPIxr4gK0_dQds4yiI=",
"auth":"FPssMOQPmLmXWmdSTdbKVw=="
}
}ユーザーが購読され、PushSubscription オブジェクトを取得したら、それをサーバーに送信する必要があります。サーバー上でデータベースへのサブスクリプションを保存し、今後はそれを使用してこのユーザーにプッシュ メッセージを送信します。
ユーザーにプッシュ メッセージを送信する場合、最初に必要なのはプッシュ サービスです。 API 呼び出しを通じて、今送信する必要があるデータ、メッセージの送信先、およびメッセージの送信方法に関する標準をサーバーに伝えます。通常、この API 呼び出しはサーバー上で行われます。
プッシュ サービスはリクエストを受信し、リクエストを検証して、対応するブラウザにプッシュ メッセージを送信します。
プッシュ サービスはお客様が管理するものではなく、サードパーティのサービスであることに注意してください。サーバーは、API を通じてプッシュ サービスと通信するサーバーです。プッシュ サービスの例としては、Google の FCM があります。
PushSubscription オブジェクトに格納されているエンドポイントの値を確認する必要があります。
IETF 標準です。
プッシュ メッセージを使用して送信されるデータは暗号化する必要があります。こうすることで、プッシュ サービスが送信中のデータを閲覧できないようにすることができます。どのプッシュ サービスを使用するかはブラウザによって決定されるため、これは重要です (信頼されていない、安全性が十分でないサービスが使用されている可能性があります)。 プッシュ メッセージごとに、次の指示を与えることもできます:
一旦按照上面的解释将消息发送到推送服务，该消息将处于挂起状态，直到发生以下情况之一:
当推送服务传递消息时，浏览器将接收它，解密它，并在的 Service Worker 中分派一个 push 事件。这里最重要的是，即使 Web 页面没有打开，浏览器也可以执行你的 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 'auto' | 'ltr' | 'rtl'>",
"//": "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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
