iOS16.4からWebサイトでもプッシュ通知を受け取れるようになりました。
Safariでプッシュ通知を受け取る条件
❶ httpsでWebサイトをつくる
❷ ❶のウェブサイトをホーム画面に追加する(displayをstandaloneにする)
❸ ユーザーアクションきっかけで通知の許可をとる
が、必要なようです。
最終的にはサーバからプッシュ通知を送信することを目指しますが、今回は Navigator.setAppBadge を使い、ローカルでアイコンにバッジを付与してみます。
ソースコード
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": "アプリケーションバッジ検証" }
DEMO
❶ ウェブサイトをホーム画面に追加
❷ pushボタンを押下し、通知を許可(初回のみ)
❸ badgeボタン押下で適当な数字がアプリケーションバッジとして付与される
❹ clearボタン押下でバッジが削除される
という挙動が確認できます。