はい、HTML5 Webサイトは最新のWeb APIを介してプッシュ通知を?qū)g裝できますが、JavaScript、サービスワーカー、バックエンドサーバーからの協(xié)力が必要です。特定の手順は次のとおりです。1。ブラウザのサポートステータスを確認(rèn)し、サービスワーカーとプッシュマネージャーがいることを確認(rèn)します。 2。プッシュイベントを管理するためにサービスワーカーを登録します。 3.通知を介してユーザー認(rèn)証を要求します。RequestPermission（）; 4. Webプッシュライブラリを使用して、身元識別のためにVAPIDキーを生成します。 5。ユーザーの承認(rèn)後、PushManager.Subscribeメソッドを使用してプッシュサービスをサブスクライブし、サブスクリプション情報をバックエンドに送信します。 6.サービスワーカーのプッシュイベントを聞いて、shownotificationに電話して通知を表示します。 7.バックエンドは、WebプッシュライブラリとVAPIDキーを使用して、ユーザーにプッシュメッセージを送信します。

HTML5のプッシュ通知は、HTMLだけで直接実裝できるものではありません。JavaScript、サービスワーカー、バックエンドサーバーの組み合わせが必要です。ただし、はい、最新のWeb APIを使用してWebサイトでプッシュ通知を有効にすることができます。

段階的にそれを行う方法は次のとおりです。

1.ブラウザのサポートを確認(rèn)します

コードに飛び込む前に、ユーザーのブラウザがプッシュ通知をサポートしていることを確認(rèn)してください。 Chrome、Firefox、Edge、Safariなどの最新のブラウザのほとんどは、それらをサポートしていますが、一部のモバイルブラウザー（特にiOS）にはサポートが限られています。

このようなサポートを確認(rèn)できます。

 if（ 'serviceworker' in Navigator && 'pushmanager' in Window）{
  //サポートされています！
} それ以外 {
  console.log（ 'このブラウザでサポートされていない通知をプッシュします。'）;
}

留意してください：

• Safariには、Apple Push通知サービス（APNS）を介してプッシュを処理する獨自の方法があります
• iOS Safariは、インストールされているWebアプリのプッシュ通知のみを許可します（ホーム畫面に追加）

2。サービスワーカーを登録します

プッシュ通知は、サービスワーカーに依存しています。これは、ネットワーク要求を管理し、アプリとネットワークの間のプロキシとして機(jī)能するバックグラウンドスクリプトです。

sw.jsというファイルを作成し、メインJavaScriptファイルに登録してください。

 navigator.serviceworker.register（ '/sw.js'）
  .then（function（登録）{
    console.log（ 'scopeに登録されたサービスワーカー：'、登録.scope）;
  }）
  .catch（function（err）{
    console.log（ 'サービスワーカー登録が失敗しました：'、err）;
  }）;

sw.jsの內(nèi)側(cè)では、今のところ空にしたままにしてください。プッシュイベントの処理には後で使用します。

3.ユーザーから許可を要求します

通知を送信する前に、ユーザーに許可を求める必要があります。これはNotification.requestPermission()メソッドを使用して行われます。

 notification.requestpermission（）。then（function（result）{
  if（result === '付與'）{
    console.log（ '許可許可！'）;
    //次に、通知をプッシュするように登録します
  } それ以外 {
    console.log（ '許可が拒否または卻下された。'）;
  }
}）;

重要：これを自動トリガーしないでください - ユーザーにボタンクリックまたは同様のアクションでそれを開始させます。そうでなければ、彼らは習(xí)慣からそれをブロックするかもしれません。

4. VAPIDキーを生成します

プッシュ通知を使用するには、VAPIDとして知られるキーのセットが必要です（自発的アプリケーションサーバー識別）。これらは、サブスクライバーのときにアプリケーションを識別するために使用されます。

node.jsのWebプッシュなどのライブラリを使用してこれらのキーを生成できます。

 NPMインストールWeb-Push

その後、実行：

 const webpush = require（ 'web-push'）;
const vacuumkeys = webpush.generevevapidkeys（）;
console.log（vapidkeys）;

パブリックキーとプライベートキーを保存します - サーバー上のユーザーとプライベートのユーザーを購読するときに公開キーを使用します。

5.ユーザーを購読します

サービスワーカーが登録され、許可が付與されたら、ユーザーを購読して通知をプッシュできます。

 navigator.serviceworker.ready.then（function（登録）{
  return registration.pushmanager.subscribe（{
    uservisiblely：本當(dāng)、
    applicationServerkey：urlbase64touint8array（publicvapidkey）
  }）;
}）;

Base64エンコードされた公開キーを変換するには、このヘルパー関數(shù)が必要です。

 function urlbase64touint8array（base64string）{
  const padding = '='。repeat（（4 -base64string.length％4）％4）;
  const base64 =（base64stringパディング）
    .replace（/ - /g、 ''）
    .replace（/_/g、 '/'）;
  const rawdata = window.atob（base64）;
  const outputArray = new uint8array（rawdata.length）;
  for（let i = 0; i <rawdata.length; i）{
    outputArray [i] = rawdata.charcodeat（i）;
  }
  return outputArray;
}

サブスクリプション後、ターゲットメッセージを送信できるように、エンドポイントとキーをバックエンドに送信します。

6.サービスワーカーのプッシュイベントを処理します

ユーザーが購読されたので、サービスワーカーは著信プッシュメッセージを処理する必要があります。

これをsw.jsに追加します：

 self.addeventlistener（ 'push'、function（event）{
  const data = event.data.json（）;
  self.registration.shownotification（data.title、{
    ボディ：data.body、
    アイコン：data.icon || '/con.png'
  }）;
}）;

これにより、プッシュイベントに耳を傾け、ペイロードに基づいて通知を表示します。

7.バックエンドからプッシュメッセージを送信します

最後に、通知をトリガーするには、プライベートVAPIDキーとユーザーのサブスクリプションの詳細(xì)を使用して、サブスクリプション中に提供されたエンドポイントにPOSTリクエストを送信する必要があります。

web-pushライブラリを再度使用します：

 const webpush = require（ 'web-push'）;

webpush.setvapiddetails（
  'mailto：you@example.com'、
  publicvapidkey、
  privatevapidkey
）;

webpush.sendnotification（subscription、json.stringify（{
  タイトル： 'こんにちは！'、
  ボディ：「これはプッシュ通知です。」、
  アイコン： '/con.png'
}））;

subscriptionは、 pushManager.subscribeから以前に保存したオブジェクトです。

それは基本的にそれです。最初は複雑に見えますが、ステップに分解すると、HTML5にプッシュ通知を?qū)g裝することが管理可能になります。

複雑ではありません。いくつかの可動部品が一緒に動作するだけです。

以上がHTML5にプッシュ通知を?qū)g裝する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。