共用方式為

重新吸引用戶推送訊息

推播訊息是一種有用的溝通管道，讓應用程式能以相關且及時的內容更新用戶。 推播訊息可以用來重新吸引用戶使用你的應用程式。

推播訊息最顯著的優勢之一是，即使用戶未積極使用應用程式，推播訊息仍可由應用程式的伺服器傳送。

推播訊息通知會參與系統的通知中心，並能顯示圖片和文字資訊。 通知很有用，能提醒使用者應用程式有重要更新。 然而，通知應少用，因為它們往往會干擾使用者的工作流程。

要建立支援推播通知的 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 - 訂閱推播通知

要從你的伺服器接收推播事件，請使用 Push 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 金鑰是一個公鑰，用來識別發送推送訊息的伺服器並加密推送訊息的有效載荷。 請參閱 步驟 3 - 從你的伺服器發送推送訊息 ，以獲得更多關於 VAPID 金鑰的資訊。

userVisibleOnly函數的registration.pushManager.subscribe配置選項必須存在且設為 true。 此選項表示推播訊息必須顯示給使用者。 Microsoft Edge 不支援不會顯示給使用者的推播訊息。

步驟 3 - 從你的伺服器發送推播訊息

您的應用程式需要 VAPID (自願應用程式伺服器識別) 金鑰，才能從伺服器向 PWA 用戶端發送推送訊息。 網路上有多種 VAPID 金鑰產生器可用 (例如 Vapidkeys.com) 。

一旦你擁有 VAPID 金鑰，就可以使用 Web Push 協定向你的 PWA 客戶端發送推送訊息。 請參閱 MDN 的 推送 API 。

你可以用函式庫從伺服器發送推播訊息，視你使用的程式語言而定。 例如，如果你的伺服器使用 web-push 函式庫，Node.js 即可使用。 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 會顯示一個通用通知，表示推播訊息已收到。

另請參閱

MDN：

GitHub：

外：

  • Last updated on