shwld7 years agoiPhoneアプリのAndroid版をPWAで作った話
「月齢カレンダー」赤ちゃんの月齢がひとめでわかるアプリ という iPhone アプリを作っています。
このアプリの Android 版をリリースしました。
Android 版 はこちらです。是非試してみてください。
今回PWAというのを使って作りました。
PWA とは
はウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。
以下、作りながら悩んだことなどの自分用ふりかえりを残しておきます。
PWA で作ろうと思った理由
Android 殆どやったこと無いし今から覚えるのはちょっと気が乗らない
TWAっていうのを使えば Android アプリと PWA 統合できるらしいというのを見た
PWA ってどんなモノ?実際に作ってみたかった
どうせなら Web 版もリリースしたかった
SPA は作ったことがあったがパフォーマンス面で課題があり以下を試してみたかった
Service Worker のキャッシングどうやるんだろう。どういう体験になるんだろう
SSR、Code Splitting による初回ロードの効率化ってどうやるの
App Shell ってどうやって実装するの。初回ロードどのくらい早くできる
next.js を触ってみたかった
YWT(やったこと/わかったこと/つぎにすること)
やったこと
PWAで作った！
Workboxを使って実際に PWA を実装する方法を知れた
Web と Android 向けに同時リリースできた
Android はネイティブ(Kotlin)でほぼ WebView のみのガワアプリを作った
TWAはやらなかった
next.js で作った！
SSR(サーバーサイドレンダリング)やった！
MaterialUI 使った
Firestore を使ってみた
Lighthouseを使って品質の高い Web アプリを目指した
AppShellぽいものを実装できた
SSR(サーバーサイドレンダリング)やってみた
Code Splittingやってみた
わかったこと
ServiceWorker 便利！Offline で動く Web アプリも簡単に作れるのがわかった
ServiceWorker 便利！キャッシュの設定も細かくできることがわかった。
キャッシュの設定は難しそうと思ってあまり手を出してこなかったが、ServiceWorker のキャッシュならプロダクションでも使えそう
Workbox 便利
TWAはまだ Chrome の canary/dev しか対応していない
SSR はしなくても良いのでは?firebase functions でやったこともありあまり早く感じなかった。メタの埋め込みなども今回は必要ないうえ、MaterialUI とかその他諸々面倒な対応が必要になり、メリット < 手間 に感じた
Code Splitting や App Shell にまつわるリソースの読み込みタイミングは構築初期からずっと意識しながら作る必要がある。
next.js は nuxt.js よりも簡素に感じた。url パラメータを含むパスを設定する方法がサーバーサイドしか無いのが残念
React はやっぱり良い。
匿名認証はやっぱり良い。
WebView からだと Google 認証が通らない(くなってたことを忘れてた)
ユーザーエージェントを変えたら通ったが、パスワード入力させたくないのでホントは Chrome Custom Tabs とか TWA でやりたい
つぎにすること
TWA が使えるようになったら WebView やめて移行したい
初回描画は早いが初回ロードが長いので、もっと早くしたい
Lighthouse もっとスコア上げる実装をしたい
Code Splitting をもう少し頑張りたい
UI フレームワークをコンポーネントなしのレイアウトのみとか最低限のものにして自前 css を頑張るのを一度試してみたい
iPhone 版から移植できていない機能を実装したい
広告
レビューへの動線
shwld