本頁面由 Cloud Translation API 翻譯而成。

程式碼研究室：建構推播通知用戶端

Kate Jeffreys

Kayce Basques

本程式碼研究室會逐步說明如何建構推播通知用戶端。完成程式碼研究室後，您的用戶端就會：

將使用者訂閱推播通知。
接收推送訊息，並將其顯示為通知。
為使用者取消訂閱推播通知。

本程式碼研究室著重於協助您從工作中學習，不會一些概念退房日推播通知的運作方式瞭解推播通知的概念

本程式碼研究室的伺服器程式碼已完成。實際操作。如要瞭解推播通知伺服器，請參閱「程式碼研究室：建構推播通知伺服器。

請參閱 push-notifications-client-codelab-complete (資料來源) 就能看到完整程式碼

瀏覽器相容性

本程式碼研究室介紹的作業系統和瀏覽器組合如下：

Windows：Chrome、Edge
macOS：Chrome、Firefox
Android：Chrome、Firefox

已知本程式碼研究室「無法」與下列作業系統搭配使用 (或作業系統和瀏覽器組合)：

macOS：Brave、Edge、Safari
iOS

設定

取得程式碼的可編輯副本

這類操作說明右側的程式碼編輯器會稱為 Glitch UI。

按一下「Remix to Edit」即可編輯專案。

，瞭解如何調查及移除這項存取權。

設定驗證方法

必須先完成設定，才能使用推播通知驗證金鑰和用戶端。請參閱「簽署網路推送通訊協定要求」一節。瞭解原因。

在 Glitch 使用者介面中，依序點選「Tools」和「Terminal」，開啟 Glitch 終端機。
在 Glitch 終端機中執行 npx web-push generate-vapid-keys。複製私密金鑰和公開金鑰值
在 Glitch UI 中開啟 .env，並更新 VAPID_PUBLIC_KEY 和 VAPID_PRIVATE_KEY。組合 VAPID_SUBJECT到 mailto:test@test.test。這些值全都應包裝。更新完成後，.env 檔案應該會顯示類似這樣：

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

關閉 Glitch 終端機。

，瞭解如何調查及移除這項存取權。

單一 Glitch 專案有專屬的環境變數值 (.env 中的內容)，如果您重混專案，「.env」中的值不會一併複製。

開啟 public/index.js。
將 VAPID_PUBLIC_KEY_VALUE_HERE 替換為公開金鑰的值。

註冊 Service Worker

您的用戶端最終需要服務工作處理程序來接收和顯示通知。建議您盡早註冊 Service Worker。請參閱接收及顯示推送訊息為通知，瞭解更多相關資訊。

使用下列程式碼取代 // TODO add startup logic here 註解：

// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕 。

，瞭解如何調查及移除這項存取權。

按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
再按一下 [Console] (控制台) 標籤即可。您應該會看到訊息 Service worker was registered.已登入控制台。

，瞭解如何調查及移除這項存取權。

要求推播通知權限

載入網頁時，不得要求傳送推播通知。相反地，您的使用者介面應詢問使用者是否要接收推播通知。對方明確確認 (例如點選按鈕) 後開始正式從瀏覽器取得推播通知權限。

在 Glitch UI 中，按一下「View Source」，返回程式碼。
請在 public/index.js 中替換以下的 // TODO 註解：使用下列程式碼subscribeButtonHandler()：

// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

返回「應用程式」分頁，然後按一下「訂閱推送」。你的瀏覽器或作業系統會詢問您是否要將該網站會傳送推播通知給你按一下「允許」 (或任何相等的詞組) 瀏覽器/OS 所使用的資源)。控制台中應會顯示下列訊息：用來表示接受或拒絕要求

，瞭解如何調查及移除這項存取權。

訂閱推播通知

訂閱流程包含與控管的網路服務互動稱為「推送服務」的瀏覽器廠商。收到您需要將推播通知訂閱資訊傳送到伺服器並希望伺服器長期儲存在資料庫中請參閱「訂閱用戶端以接收推播通知」瞭解訂閱流程的詳細資訊

將下列程式碼醒目顯示至 subscribeButtonHandler()：

subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

userVisibleOnly 選項必須為 true。可能有一天在使用者不可見通知的情況下推送訊息 (無訊息推送)，但瀏覽器目前不允許這項功能出於隱私權疑慮

applicationServerKey 值依賴於會將 base64 字串轉換成 Uint8Array。這個值適用於在伺服器和推送服務之間驗證

取消訂閱推播通知

使用者訂閱推播通知後，使用者介面必須提供取消訂閱的方法，以防使用者改變主意，不想再收到這類通知。

取代 unsubscribeButtonHandler() 中的 // TODO 註解替換為下列程式碼：

// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

接收推送訊息並將其顯示為通知

如前所述，您需要一個 Service Worker 來處理接收及顯示已推送至用戶端的訊息。請參閱接收及顯示推送訊息為通知，掌握更多詳細資訊。

開啟 public/service-worker.js 並取代 // TODO 註解在 Service Worker 的 push 事件處理常式中使用下列程式碼：

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

返回「應用程式」分頁。
按一下「通知我」。您應該會收到推播通知。
嘗試在其他瀏覽器中開啟應用程式分頁的網址按一下「全部通知」。你應該會收到相同的推播通知即可。請參閱瀏覽器相容性，可查看瀏覽器/作業系統清單許多已知有效或無效組合

您可以透過多種方式自訂通知。詳情請參閱 ServiceWorkerRegistration.showNotification()瞭解詳情。

在服務工作處理程序的 install 事件監聽器中，對 self.skipWaiting() 的呼叫至關重要。如需相關說明，請參閱「略過等待階段」一節。如果沒有這項資訊，您對服務工作處理程序進行的程式碼變更不會立即生效。視自己的需求而定，你不一定要在自家網站上使用這項功能，但一定要瞭解效果。

在使用者點選通知時開啟網址

在現實生活中，您可以將通知做為輔助重新吸引使用者，並提示他們造訪您的網站。如要這麼做，您需進一步設定 Service Worker。

在 Service Worker 的 notificationclick 中取代 // TODO 註解加入含有下列程式碼的事件處理常式：

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

返回應用程式分頁並再次傳送通知給自己，然後按一下通知。瀏覽器應該會開啟新分頁並載入 https://web.dev。

後續步驟

查看 ServiceWorkerRegistration.showNotification() 探索各種自訂通知的方式。
閱讀「推播通知總覽」一文以便更加瞭解推播通知的運作方式。
請參閱「程式碼研究室：建構推播通知伺服器」學習如何建構伺服器來管理訂閱項目，以及傳送網路推送通訊協定要求。
試用通知產生器，測試各種自訂通知的方法。