「月齢カレンダー」赤ちゃんの月齢がひとめでわかるアプリ というiPhoneアプリを作っています。

このアプリのAndroid版をリリースしました。

Android版 はこちらです。是非試してみてください。

今回PWAというのを使って作りました。

PWAとは

はウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。

以下、作りながら悩んだことなどの自分用ふりかえりを残しておきます。

PWAで作ろうと思った理由

  1. Android殆どやったこと無いし今から覚えるのはちょっと気が乗らない
  2. TWAっていうのを使えばAndroidアプリとPWA統合できるらしいというのを見た
  3. PWAってどんなモノ?実際に作ってみたかった
  4. どうせならWeb版もリリースしたかった
  5. SPAは作ったことがあったがパフォーマンス面で課題があり以下を試してみたかった
    1. Service Workerのキャッシングどうやるんだろう。どういう体験になるんだろう
    2. SSR、Code Splittingによる初回ロードの効率化ってどうやるの
    3. App Shellってどうやって実装するの。初回ロードどのくらい早くできる
  6. 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版から移植できていない機能を実装したい
    • 広告
    • レビューへの動線