目的：PWA と FireBase を試してみたかった
firebase init で現れる画面、テンション上がる
Github Pages + CloudFlare で独自ドメインの shunyaueta.com をホスティングしてたんですが、Firebase でホスティングできると聞いて Firebase に移行してみました。
PWA にしたのは完全に趣味です。
TL;DR;
- Web App を作ってる人は manifest.json を設置するだけでも Android の使用感が改善されそう
- 独自ドメインでお手軽に SSL ホスティングしたいなら Firebase hosting めっちゃおすすめです(1GB のホスティングは無料)
- FireBase Hosting だけだと Firebase 本来の旨味は味わえません
PWA
1 年前ですが、簡潔に PWA の事が書かれています
ServiceWorker と manifest.json,あとは<meta name=”theme-color”>を指定すると PWA のスコアが 100 点になる 🎉
manihest.json によるホームアイコン作成誘導
Favicon の各画像の生成は下記のサイトが便利でした。要求される解像度毎の画像(Favicon,Home icon, Apple home icon)が生成されて mahifest.json も同梱されます。(画像の圧縮率も選べる)
Favicon Generator for all platforms: iOS, Android, PC/Mac…
後は、
Learn how to build a PWA in 5 minutes
を参考に最小実装で実現しました。(Web 通知は無意味だから止めました)
CSS は Skelton を採用しました。(css only 実装で js がなくてシンプルで良い)
Web App やってる人は、実装コスト 1 時間程度で済むので皆 manifest.json を設置するべき!!!
kitamura さんの受け売りです
Web App Manifest については下記の記事が分かりやすいです。
Web App Manifest で Web アプリをインストール可能に - Qiita
というか皆 Chrome の中の人の記事だった(どうりで詳しいわけですね…)
ホスティング
Github Pages+CloudFlare(独自ドメイン運用)で SSL 認証された Web Page のホスティングを実現していました。
FireBase では、FireBase Hostingを使うことで独自ドメインでもデフォルトで https で Web サイトがホスティングされます(最高)
やり方は以下を参考
めっちゃ簡単にデブロイできます…!!
成果物
所感
今回は静的かつ小規模な Web サイトを PWA 化したので、恩恵殆ど無いですがまともな WebApp だと恩恵めっちゃ受けると思います。(Twitter Lite や日経電子版の web サイトなど)