ウェブプッシュを使用する

拡張機能では、任意のプッシュ プロバイダを使用してプッシュ通知を送信したり、 ブロックすることもできます。Push API からの push は、Service Worker で次のように処理されます。 受信するとすぐに削除されます。Service Worker が一時停止されている場合、 スリープ解除します。拡張機能で使用するプロセスは、 オープンウェブで使用できます

Push API を使用する権限を取得する

通常のウェブサイトでプッシュ サーバーを登録すると、ユーザーには 許可するか拒否するかを選択します。拡張機能を使用すると 表示されます。拡張機能で Push API を使用するには、 manifest.json 内の notifications 権限

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

この権限がない場合、ユーザーとのインタラクション registration.pushManager は、次の結果と同じエラーがすぐに返されます。 ユーザーが権限を拒否した場合。また notifications 権限があると、権限に関する警告が発生する 指定することもできます。また、すべてのユーザーに対してこの拡張機能を無効にし、 ユーザーが新しい権限リクエストを承認するまで、既存のインストールは継続されます。Google Chat では 対処方法について詳しくは、 権限に関する警告ガイドをご覧ください。

push プロバイダと push サービス

manifest.json に権限を追加したら、次の操作を行います。 バックエンドと拡張機能間の接続を構成しますこの接続 push プロバイダと push サービスの 2 つの部分に分けられます。 provider は、メッセージを push サービスに送信するために使用する SDK です。 多くの異なるオプションがあり、どの push プロバイダも push 用に機能する （ただし、統合を簡単にする SDK が提供されていない場合があります）。マイページ プロバイダの SDK で何ができるかテストする必要があります。プッシュ エンドユーザーのデバイスが登録されているとしたら、そのデバイスに push メッセージに push できます。これについては 個々のブラウザにハードコードされているため、完全に制御できます。Chrome の場合、Firebase Cloud Messaging は push サービスです。Chrome に push されるすべてのメッセージ ルーティングされます

push プロバイダのセルフホスト

すべての push プロバイダが機能するが、すべてのプロバイダが機能する SDK を提供しているわけではない 使用できます。問題が発生した場合は、プロバイダにお問い合わせください。 気にする必要はありませんただし、パブリック プロバイダを使用する必要はありません。使用 web-push などのライブラリを使用する場合、独自のバックエンドをホストできます。

このライブラリは以下を使用してテストできます: web-push-codelab.glitch.me.具体的には、次の操作を行う必要があります。 その push サーバーの VAPID 公開鍵をコピーして、push サーバーの ブラウザで表示することもできます。この公開鍵は実際には base64 デコードおよび変換する必要があるバイナリ値 Uint8Array を使用して、ブラウザの Push できます。このロジックを実行するためのライブラリが用意されていますが、 必要なのはこれだけです。

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

指定された値が push マネージャーに渡される

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

subscribe 関数は、PushSubscription、 push サーバーのメタデータを含むオブジェクト。いつも Google のサービスをご利用いただきありがとうございます。 web-push-codelab.glitch.me の場合、この値を push サブスクリプションの部分に移動します

PushSubscription を取得したら、次はリスナーを登録する準備は完了です。 メッセージを push します。

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

リスナーを設定すると、 web-push-codelab.glitch.me です。メッセージは Google Cloud の 表示されます。

オープンウェブ標準なので、これに関する既存のドキュメントが数多くあります。 ウェブプッシュの実装方法（Chrome のブログ）をご覧ください。1 つの サンプルの完全なバージョンがあります。 拡張機能のサンプル リポジトリ。

サイレント プッシュ

Manifest V3 拡張機能でプッシュ通知を受信可能 これは Chrome 88 で導入された Manifest V3 ですしかし、これまでずっと 通知でなんらかのプロンプトがユーザーに表示されるという要件 ウェブ通知などです。そのため、スペースを空けると 拡張機能にコマンドやデータ更新をプッシュしようとしたり、 不必要な情報を提供してしまう可能性があります。Chrome 121 より、拡張機能 userVisibleOnly を false に設定できる。メッセージを送信できるようになりました ユーザーに直接通知しないサイレント プッシュ通知をユーザーに提供できます。これを使用するには pushManager.subscribe を呼び出すときに userVisibleOnly を false に設定します。

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});