本頁面由 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 標記。

特徵偵測

您可以檢查瀏覽器是否支援 Notification Triggers，方法是確認是否有 showTrigger 屬性：

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

安排通知

排定通知的做法與顯示一般推播通知類似，但您必須將 showTrigger 條件屬性傳遞至通知的 options 物件，其中 TimestampTrigger 物件為值。

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 開發人員工具的「Notifications」窗格，該窗格位於「Application」面板中。 — 已排定通知。

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

示範

您可以在示範中查看通知觸發事件的運作情形，這項功能可讓您排定通知、列出已排定的通知，以及取消通知。原始碼可在 Glitch 上取得。

安全性和權限

Chrome 團隊根據「控管強大網頁平台功能的存取權」一文中定義的核心原則，設計並實作 Notification Triggers API，包括使用者控管、資訊公開和人體工學。由於這個 API 需要服務工作者，因此也需要安全的內容。使用 API 需要的權限與一般推播通知相同。

使用者控制項

這個 API 僅適用於 ServiceWorkerRegistration 的情況。這表示所有必要資料都儲存在相同的內容中，並會在服務工作者遭到刪除，或使用者刪除來源的所有網站資料時自動刪除。封鎖 Cookie 也會防止服務 worker 在 Chrome 中安裝，因此無法使用這個 API。使用者隨時可以在網站設定中停用通知。

透明度

與 Push API 不同，這個 API 不依賴網路，這表示排定通知需要事先提供所有必要資料，包括 badge、icon 和 image 屬性參照的圖像資源。也就是說，開發人員無法觀察到排定的通知，而且在使用者與通知互動之前，系統不會喚醒服務 worker。因此，目前沒有任何已知的方式，可讓開發人員透過可能侵犯隱私權的做法 (例如 IP 位址地理位置查詢) 取得使用者資訊。這項設計也允許這項功能視需要利用作業系統提供的排程機制，例如 Android 的 AlarmManager，以便延長電池續航力。

意見回饋

Chrome 團隊希望瞭解你使用通知觸發條件功能的體驗。

請告訴我們 API 設計

API 是否有任何部分無法正常運作？或者，您是否缺少實作想法所需的方法或屬性？對於安全性模型有任何問題或意見嗎？在 Notification Triggers 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 上提供。