次の方法で共有

プッシュ メッセージを使用してユーザーを再エンゲージメントする

プッシュ メッセージは、アプリケーションが関連するタイムリーなコンテンツでユーザーを更新できる便利な通信チャネルです。 プッシュ メッセージを使用して、ユーザーをアプリに再び関与させることができます。

プッシュ メッセージの最も大きな利点の 1 つは、ユーザーがアプリをアクティブに使用していない場合でも、アプリのサーバーから配信できることです。

プッシュ メッセージ通知は、システムの通知センターに参加し、画像やテキスト情報を表示できます。 通知は、アプリ内の重要な更新プログラムについてユーザーに警告するのに役立ちます。 ただし、通知はユーザーのワークフローを中断する傾向があるため、ほとんど使用しないでください。

プッシュ通知をサポートする PWA を作成するには:

  1. PWA のクライアント側コードでプッシュ通知を受信するようにユーザーのアクセス許可を要求します。
  2. サーバーのプッシュ メッセージをサブスクライブします。
  3. PWA のサーバー側コードからプッシュ メッセージを送信します。
  4. プッシュ メッセージが受信されたときに通知を表示します。

手順 1 - プッシュ通知を受け取るためにユーザーのアクセス許可を要求する

PWA にプッシュ通知を送信するには、メッセージを受信するためのアクセス許可をユーザーに要求する必要があります。 アクセス許可を要求するには、ユーザーがボタンをクリックしたときなど、クライアント側コードで Notification.requestPermission API を使用します。

button.addEventListener("click", () => {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("The user accepted to receive notifications");
    }
  });
});

アクセス許可の状態は、後でもう一度チェックできます。

if (Notification.permission === "granted") {
  console.log("The user already accepted");
}

手順 2 - プッシュ通知をサブスクライブする

サーバーからプッシュ イベントを受信するには、 プッシュ API を使用してプッシュ通知をサブスクライブします。

新しいプッシュ サブスクリプションを作成する前に、Microsoft Edge は、ユーザーが通知を受信するための PWA アクセス許可を付与しているかどうかを確認します。

ユーザーが通知を受信するための PWA アクセス許可を付与していない場合、ユーザーはブラウザーからアクセス許可を求められます。 ユーザーがブラウザーにアクセス許可を付与しない場合、 registration.pushManager.subscribe に対する要求によって DOMExceptionがスローされます。

次のコード スニペットは、PWA でプッシュ通知をサブスクライブする方法を示しています。

async function subscribeToPushMessages() {
  const serviceWorkerRegistration = await navigator.serviceWorker.ready;

  // Check if the user has an existing subscription
  let pushSubscription = serviceWorkerRegistration.pushManager.getSubscription();
  if (pushSubscription) {
    // The user is already subscribed to push notifications
    return;
  }

  try {
    // Subscribe the user to push notifications
    pushSubscription = await serviceWorkerRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array("YOUR PUBLIC VAPID KEY HERE")
    });
  } catch (err) {
    // The subscription wasn't successful.
    console.log("Error", err);
  }
}

// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding)
      .replace(/\-/g, '+')
      .replace(/_/g, '/');
  
  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);
  
  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

前のコード スニペットで説明した VAPID キーは、プッシュ メッセージを送信し、プッシュ メッセージ ペイロードを暗号化するサーバーを識別するために使用される公開キーです。 VAPID キーの詳細については、「 手順 3 - サーバーからプッシュ メッセージを送信 する」を参照してください。

registration.pushManager.subscribe関数のuserVisibleOnly構成オプションが存在し、trueに設定する必要があります。 このオプションは、プッシュ メッセージをユーザーに表示する必要があることを示します。 Microsoft Edge では、ユーザーに表示されないプッシュ メッセージはサポートされていません。

手順 3 - サーバーからプッシュ メッセージを送信する

サーバーから PWA クライアントにプッシュ メッセージを送信するには、アプリケーションに VAPID (任意のアプリケーション サーバー識別) キーが必要です。 オンラインで使用できる VAPID キー ジェネレーターがいくつかあります ( たとえば、Vapidkeys.com)。

VAPID キーを取得したら、Web プッシュ プロトコルを使用して PWA クライアント にプッシュ メッセージを送信できます。

ライブラリを使用すると、使用するプログラミング言語に応じて、サーバーからプッシュ メッセージを送信できます。 たとえば、サーバーで Node.js を使用している場合は 、Web プッシュ ライブラリを使用できます。 その他のライブラリは 、WebPush ライブラリ リポジトリで使用できます。

手順 4 - プッシュ メッセージが受信されたときに通知を表示する

PWA でサブスクリプションを作成した後 ( 「手順 2 - プッシュ通知をサブスクライブする」に示すように)、サービス ワーカーに push イベント ハンドラーを追加して、サーバーから送信されたプッシュ メッセージを処理します。

次のコード スニペットは、プッシュ メッセージが受信されたときに通知を表示する方法を示しています。

// Listen to push events.
self.addEventListener('push', event => {
  // Check if the user has granted permission to display notifications.
  if (Notification.permission === "granted") {
    // Get the notification data from the server.
    const notificationText = event.data.text();

    // Display a notification.
    const showNotificationPromise = self.registration.showNotification('Sample PWA', {
      body: notificationText,
      icon: 'images/icon512.png'
    });

    // Keep the service worker running until the notification is displayed.
    event.waitUntil(showNotificationPromise);
  }
});

プッシュ メッセージの受信時に PWA に通知が表示されない場合、Microsoft Edge には、プッシュ メッセージが受信されたことを示す汎用通知が表示されます。

関連項目