本程式碼研究室會逐步說明如何建構推播通知用戶端。完成程式碼研究室後,您的用戶端就會:
- 將使用者訂閱推播通知。
- 接收推送訊息,並將其顯示為通知。
- 為使用者取消訂閱推播通知。
本程式碼研究室的重點在於協助您從做中學習,不會深入談論概念。如要瞭解推播通知的概念,請參閱「推播通知的運作方式」一文。
本程式碼研究室的伺服器程式碼已完成。我們只會在這個程式碼研究室中實作用戶端。如要瞭解如何實作推播通知伺服器,請參閱「程式碼研究室:建構推播通知伺服器」一文。
如要查看完整程式碼,請參閱 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 終端機。
- 開啟
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);
- 如要預覽網站,請按下「View App」,然後按下「Fullscreen」。
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 再按一下 [Console] (控制台) 標籤即可。您應該會看到已記錄到控制台的
Service worker was registered.
訊息。
要求推播通知權限
載入網頁時,不得要求傳送推播通知。 相反地,您的使用者介面應詢問使用者是否要接收推播通知。對方明確確認後 (例如點選按鈕),您就可以開始從瀏覽器取得推播通知權限的正式程序。
- 在 Glitch UI 中,按一下「View Source」,返回程式碼。
- 在
public/index.js
中,將subscribeButtonHandler()
中的// TODO
註解替換為下列程式碼:
// 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.');
}
- 返回「應用程式」分頁,然後按一下「訂閱推送」。瀏覽器或作業系統可能會詢問您是否要讓網站傳送推播通知給您。按一下「Allow」 (或任何瀏覽器/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;
}
接收推送訊息並將其顯示為通知
如前所述,您需要服務工作站來處理及顯示從伺服器推送至用戶端的訊息。詳情請參閱「接收及顯示推送的訊息做為通知」。
- 開啟
public/service-worker.js
,在 Service Worker 的push
事件處理常式中,將// TODO
註解替換為下列程式碼:
// 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
);
- 返回「應用程式」分頁。
- 按一下「通知我」。您應該會收到推播通知。
- 請嘗試在其他瀏覽器 (或甚至是其他裝置) 中開啟應用程式分頁的網址,進入訂閱工作流程,然後按一下「Notification all」。你訂閱的所有瀏覽器應該都會收到相同的推播通知。請返回「瀏覽器相容性」,查看已知或無法運作的瀏覽器/OS 組合清單。
您可以透過多種方式自訂通知。詳情請參閱 ServiceWorkerRegistration.showNotification()
的參數。
在使用者點選通知時開啟網址
在實際生活中,您可能會使用通知來重新吸引使用者,並提示他們造訪您的網站。如要這麼做,您需進一步設定 Service Worker。
- 在 Service Worker 的
notificationclick
事件處理常式中,將// TODO
註解替換為下列程式碼:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
- 返回「應用程式」分頁,再次傳送通知給自己,然後按一下通知。瀏覽器應該會開啟新分頁並載入
https://web.dev
。
後續步驟
- 請瀏覽
ServiceWorkerRegistration.showNotification()
,探索您可以自訂通知的各種方式。 - 如要深入瞭解推播通知的運作方式,請參閱推播通知總覽。
- 如要瞭解如何建構伺服器來管理訂閱項目,並傳送網路推送通訊協定要求,請參閱「程式碼研究室:建構推播通知伺服器」部分。
- 試用通知產生器,測試各種自訂通知的方式。