本頁面由 Cloud Translation API 翻譯而成。

通知觸發 API

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

Thomas Steiner

什麼是通知觸發條件？

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

Push API 的問題在於，觸發通知「必須」在特定條件 (例如時間或位置) 符合時顯示，才算是觸發通知並不可靠。日曆通知會在下午 2 點提醒您與老闆進行重要會議，在時間條件中一例。以「地點條件」為例，系統會在您進入雜貨店週邊地區時，提醒您買牛奶。網路連線或電池保護功能 (例如打盹模式) 可能會延遲推送通知的傳送時間。

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

用途

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

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

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

目前狀態

步驟	狀態
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 記錄事件」或「Control」+E 鍵 (在 Mac 上為 Command + E 鍵)。即使開發人員工具已關閉，Chrome 開發人員工具也會記錄所有通知事件，包括排定、顯示及關閉的通知。

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

Chrome 開發人員工具的「通知」窗格會記錄顯示的通知事件。 — 系統會顯示通知。

操作示範

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

安全性和權限

Chrome 團隊根據控管強大的 Web Platform 功能存取權中定義的核心原則，設計並實作 Notification Triggers API，包括使用者控制權、資訊透明度以及人因工程等。由於此 API 需要服務工作站，因此也需要安全的內容。使用 API 所需的權限與一般推播通知相同。

使用者控制項

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

透明度

與 Push API 不同，這個 API 與 Push API 不同，不需要網路。也就是說，網路會事先取得所有必要資料，包括 badge、icon 和 image 屬性參照的圖片資源。這表示開發人員無法觀察已排定時程的通知，在使用者與通知互動之前，不需要喚醒服務工作站。因此，開發人員目前無法透過 IP 位址地理位置查詢等可能危害隱私權的方法，取得使用者的相關資訊。這項設計也允許該功能視需要選用作業系統 (例如 Android AlarmManager) 提供的排程機制，有助於節省電池電力。

意見回饋：

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

請與我們分享 API 設計

您覺得這個 API 有什麼不如預期的運作方式？還是你還需要實現想法或屬性呢？對安全性模型有任何疑問或意見嗎？請在通知觸發條件 GitHub 存放區中提交規格問題，或將您的想法新增至現有問題。

無法導入嗎？

您發現 Chrome 實作錯誤嗎？還是採用與規格不同？前往 new.crbug.com 回報錯誤。請務必盡量提供詳細資料、可重現的簡單操作說明，並將元件設為 UI>Notifications。Glitch 很適合用來快速重現錯誤報告。

想要使用這個 API 嗎？

打算在網站上使用通知觸發條件嗎？您的公開支援服務有助於我們優先開發各項功能，並說明其他瀏覽器廠商對於這些功能的支援有多重要。使用主題標記 #NotificationTriggers 將推文傳送至 @ChromiumDev，並告知我們您使用該標記的位置和方式。

實用連結

特別銘謝

通知觸發條件是由 Richard Knoll 和 Peter Beverloo 撰寫的說明器實作，並由 Richard 提供。以下讀者看過這篇文章：Joe Medley、Pete LePage，以及 Richard 和 Peter。主頁橫幅 (由 Lukas Blazek 提供 Unsplash 上提供)。