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

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

コアポイント：

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

Web Push通知プロトコル

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

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

WebプッシュとWebSocketsの比較

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

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

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

技術(shù)的な概念

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

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

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

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

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

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

ゲームラウンド

ゲームを4ラウンドに分割し、各ラウンドの概念と目標(biāo)を説明します。次に、アプリに各ターンを?qū)g裝する方法を示します。

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

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

このラウンドを?qū)g裝するには、次のコードをWebアプリケーションに追加する必要があります。

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

if ('serviceWorker' in navigator) {
  if ('PushManager' in window) {
    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
      // 狀態(tài)初始化
    }).catch(function() {
      // 錯誤處理
    });
  } else {
    // 錯誤處理
  }
} else {
  // 錯誤處理
}

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

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

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

概要

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

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

以上がWebアプリケーションのプッシュ通知を構(gòu)築する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。