通知觸發 API

「通知觸發條件」可讓您排定不需要網路連線的本機通知，非常適合用於日曆應用程式等用途。

湯瑪斯史坦納

什麼是通知觸發條件？

網頁開發人員可以使用 Web Notifications API 顯示通知。這項功能通常會搭配 Push API 使用，以便通知使用者俱有時效性的資訊，例如即時新聞事件或收到的訊息。系統會在使用者裝置上執行 JavaScript，藉此顯示通知。

Push API 的問題是，觸發通知並不可靠，因為在滿足特定條件 (例如時間或位置) 時必須顯示通知。時間型條件範例是一種日曆通知，可在下午 2 點提醒您與上司進行重要會議。舉例來說，地點條件是指在您進入雜貨店附近時，提醒您買牛奶的通知。網路連線或打盹模式等節約耗電量功能可能會延遲推送通知的傳遞時間。

通知觸發條件可讓您事先排定通知觸發條件來解決這個問題，如此一來，即使沒有網路連線，或是裝置處於省電模式，作業系統也能在適當時機傳送通知。

應用情境

日曆應用程式可以使用以時間為準的通知觸發條件，提醒使用者即將舉行的會議。日曆應用程式的預設通知配置可能是在會議開始前一小時顯示第一則抬頭通知，接著再五分鐘再顯示一則需要緊急通知。

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

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

目前狀態

步驟 狀態
1. 建立說明 完成
2. 建立規格的初始草稿 Not started
3. 收集意見回饋並持續改進設計。 進行中
4. 來源試用 完整
5. 啟動 Not started

如何使用通知觸發條件

透過 about://flags 啟用

如要在不使用來源試用權杖的情況下在本機使用 Notification Triggers API，請在 about://flags 中啟用 #enable-experimental-web-platform-features 標記。

特徵偵測

您可以檢查 showTrigger 屬性是否存在，確認瀏覽器是否支援通知觸發條件：

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

安排通知時間

排程通知的方式與顯示一般推播通知類似，不過您需要將包含 TimestampTrigger 物件值的 showTrigger 條件屬性傳遞至通知的 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 開發人員工具通知面板進行偵錯通知。如要開始偵錯，請按下「開始錄製事件」開始記錄事件 或「Control」+「E」 (在 Mac 上為 Command + E 鍵)。Chrome 開發人員工具會記錄三天內所有通知事件，包括排程、已顯示和已關閉的通知，即使開發人員工具已關閉亦然。

系統會將排定的通知事件記錄到 Chrome 開發人員工具的「通知」窗格，該窗格位於「應用程式」面板中。
已排定的通知。
系統顯示的通知事件已記錄到 Chrome 開發人員工具的「通知」窗格。
畫面上顯示的通知。

示範模式

您可以在示範中查看通知觸發條件的實際運作情形，進而安排通知、列出排定的通知，以及取消這些通知。您可以前往 Glitch 取得原始碼。

「通知觸發條件」示範網頁應用程式的螢幕截圖。
通知觸發條件示範。

安全性和權限

Chrome 團隊參考「控管強大網路平台功能存取權」一節所述的核心原則，設計並實作 Notification Triggers API，包括使用者控制、資訊公開和人體工學。由於這個 API 需要 Service Worker，因此也需要安全的結構定義。使用 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 回報錯誤。請務必盡可能附上詳細資料、重現的簡易操作說明，並將元件設為 UI>Notifications。Glitch 很適合用來分享輕鬆快速的重現錯誤

打算使用 API 嗎？

您打算在網站上使用通知觸發條件嗎？您的公開支援團隊可以協助我們決定各項功能的優先順序，並向其他瀏覽器供應商瞭解支援這些功能的重要性。請使用主題標記 #NotificationTriggers 傳送 Twitter 推文至 @ChromiumDev，讓我們說明您使用了這項功能的位置和方式。

實用連結

特別銘謝

通知觸發條件由 Richard Knoll 實作，以及由 Peter Beverloo 編寫的說明，以及 Richard 所提供的貢獻。以下人士已評論過這篇文章：Joe Medley、Pete LePage，以及 Richard 和 Peter。主頁橫幅由 Lukas Blazek 在 Unsplash 上提供。