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 列表中

• 可以用手机或电脑打开後点选安装 https://linyencheng.github.io/pwa-badging-api/

2. 开启 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));
});