iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

前端三分鐘 X Progressive Web App 30 天製造解密系列 第 8

Progressive Web App Badging API 入門實做 (8)

什麼是 Badging API

Badging API 讓 App 能夠顯示通知數字,不過通知數字的位置會依照平台的不同而有所差異。

  • 常見是用來通知用戶,像是訊息或是推播數量都能夠透過這個通知數字來實現
    • Email 未讀、訊息未讀
    • 待辦事項
    • 遊戲任務
  • 不需要任何使用者權限即可使用
  • 支援 Windows、macOS、Chrome 81+、Edge 84+

Badging API (圖片來源: https://web-dev)

Badging API 推播網頁實做

其實實作上蠻容易的,就是只要有 API 存在就可以設定,沒有則代表不行。

  1. App 需要被安裝,被安裝過後就會出現在 App 列表中
  1. 開啟 PWA 測試 Badging API
  • 直接叫用設定
  • 透過 Service Worker 叫用設定

注意事項

  • 99 以上會被改成 99+ 所以如果不想顯示 99+ 也可以自行改成 99
  • Chrome App Badging API 要求 App 要先被安裝
  • 背景執行也支援透過 service worker 去叫用,所以可以整合推播

跨瀏覽器支援的寫法,在前景透過程是直接叫用,就是先判斷有沒有這個 API 原則上有就是可以設定。


function setBadge(...args) {
  if (navigator.setAppBadge) {
    navigator.setAppBadge(...args);
  } else if (navigator.setExperimentalAppBadge) {
    navigator.setExperimentalAppBadge(...args);
  } else if (window.ExperimentalBadge) {
    window.ExperimentalBadge.set(...args);
  }
}

function clearBadge() {
  if (navigator.clearAppBadge) {
    navigator.clearAppBadge();
  } else if (navigator.clearExperimentalAppBadge) {
    navigator.clearExperimentalAppBadge();
  } else if (window.ExperimentalBadge) {
    window.ExperimentalBadge.clear();
  }
}

透過 Service Worker,也是一樣先進行判斷後直接叫用,有就可以設定。

let requestCounter = 0;

self.addEventListener('fetch', function(e) {
  if ('setAppBadge' in navigator) {
    navigator.setAppBadge(++requestCounter);
  }
  console.log('[Service Worker] Fetch', e.request.url);
  e.respondWith(fetch(e.request));
});


上一篇
Progressive Web App Checklist: 優化檢核清單項目說明 (7)
下一篇
Progressive Web App Shortcuts: 程式快速啟動選單 (9)
系列文
前端三分鐘 X Progressive Web App 30 天製造解密30

尚未有邦友留言

立即登入留言