透過推播通知,您可以為使用者提供優質的應用程式體驗,提醒他們即時收到重要更新,例如即時通訊訊息。通知平台在瀏覽器中相對較新,隨著越來越多用途和需求逐漸成形,我們也看到許多用於通知的 API 新增功能。Chrome 50 (2016 年 3 月的 Beta 版) 也不例外,其中有四項新功能可讓開發人員進一步控管通知。您將可執行下列操作:
- 在通知按鈕中加入圖示
- 修改時間戳記,以便打造一致的體驗。
- 追蹤通知關閉事件,協助同步通知並提供分析資料
- 在通知取代目前顯示的通知時,管理重新通知體驗。
Chrome 50 也新增了推播通知的酬載。如要隨時掌握 Chrome 中實作的 Notifications API 最新資訊,請參閱規格說明和規格問題追蹤器。
使用自訂圖示建立引人入勝的動作按鈕
在最近一篇關於 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 路由)。
通知關閉事件
使用者關閉通知時,通知功能經常要求能夠知道這類情況。直到通知規格最近的一系列變更新增了 notificationclose 事件,我們才有辦法做到這一點。
您可以使用 notificationclick 和 notificationclose 事件,瞭解使用者如何與通知互動。是讓通知顯示一段時間後再主動關閉,還是立即採取行動。
其中一個常見用途是能夠在裝置之間同步處理通知。如果使用者在電腦裝置上關閉通知,行動裝置上的同樣通知也應一併關閉。我們目前還無法以靜默方式執行這項操作 (請注意,每則推播訊息都必須顯示通知),但透過使用 notificationclose,您就能在伺服器上追蹤使用者的通知狀態,並在使用者使用其他裝置時同步處理,藉此處理這項作業。
如要使用 notificationclose 事件,請在服務工作者中註冊該事件,且只有在使用者主動關閉通知時才會觸發,例如使用者關閉特定通知或關閉用戶端 (在 Android 上) 中的所有通知。
如果 requireInteraction 旗標為 false 或未設定,如果通知並非由使用者手動關閉,而是由系統自動關閉,則不會觸發 notificationclose 事件。
以下是簡易實作方式。當使用者關閉通知時,您將可存取通知物件,並執行自訂邏輯。
self.addEventListener('notificationclose', e => console.log(e.notification));
您可以在通知產生器中進行測試,關閉通知後就會收到警示。
取代現有通知時,請勿打擾使用者
我很確定 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 已新增新的「時間戳記」屬性,可讓開發人員提供應在通知中顯示的時間。
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
目前只有 Android 版 Chrome 會顯示時間戳記。雖然這項設定不會顯示在電腦上,但會影響行動裝置和電腦上的通知順序。