pwaの導入方法(ios, android)

基本的にはこれで OK
PWA 導入までの 3 ステップと、簡単なオフライン対応まで
なんだけど実はこれだけだと ios だとアイコンが反映されない

なので解決策として index.html に以下の行を追加すれば OK

1
2
3
4
5
6
7
8
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script
async
src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.9/pwacompat.min.js"
integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc"
crossorigin="anonymous"
></script>

なんか google 様が ios 用にいい感じに色々してくれてるらしい。
神かよ

あとアイコン画像は1枚用意すれば後は
Web App Manifest Generator
で複数サイズ一気に作成できるから便利

参考
初心者がつまづいた、PWA アプリ Safari 版でホームボタンのアイコンが読み込まれない件
PWACompat: the Web App Manifest for all browsers

以上

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×