通知觸發 API

Thomas Steiner

發布日期：2019 年 10 月 24 日

什麼是通知觸發條件？

網路開發人員可以使用 Web Notifications API 顯示通知。這項功能通常會與 Push API 搭配使用，向使用者提供時間敏感資訊，例如即時新聞事件或收到的訊息。系統會在使用者裝置上執行 JavaScript，顯示通知。

Push API 的問題在於，當符合特定條件 (例如時間或位置) 時，它無法可靠地觸發必須顯示的通知。時間條件的例子是日曆通知，提醒您下午 2 點要與老闆召開重要會議。地點條件的例子：進入雜貨店附近時，系統會傳送通知，提醒你購買牛奶。網路連線或省電功能 (例如休眠模式) 可能會延遲推送通知的傳送。

通知觸發條件可讓您預先排定通知及其觸發條件，解決這個問題。即使沒有網路連線或裝置處於省電模式，作業系統也會在適當時間傳送通知。

用途

日曆應用程式可以使用時間型通知觸發條件，提醒使用者即將召開的會議。日曆應用程式的預設通知機制可能是在會議開始前一小時顯示第一則抬頭通知，然後在會議開始前五分鐘顯示另一則更緊急的通知。

電視網可能會提醒使用者喜愛的電視節目即將開播，或是會議直播即將開始。

時區轉換網站可使用時間型通知觸發條件，讓使用者排定電話會議或視訊通話的鬧鐘。

目前狀態

步驟	狀態
1. 建立說明影片	完成
2. 草擬規格初稿	尚未開始
3. 收集意見回饋並逐步調整設計。	處理中
4. 來源試用	完成
5. 啟動	尚未開始

使用通知觸發條件

如要在本機試用 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 開發人員工具的「Notifications」(通知) 面板，對通知進行偵錯。如要開始偵錯，請按下「開始記錄事件」或 Control+E 鍵 (在 Mac 上為 Command+E 鍵)。Chrome 開發人員工具會記錄所有通知事件，包括排定、顯示和關閉的通知，最多可記錄三天，即使開發人員工具處於關閉狀態也仍會持續記錄。

系統已將排定的通知事件記錄到 Chrome 開發人員工具的「通知」窗格 (位於「應用程式」面板中)。 — 已排定的通知。

系統已將顯示的通知事件記錄到 Chrome 開發者工具的「通知」窗格。 — 顯示的通知。

示範

您可以在示範中查看通知觸發條件的運作方式，包括排定通知、列出排定的通知，以及取消通知。

通知觸發條件示範網頁應用程式。

安全性和權限

Chrome 團隊已根據「控管強大的網頁平台功能存取權」中定義的核心原則 (包括使用者控制權、透明度和人體工學)，設計及實作 Notification Triggers API。由於這個 API 需要服務工作人員，因此也需要安全環境。使用 API 需要與一般推播通知相同的權限。

使用者控制項

這項 API 僅適用於 ServiceWorkerRegistration。這表示所有必要資料都儲存在相同環境中，且在服務工作人員遭到刪除，或使用者刪除來源的所有網站資料時，系統會自動刪除這些資料。封鎖 Cookie 也會導致 Chrome 無法安裝服務工作人員，因此無法使用這項 API。使用者隨時可以在網站設定中，停用網站通知。

透明度

與 Push API 不同，這個 API 不會依賴網路，這表示排程通知必須事先取得所有必要資料，包括 badge、icon 和 image 屬性參照的圖片資源。也就是說，開發人員無法觀察排定時間的通知，而且在使用者與通知互動前，服務工作人員不會喚醒。

截至本文撰寫日期，開發人員無法透過 IP 位址地理位置查詢等可能侵犯隱私權的方法，取得使用者資訊。這項設計也允許這項功能選擇性地運用作業系統提供的排程機制，例如 Android 的 AlarmManager，有助於節省電量。

意見回饋

Chrome 團隊想瞭解您使用通知觸發條件的體驗。

介紹 API 設計

API 是否有任何部分無法如預期運作？或者，是否有缺少的屬性或方法需要實作，才能實現您的想法？對安全模型有任何問題或意見嗎？在 Notification Triggers GitHub 存放區中提出規格問題，或在現有問題中新增想法。

導入時發生問題嗎？

您是否發現 Chrome 實作方式有錯誤？還是實作方式與規格不同？在 new.crbug.com 回報錯誤。請務必盡可能提供詳細資料、重現步驟，並將「Components」設為 UI>Notifications。

打算使用 API 嗎？

您打算在網站上使用通知觸發條件嗎？您的公開支持有助於我們優先處理功能，並向其他瀏覽器供應商展示支援這些功能的必要性。使用 #NotificationTriggers 主題標記傳送推文給 @ChromiumDev，告訴我們您在何處使用這項功能，以及使用方式。

實用連結

公開說明
追蹤錯誤
ChromeStatus.com 項目
Blink 元件：UI>Notifications

特別銘謝

通知觸發條件是由 Richard Knoll 實作，說明文件則由 Peter Beverloo 撰寫，Richard 也貢獻了內容。下列人員審查過這篇文章：Joe Medley、Pete LePage，以及 Richard 和 Peter。