在本程式碼研究室中,您將使用 通知 API 執行以下作業:
- 要求取得傳送通知的權限
- 傳送通知
- 測試不同的通知選項
重混範例應用程式,並在新分頁中查看
系統會自動封鎖內嵌的 Glitch 應用程式通知,因此您無法在這個頁面預覽應用程式。而是可以採取以下做法:
- 按一下「Remix to Edit」即可編輯專案。
- 如要預覽網站,請按下「查看應用程式」。然後按下 全螢幕 。
Glitch 應該會在新的 Chrome 分頁中開啟:
在您學習本程式碼研究室的過程中,請變更本頁面內嵌 Glitch 中的程式碼。為執行中的應用程式重新整理新分頁,就會看到變更。
瞭解入門應用程式及其程式碼
請先在 Chrome 新分頁中查看已上線的應用程式:
按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。 再按一下「Console」(控制台) 分頁標籤即可。
控制台中應會顯示下列訊息:
Notification permission is default
如果您不知道這是什麼意思,請不用擔心很快就會揭曉!
按一下運作中應用程式中的按鈕:「要求傳送通知」和「傳送通知」。
主控台會顯示「TODO」來自幾個函式虛設常式的訊息:
requestPermission
和sendNotification
。以下是您將在本程式碼研究室中實作的函式。
接著,我們來看看這個網頁上內嵌的 Glitch 中範例應用程式的程式碼。
開啟 public/index.js
,查看現有程式碼的幾個重要部分:
showPermission
函式會使用通知 API, 網站目前的權限狀態,並記錄到控制台:// Print current permission state to console; // update onscreen message. function showPermission() { let permission = Notification.permission; console.log('Notification permission is ' + permission); let p = document.getElementById('permission'); p.textContent = 'Notification permission is ' + permission; }
要求權限之前,權限狀態是
default
。 在default
權限狀態中 網站必須先要求並取得權限,才能傳送通知。requestPermission
函式是虛設常式:// Use the Notification API to request permission to send notifications. function requestPermission() { console.log('TODO: Implement requestPermission()'); }
您將在下一個步驟中實作此函式。
sendNotification
函式是虛設常式:// Use the Notification constructor to create and send a new Notification. function sendNotification() { console.log('TODO: Implement sendNotification()'); }
您必須在實作
requestPermission
後實作此函式。window.onload
事件監聽器會呼叫showPermission
函式 載入網頁時,在控制台和頁面上顯示目前的權限狀態:window.onload = () => { showPermission(); };
要求取得傳送通知的權限
在這個步驟中,您將新增功能,要求使用者授予傳送通知的權限。
你使用 Notification.requestPermission()
方法觸發彈出式視窗,要求使用者允許或封鎖來自你網站的通知。
將 public/index.js 中的
requestPermission
函式虛設常式替換為以下程式碼:// Use the Notification API to request permission to send notifications. function requestPermission() { Notification.requestPermission() .then((permission) => { console.log('Promise resolved: ' + permission); showPermission(); }) .catch((error) => { console.log('Promise was rejected'); console.log(error); }); }
重新載入您正在查看執行中應用程式的 Chrome 分頁。
在即時應用程式介面中,按一下「要求傳送通知的權限」。畫面隨即會顯示彈出式視窗。
使用者可以對權限彈出式視窗做出三個回應之一。
使用者回覆 | 通知權限狀態 |
---|---|
使用者選取「允許」 | granted |
使用者選取「封鎖」 | denied |
使用者關閉彈出式視窗,但並未選取 | default |
如果使用者點選「允許」:
Notification.permission
設為granted
。網站將可顯示通知。
後續呼叫
Notification.requestPermission
時,系統會在沒有彈出式視窗的情況下解析granted
。
如果使用者點擊「封鎖」:
Notification.permission
設為denied
。此外,網站無法向使用者顯示通知。
後續呼叫
Notification.requestPermission
時,系統會在沒有彈出式視窗的情況下解析denied
。
如果使用者關閉彈出式視窗:
Notification.permission
仍維持在default
。網站將無法向使用者顯示通知。
後續呼叫
Notification.requestPermission
將會產生更多彈出式視窗。不過,如果使用者繼續關閉彈出式視窗,瀏覽器可能會將
Notification.permission
設為denied
來封鎖該網站。如此一來,系統就不會向使用者顯示任何權限要求彈出式視窗或通知。在撰寫本文時,瀏覽器在回應關閉通知權限彈出式視窗後的行為仍可能會變更。因此,最好的做法是一律要求通知權限,以回應使用者所啟動的部分互動,讓使用者期待及瞭解接下來的情況。
傳送通知
在這個步驟中,您將通知使用者。
您將使用 Notification
建構函式建立新通知,並嘗試顯示通知。
如果權限狀態為 granted
,系統就會顯示通知。
將 index.js 中的
sendNotification
函式虛設常式替換為下列程式碼:// Use the Notification constructor to create and send a new Notification. function sendNotification() { let title = 'Test'; let options = { body: 'Test body', // Other options can go here }; console.log('Creating new notification'); let notification = new Notification(title, options); }
Notification
建構函式會採用兩個參數:title
和options
。options
是一個物件,其屬性代表可納入通知的視覺設定和資料。詳情請參閱通知參數的 MDN 說明文件。重新整理正在查看執行中應用程式的 Chrome 分頁 ,然後按一下「傳送通知」按鈕。 應會顯示含有
Test body
文字的通知。
如果你在未經許可的情況下傳送通知,會發生什麼事?
在這個步驟中,您將加入幾行程式碼來預覽執行方式 企圖在未經使用者同意的情況下顯示通知。
- 在
public/index.js
中的sendNotification
函式結尾, 定義新通知的onerror
事件處理常式:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
如何觀察通知權限錯誤:
點選 Chrome 網址列旁的鎖頭圖示,並將網站的通知權限設定重設為預設值。
點按「要求傳送通知」,然後這次從彈出式視窗中選取「封鎖」。
按一下「傳送通知」即可查看後續情況。 錯誤訊息文字 (
Could not send notification
) 事件物件也會記錄在控制台中
(選用) 再次重設網站的通知權限。 您可以嘗試要求權限,並多次關閉彈出式視窗,看看會發生什麼情況。
測試不同的通知選項
您已瞭解要求權限和傳送通知的基本知識。 此外,您也瞭解使用者回覆對於應用程式顯示通知的能力有何影響。
現在,您可以在建立通知時試用多種視覺化和資料選項。 以下提供完整的可用選項。 (如要進一步瞭解這些選項,請參閱 MDN 通知說明文件)。
請注意,瀏覽器和裝置實作這些選項的方式不同 建議你在不同平台上測試通知,看看通知會如何呈現
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
如需更多資訊,請參閱 Peter Beverloo 的通知產生器!
如果遇到問題,以下是本程式碼研究室的完成程式碼:glitch.com/edit/#!/codelab-notifications-get-started-completed
歡迎參閱本系列的下一個程式碼研究室「使用 Service Worker 處理通知」,進一步瞭解相關資訊!