共用方式為

使用推播訊息重新吸引使用者

  • 發行項

推播訊息是實用的通道，可讓應用程式以相關且及時的內容更新其使用者。 推送訊息可用來讓使用者與您的應用程式重新互動。

推播訊息的其中一個最顯著優點是，即使使用者未主動使用您的應用程式，也可以由應用程式的伺服器傳遞。

推播訊息通知會參與系統的通知中心，而且可以顯示影像和文字資訊。 通知對於警示使用者應用程式中的重要更新很有用。 不過，通知應該很少使用，因為它們通常會干擾使用者的工作流程。

若要建立支援推播通知的 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 - 從您的伺服器傳送推播訊 息。

函 userVisibleOnly 式的組態選項必須存在， registration.pushManager.subscribe 並設定為 true 。 此選項表示必須向使用者顯示推播訊息。 Microsoft Edge 不支援未向使用者顯示的推播訊息。

步驟 3 - 從您的伺服器傳送推播訊息

您的應用程式需要 VAPID (自發性應用程式伺服器識別) 金鑰，才能將推播訊息從您的伺服器傳送至 PWA 用戶端。 有數個 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 會顯示一般通知，指出已收到推播訊息。

另請參閱