Webアプリケーションのプッシュ通知を構築する方法

Webアプリケーションへのユーザーの参加の改善：Webプッシュ通知の詳細な説明

この記事では、ネイティブアプリケーションと同様の通知関数を追加することにより、既存のWebアプリケーションのユーザーエクスペリエンスを改善する方法について説明します。 Webプッシュ通知の概念を詳細に説明し、現在の仕様とブラウザーのサポートをカバーする既存のWebアプリケーションにこの機能を統合する方法を徐々に示します。 この記事はもともとSenchaで公開されました。 SitePointをサポートしてくれたパートナーに感謝します。

コアポイント：

• 基本を理解する：Webプッシュ通知により、Webアプリケーションは、アプリケーションが非アクティブであっても、ユーザーデバイスにメッセージを直接送信できます。
• サービスワーカーの登録：サービスワーカーはプッシュメッセージの処理を担当し、ページがロードされたときに登録し、適切なブラウザサポートチェックを実施する必要があります。
• ユーザーのサブスクリプションプロセス：プッシュ通知の受信の重要な手順には、ユーザーの同意の取得、ブラウザーを介したプッシュサブスクリプションの生成、このデータの送信が含まれます。
• プッシュメッセージの送信：プッシュメッセージは暗号化され、http postリクエストを介して送信する必要があり、TTLや緊急性などのパラメーターを使用して配信の詳細を管理します。
• メッセージとユーザーの相互作用の処理：サービスワーカーは、受信メッセージを処理し、通知のクリックやクローズなどのユーザーインタラクションを管理します。
• unsubscriptionおよびsubscriptionの有効期限：ユーザーがサブスクリプションを解除し、有効期限や更新などのサブスクリプションライフサイクルイベントを処理する方法を提供します。

Web Push通知プロトコル

Webプッシュ通知プロトコルは比較的新しいものです。 Webアプリケーションにネイティブアプリケーションのような機能を提供し、Webアプリケーションがアクティブでないか、ブラウザにロードされていなくても、いつでもサーバーからプッシュメッセージを受信できるようにします。これにより、いつでもユーザーと対話することができ、アプリを使用していなくてもアプリに戻るように促します。

Webプッシュ通知の商業的価値は明らかです。ユーザーのエンゲージメントを増加させる可能性があり、アプリケーションの全体的な値を増やすことができます。各プラットフォームのネイティブアプリケーションを開発するのではなく、すべてのプラットフォームの単一のWebアプリケーションの開発に近づいています。

WebプッシュとWebSocketsの比較

技術的な詳細に入る前に、まずWebプッシュとWebSocketsの違いを理解しましょう。まず、いくつかの一般的なものがあります。WebプッシュとWebSocketsは、Webアプリケーションとアプリケーションサーバー間のリアルタイム通信を可能にし、アプリケーションサーバーからWebアプリケーションにリアルタイムデータと更新を送信するように設計されています。

次の違いは次のとおりです

• websocketsWebページが読み込まれてアクティブである場合にのみ使用します。 Webプッシュ通知は、アプリがアクティブ、非アクティブ、またはアンロードされたとき、ブラウザがアクティブでない場合、または閉じていない場合を含め、いつでも使用できます。
• Webプッシュを使用して送信されたデータは暗号化されている必要があり、各メッセージのサイズは限られています（4kb以下）。送信されるメッセージの数にも制限があります（正確な制限値はブラウザに依存します）。一部のブラウザ（Chromeなど）は、メッセージを受信するたびにユーザーに通知を表示する必要がある場合があります。 WebSocketsを使用する場合、これらの制限はありません。任意のサイズの暗号化されていないメッセージを送信して、必要に応じてそれらを処理できます。
• 一般的なルールは次のとおりです。ユーザーがアプリケーションと対話する場合、Webアプリケーションに通常のデータ更新を使用して、ユーザーが使用しているかどうかに関係なく、すぐに受信する必要がある重要な緊急メッセージを送信します。当時のアプリケーション。

技術的な概念

このテクノロジーの技術的な詳細を見てみましょう。特別なルール、参加者を備えたゲームを使用し、これらの詳細を説明します。最初に「Web Push通知」と呼ばれるこのゲームの参加者について説明します：

• webアプリケーション
• サービスワーカー
• ブラウザ
• Application Server
• プッシュサーバー

Push Serverは、ブラウザメーカーによって実装されたサービスです。アプリケーションサーバーからブラウザにメッセージを配信する責任があります。

ゲームデモWebプッシュ通知を使用

ゲームを使用して、アプリにWebプッシュ通知を追加する方法を示します。このゲームのルールは、World Wide Web Allianceとインターネットエンジニアリングタスクフォースによって提供される複数の仕様によって定義されます。

ブラウザとそれに関連するWebアプリケーションまたはサービスワーカーとの間の通信は、プッシュAPI仕様で説明されています。
• さまざまな種類の通知と通知処理の表示については、通知API仕様で説明されています。
• アプリケーションサーバーとプッシュサーバー間の通信は、Web Pushプロトコル仕様で定義されています。
また、プッシュメッセージの暗号化とアプリケーションサーバー認証を記述するいくつかの追加の仕様があり、アプリケーションサーバーがユーザーにメッセージを送信できることを証明できるようにします。

ゲームラウンド

ゲームを4ラウンドに分割し、各ラウンドの概念と目標を説明します。次に、アプリに各ターンを実装する方法を示します。

ラウンド1：サービスワーカー登録Webプッシュ通知は、サービスワーカーがプッシュメッセージを処理する必要があるため、最初のラウンドはサービスワーカーを登録することです。あなたのWebアプリケーションとブラウザのみがこのラウンドに参加します。このラウンドは、ページが読み込まれているときに発生します。

Webアプリケーションは、サービスワーカーが正常に登録されている場合、サービスワーカーを登録するリクエストを送信します。

このラウンドを実装するには、次のコードをWebアプリケーションに追加する必要があります。

まず、ブラウザがサービスワーカーをサポートしているかどうかを確認する必要があります。次に、ブラウザがWebプッシュ通知をサポートしているかどうかを確認する必要があります。ブラウザのサポートが増加すると、これら2つのチェックを追加することは常に良い考えです。

<code class="language-javascript">if ('serviceWorker' in navigator) {
  if ('PushManager' in window) {
    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
      // 状态初始化
    }).catch(function() {
      // 错误处理
    });
  } else {
    // 错误处理
  }
} else {
  // 错误处理
}</code>

両方がサポートされている場合、サービスワーカーに登録します。これを行うには、navigator.serviceworker.register（）メソッドを呼び出し、サービスワーカーファイルのパスをパラメーターとして渡します。このステップの後、ブラウザはファイルをダウンロードし、サービスワーカー環境で実行します。サービスワーカーファイルは標準のJavaScriptファイルですが、ブラウザはプッシュを含むサービスワーカーAPIに「アクセス」します。

すべてがうまくいかずエラーがない場合、Register（）によって返される約束は解析されます。何らかのタイプのエラーが発生した場合、約束は拒否されます。この状況と、ブラウザがサービスワーカーをサポートしない状況に対処する必要があります。登録（）の場合、次のターンで使用されるサービスワーカーレジストレーションオブジェクトを返します。

（後続のラウンドの指示は、コードの例、写真、説明など、上記の構造に類似した構造に従い、情報の整合性と読みやすさを維持するために元のテキストを書き直して磨きます。スペースの制限により、ここですべてのラウンドの詳細な説明は拡張されていません

概要

Webプッシュ通知テクノロジーは、広く使用できるようになりました。緊急かつ関連する通知を提供することにより、ユーザーとより効果的にコミュニケーションを取り、ユーザーを関与させるのに役立ち、一般的にWebアプリケーションを改善します。 アプリで使用してみてください。 Sencha CMD 6.5は、次のプログレッシブWebアプリケーション機能をサポートしています。ホーム画面バナーに追加し、サービスワーカーのキャッシュを使用します。詳細については、Sencha CMDドキュメントを読むか、Sencha Ext JSの無料トライアルをダウンロードしてください。SenchaCMDを含む115を超えるコンポーネントとツールにアクセスできます。

（FAQSセクションでは、同様の書き換えと研磨も必要であり、ここでは拡張されません。）

以上がWebアプリケーションのプッシュ通知を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。