改善 Chrome 50 中的網頁通知功能 - 圖示、關閉事件、Renotify 偏好設定和時間戳記

推送通知可讓您為使用者提供類似應用程式的使用體驗,並在有重要且及時性的更新 (例如收到的即時通訊訊息) 時發出提醒。通知平台在瀏覽器上相對較新,且隨著用途和需求越來越大,我們對通知的 API 新增了許多功能。Chrome 50 版 (2016 年 3 月推出 Beta 版) 也不例外,沒有不到四個新功能可讓開發人員進一步控管通知。您可以:

  • 將圖示新增到通知按鈕,
  • 修改時間戳記 方便提供一致的體驗
  • 追蹤通知關閉事件,協助同步處理通知並提供分析資訊
  • 管理通知體驗 (通知取代目前顯示的通知時)。

Chrome 50 還新增了推播通知的酬載。如要即時掌握在 Chrome 中實作的 Notifications API 通知,請遵守spec規格問題追蹤工具

使用自訂圖示建立引人入勝的動作按鈕

我在最近一篇 Chrome 49 版通知動作按鈕的文章中提到,您無法在通知按鈕中附加圖片,讓圖片看起來更出色、更有吸引力,但可以使用萬國碼 (Unicode) 字元來內嵌表情符號等。現在別擔心,透過這個近期新增項目,您現在可以在動作按鈕上指定圖片:

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like', icon: 'https://example/like.png'},
    {action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
桌面通知

動作圖示的外觀會因平台而異。舉例來說,在 Android 上,圖示將在 Lollipop 以上版本中套用深灰色篩選器,而在 Lollipop 版本之前的白色篩選器則是全彩,而電腦版則是全彩。(注意:請參閱電腦版的未來討論。)部分平台甚至可能無法顯示動作圖示,因此請務必使用圖示提供動作背景資訊,而非做為意圖的唯一指標。

最後,由於必須下載資源,因此建議您盡可能縮小圖示,並在安裝事件中預先快取圖示。(撰寫本文時,在 Chrome 中擷取通知資源尚未透過 Service Worker 轉送)。

通知關閉事件

使用者可以運用通知經常要求的一項功能,瞭解使用者關閉通知的時間。我們必須等到近期對通知規格異動新增通知關閉事件後,才能執行這項操作。

使用通知點擊和通知關閉事件,您可以瞭解使用者如何與通知互動。他們是否願意長時間保持敞開,然後主動關閉,還是立即回應。

同步處理裝置間的通知常見用途之一,如果使用者在電腦上關閉通知,也應該關閉行動裝置上的相同通知。我們尚未提供無訊息執行此動作的功能 (提醒您,每個推播通知都必須顯示通知),但藉由使用通知關閉,您可以追蹤伺服器上使用者的通知狀態,並在使用者使用其他裝置時與其他裝置同步,從而提供處理此情況的功能。

如要使用通知關閉事件,請在 Service Worker 中註冊該事件。這個事件只會在使用者主動關閉通知時觸發,例如使用者關閉特定通知,或關閉系統匣 (Android 裝置) 中的所有通知。

如果 requiredInteraction 旗標設為 false 或未設定,那麼使用者若未手動關閉通知,而是由系統自動關閉,則不會觸發通知關閉事件。

以下顯示簡單的實作方式。使用者關閉通知時,您將獲得可執行自訂邏輯的通知物件存取權。

self.addEventListener('notificationclose', e => console.log(e.notification));

您可以在通知產生器中進行測試,關閉通知後就會收到快訊。

更換現有通知時也不會讓使用者感到困擾

當他提倡「因為有強力的權力而負起責任」時,我很確定 Uncle Ben 談到通知系統,而非 Peter Parker 的力量。通知系統是使用者與使用者互動的強大媒介。如果您濫用他們信任,對方會關閉所有通知,而您也可能完全失去這些通知。

建立通知時,您可以讓通知建立可聽見的快訊或震動,以吸引使用者註意。此外,您可以在新通知物件上重複使用「tag」屬性來取代現有通知。

在 Chrome 50 以下版本中,您每次建立通知或替換現有通知時,都會執行震動模式或播放音訊警示,這可能會讓使用者感到困擾。在 Chrome 50 版中,您現在可以透過名為「renotify」的簡易布林值標記,控制通知期間會發生的情況。如果將相同的「標記」用於後續通知,新的預設行為是靜音,開發人員必須將標記設為「true」,選擇為使用者「重新通知」使用者。

self.registration.showNotification('Oi!', {
  'renotify': true,
  'tag': 'tag-id-1'
});

您可以在通知產生器中試用這項功能。

管理向使用者顯示的時間戳記

根據預設,在 Android 裝置上,Chrome 的通知會在右上角顯示建立時間。很抱歉,這可能不是通知實際產生的時間。舉例來說,事件可能會在裝置離線時觸發,或是即將舉行會議的通知顯示。自 Chrome 50 版起,Chrome 已新增新的「timestamp」屬性,讓開發人員能夠提供通知中顯示的時間。

self.registration.showNotification('Best day evar!', {
  'timestamp': 360370800000
});

目前只有 Android 版 Chrome 會顯示時間戳記。雖然無法在電腦上查看,但會影響行動裝置和電腦上的通知順序。