iPhoneのPWAで通知バッジが付かないと思ったら付いていた話

前回、自治会HPにPWA通知機能を実装しました。

通知自体は無事に動作し、

• Mac
• iPhone

の両方で通知を受信できるようになりました。

ところが気になったことがありました。

自治会連合ホームページでは、通知が届くとアプリアイコンに赤丸が付きます。

回覧板
🔴1

という感じです。

一方、現在開発中の自治会ホームページでは通知は届くものの、赤丸が付いていないように見えました。

本当に付いていないのか？

まずiPhoneの通知設定を確認しました。

設定
↓
通知
↓
回覧板

を確認すると、

通知
サウンド
バッジ

はすべて有効になっていました。

それなのに赤丸が見当たりません。

「やはりPWAだから無理なのだろうか？」

と思い始めました。

実は付いていた

ところがホーム画面をよく見ると、

回覧板
🔴1

と表示されていました。

付いていないと思っていた通知バッジは、実は正常に動作していました。

完全に見落としていただけでした。

次の疑問

今度は逆に、

なぜ消えないのか？

が気になり始めました。

通知を確認しても赤丸が残っていたからです。

そこで試しにアプリ起動時に

navigator.clearAppBadge()

を実行してみました。

消える時と消えない時がある

ところが結果は予想外でした。

通知からアプリを開く
↓
赤丸が消える

一方で、

ホーム画面のアイコンから開く
↓
赤丸が残る

という動きになりました。

原因

調べてみると、

通知から開いた場合はアプリが新しく起動されるため、

useEffect()

が実行されます。

しかし、

既にアプリが起動したままの状態でホーム画面アイコンから戻った場合は、

Reactのコンポーネントが再生成されません。

そのため、

clearAppBadge()

も実行されませんでした。

結論

最終的には、

通知が届く
↓
赤丸が付く
↓
通知から開く
↓
赤丸が消える

という動作になりました。

自治会用途としては十分実用的なので、ここで実装を終了することにしました。

学び

今回の一件で、

「バッジが付いていない」

と思ったら、

実際には

「付いていることに気付いていない」

だけだったことが分かりました。

そしてPWAでは、

• 通知センター
• 通知バッジ
• アプリのライフサイクル

も理解する必要があることを学びました。

通知機能の実装が終わったと思ったら、最後にもう一つ勉強させられた出来事でした。