「通知觸發條件」可讓您安排不需網路連線的本機通知,非常適合使用日曆應用程式等用途。
什麼是通知觸發條件?
網頁開發人員可以使用 Web Notifications API。這項功能通常與 Push API,用來通知使用者俱有時效性的資訊,例如 例如即時新聞事件或已收到訊息如要顯示通知,請在 使用者的裝置。
Push API 的問題在於,它不可靠觸發通知,「必須」 會在符合特定條件 (例如時間或地點) 時顯示。以時間為依據的範例 限制條件:日曆通知提醒您與老闆在重要會議中, 下午 2 點。以通知提醒您買牛奶 就會看到貴公司的相關資訊網路連線或節約耗電量 打盹模式等功能可能會延遲推送通知的傳送時間。
「通知」觸發條件可讓你排定通知觸發時間,藉此解決這個問題 ,作業系統才能適時傳送通知 即使沒有網路連線或裝置處於省電模式也沒問題。
用途
日曆應用程式可以使用時間型通知觸發條件,提醒使用者即將開始 安排會議時間日曆應用程式的預設通知配置可以是第一個抬頭通知 開會前一小時通知,之後又再發送一則緊急通知 5 分鐘 。
電視網路可能會提醒使用者喜愛的電視節目即將開始或開會直播 即將開始串流播放
時區轉換網站可以使用以時間為準的通知觸發條件,讓使用者安排時間 電話會議或視訊通話的鬧鐘
目前狀態
步驟 | 狀態 |
---|---|
1. 建立說明 | 完成 |
2. 建立規格的初始草稿 | 尚未開始 |
3. 收集意見回饋並反覆改進設計。 | 進行中 |
4. 來源試用 | 完成 |
5. 啟動 | 尚未開始 |
如何使用通知觸發條件
透過 about://flags 啟用
如要在不使用來源試用權杖的情況下在本機試用 Notification Triggers API,請啟用
about://flags
中的 #enable-experimental-web-platform-features
標記。
特徵偵測
您可以透過檢查是否存在
showTrigger
屬性:
if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}
排定通知時間
排定通知時間與顯示一般推播通知類似,只是您需要
傳遞 showTrigger
條件屬性,並將 TimestampTrigger
物件的值做為值傳遞給
通知的 options
物件。
const createScheduledNotification = async (tag, title, timestamp) => {
const registration = await navigator.serviceWorker.getRegistration();
registration.showNotification(title, {
tag: tag,
body: 'This notification was scheduled 30 seconds ago',
showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
});
};
取消已排定的通知
如要取消排定的通知,請先索取一份清單,內含符合特定項目的所有通知
標記之前的 ServiceWorkerRegistration.getNotifications()
標記。請注意,您必須傳送
includeTriggered
標記,用於將已排定的通知加入清單中:
const cancelScheduledNotification = async (tag) => {
const registration = await navigator.serviceWorker.getRegistration();
const notifications = await registration.getNotifications({
tag: tag,
includeTriggered: true,
});
notifications.forEach((notification) => notification.close());
};
偵錯
您可以使用 Chrome 開發人員工具通知面板來偵錯通知。開始 偵錯,請按下「Start record event」(開始記錄事件) 或 Control + E 鍵 (在 Mac 上為 Command + E 鍵)。Chrome 開發人員工具記錄 所有通知事件,包括排程、顯示與關閉的通知 即使您關閉開發人員工具
示範
您可以在示範中瞭解通知觸發條件的實際運作情形,以便安排時間 列出及取消排定的通知您可以在 Glitch:
安全性和權限
Chrome 團隊根據核心原則設計並實作 Notification Triggers API 定義,包括控管強大的 Web Platform 功能存取權,包括使用者 掌控權、透明度和人體工學由於此 API 需要 Service Worker,因此也需要 安全內容。使用 API 所需的權限與一般推播通知相同。
使用者控制項
這個 API 僅適用於 ServiceWorkerRegistration
的內容。這表示
所需資料會儲存在相同情境中,並在服務工作處理程序
使用者刪除或刪除來源的所有網站資料。封鎖 Cookie 也會使服務無法運作
避免在 Chrome 中安裝工作站,因此不得使用這個 API。通知
一律在網站設定中停用該網站。
透明度
與 Push API 不同,這個 API 不需要網路,它可能表示已排定的通知
需要事先處理所有必要資料,包括 badge
、icon
和
image
屬性。這表示開發人員無法觀測到已排定的通知
在使用者與通知互動之前,不要喚醒 Service Worker。
因此,開發人員目前無法取得使用者相關資訊
,例如 IP 位址地理位置查詢。這種設計
可讓功能視需要加入作業系統提供的排程機制
例如 Android 的 AlarmManager
進而節省電力
意見回饋
Chrome 團隊想瞭解「通知觸發條件」的使用體驗。
請與我們分享 API 設計
您覺得這個 API 有什麼不如預期的運作方式?或者缺少某些方法 需要實現什麼構想?對安全性有任何疑問或意見 以及模型請在通知觸發條件 GitHub 存放區中提交規格問題,或將您的想法新增至 現有的問題。
無法導入嗎?
您發現 Chrome 實作錯誤嗎?還是採用與規格不同?
前往 new.crbug.com 回報錯誤。請務必盡量提供詳細資料
重現程式碼的簡單指示,並將元件設為 UI>Notifications
。Glitch 上有很棒的表現
可讓您輕鬆快速地重現錯誤。
想要使用這個 API 嗎?
打算在網站上使用通知觸發條件嗎?你的公開支援服務有助於我們優先處理
以及讓其他瀏覽器廠商瞭解支援它們的重要性。將推文傳送給
使用主題標記 @ChromiumDev
#NotificationTriggers
敬上
,並說明你使用這項服務的位置和方式。
實用連結
- 公開說明
- 通知觸發條件示範 |通知觸發條件示範來源
- 追蹤錯誤
- ChromeStatus.com 項目
- 閃爍元件:
UI>Notifications
特別銘謝
通知觸發條件是由 Richard Knoll 實作 這段說明文字是由 Peter Beverloo 撰寫 。下列使用者已審查文章: Joe Medley、Pete LePage 和 Richard 和 Peter。主頁橫幅製作者: Lukas Blazek 在 Unsplash 上。