Navigator.setAppBadgeを使って、iOS16.4のPWA（Progressive web apps）にアプリケーションバッジを付ける 📛

iOS16.4からWebサイトでもプッシュ通知を受け取れるようになりました。

Safariでプッシュ通知を受け取る条件

❶ httpsでWebサイトをつくる
❷ ❶のウェブサイトをホーム画面に追加する（displayをstandaloneにする）
❸ ユーザーアクションきっかけで通知の許可をとる

が、必要なようです。

developer.apple.com

最終的にはサーバからプッシュ通知を送信することを目指しますが、今回は Navigator.setAppBadge を使い、ローカルでアイコンにバッジを付与してみます。

developer.mozilla.org

ソースコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>pwa app badge</title>
    <link rel="manifest" href="./manifest.json" />
  </head>
  <body>
    <button class="push">push</button>
    <button class="badge">badge</button>
    <button class="clear">clear</button>
    <button class="reload">reload</button>
    <p id="permission"></p>
    <script type="module">
      document.querySelector('.push').addEventListener('click', requestPermission);
      document.querySelector('.badge').addEventListener('click', () => {
        navigator.setAppBadge(0 | Math.random() * 9 + 1);
      });
      document.querySelector('.clear').addEventListener('click', () => {
        navigator.setAppBadge(0);
      });
      document.querySelector('.reload').addEventListener('click', () => {
        location.reload();
      });

      function requestPermission() {
        if (!window.Notification) {
          return;
        }

        Notification.requestPermission().then((permission) => {
          document.getElementById('permission').innerText = permission;
        });
      }
    </script>
  </body>
</html>

manifest.json

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "AppBadge",
  "short_name": "AppBadge",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000",
  "description": "アプリケーションバッジ検証"
}