[Task] PWAインストールのトースト通知

[wiyco]

Tasks (Features)

TEAM PIPLUP 🐧

@wiyco

Overview of Tasks (Features)

タスクの概要

PWAインストールを促進するためのトースト通知をWebプレビュー時に表示する

• PWAの場合は通知しない

Todo

想定される作業

• [x] PWAのドキュメント調査
• [ ] トースト通知コンポーネントの作成
• [ ] トースト通知の導入

Before submitting

Warning

以下はチェックのみ編集を許可する。(内容の追加および変更は禁じる)

• [x] 行動規範(Code of Conduct)に同意します。

Remark

補足事項を記入してください。

[wiyco]

調査

PWAのドキュメント調査

11/24/2023

Best

PWAか否かは beforeinstallpromptイベントにて取得できる。 が、今のところSafariは対応していないため、別の方法を検討する必要がある。

Hack

トースト通知の条件はPWAのみから初回起動のみになってしまうが、localStorageを使うことで、重複する(鬱陶しい)通知を回避できる。 また、AndroidとiOSでPWAとブラウザにおけるlocalStorageのスコープが違うため、以下のような動作になると予想される。

• Androidは、ブラウザにて一度のみ表示され、以後ブラウザ/PWAどちらも表示されない。
• iOSは、ブラウザにて一度表示され、PWAにてもう一度表示される。以後、ブラウザ/PWAどちらも表示されない。

現時点では、上記の方法がベストか。