PWAという概念を知ったので早速適用してみた

公開日: Fri, 09 Apr 2021 | 元記事

自作TODOアプリ→マグロクエストのWebアプリケーションからネイティブアプリケーションへの作り変えを模索していたら、PWAという概念に出会いました。 そもそもネイティブアプリ化したい理由は、通知やらなんやらができるようにしたいところ。TODOに通知機能は必須ですよね。 ウェブアプリだとそこらへんに限界があるので、ウェブアプリでとりあえず動くようにしてから、ネイティブアプリへの切り替え、というのが既定路線なんだけど、今書いているVue.jsの双方向バインディングとコンポーネントの考え方が便利すぎて、ものすごく尻込みしています。 さっと調べただけでも、Kotlinの双方向バインディングは学習コストが高そうだし、xmlとktコードが分かれていたり、膨大なライブラリに対する理解が必要だったり、もう考えただけで辛い(=ある意味楽しい)ので、まずは逃げの一手でPWA化という手もあるのかなと思って調べ始めた。 で、下記のページを参照に適用してみた。Vue.jsで作ったWebアプリのPWA対応とキャッシュ問題への対策

ほぼその通りに追加。ただ、記事内にあるmanifest作成ページがうまく動かなかったので、アイコンだけは適当に2サイズだけ作って完了。 で、できたのがこちら。 [

[画像]

](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0jf9qTsB0sv8qNcSqh2k6pgWIJUKdEfnh-DEeZKwQbwREcqR2Ko8vqur41Ajb8d9jXWpVH3lhHK4mQFkFqLuyc6duOYfBR1MK8BgHE-v1Oy4NgwKzOAHWMATevpv3a2EzynnKR3ey0q9/s1600/1617961688744130-0.png)

おお!ちゃんとアプリっぽい! オフラインでもちゃんと動作します。すごい。 とりあえず、これでどこまでいけるか試してみて、ぶち当たったらKotlinの勉強に入るかな。