Nuxt.jsから始めるPWA生活
gunma.webでLTしてきました。
テーマフリーということで、PWAへの取っ掛かりの内容で話してきました。
LT内容
- スライド
- DEMOページ
elated-knuth-617fed.netlify.com
以下、LTの補足内容です。知っている人には大した情報ではないので、最後( PWA iOSつらい問題について )だけ読んで、解決策知ってる方いたら教えていただけると嬉しいです。
デモの環境について
私が初めてPWAを実装を触った時(一年半くらい前？)にはもうNuxt.jsにpwaのモジュールがあり、ちらほらと記事をあげている人がいて、とっつきやすかったので、今回題材としてもNuxt.jsを使用しました。
静的ファイルをgenerateできるのも良いところで、以下コマンドでビルドしてnetlifyでホスティングしてサクッと見せられるのも良いところです。
$ yarn generate // ディレクトリ・dist内にgenereteされるのでそれをホスティング
PWAの '実装' について
LT冒頭で、PWAは特定の実装を指すものではない、ということを少し強調して話したのですが、googleの指針があったり、lighthouseでPWA実装状況が表示されるようになってたりで、何に対応していたらPWAか、ということが具体的にわかるものがあります。
例えばMicrosoftの PWABuilder を使用すればWebサイトのPWA実装状況を見ることができます。
ちなみに、デモサイトの結果は以下のような感じ。
pushManagerが実装されてない旨が表示されています。
サービスワーカーの利用について
さらに踏み込んだキャッシュ戦略を行う場合、今回紹介した範囲だけでなく、直接cache APIを利用する処理やServiceWorkerとやりとりする処理を書く必要が出てくる場合あるかもしれません。
その時はworkboxも利用できる状態なので、ドキュメント見ながら頑張るって感じになると思います。
自分もﾁｮｯﾄやったことはありますが教えられるほど詳しくない&いろいろ見てても泥臭い処理書いてる場合が多くてベストプラクティス、綺麗な書き方がわかっていない状態なので、むしろこの辺は細かく教わりたいですね......。
WebPushについて
今回のLTではあえてweb pushについてはあまり触れませんでしたが、OneSignal使うと比較的容易に実装できた気がします。お手伝いでやったけどうろ覚えです。
Nuxt.js pwaのドキュメントにも載ってるのでその通りにやるだけですが、iOSはまだ対応してないのでandroidとブラウザ/デスクトップPWAでしか通知はきません。
PWA iOSつらい問題について
言及している2つのポイント
- バージョンID情報アップデートしてもアプリが更新されない
- web pushがない
以外は個人的にはPWAとしてそこそこ使えるレベルにはなっていると思っています。
ただ、1の状況が直近なぜ起こっているのかわからず、androidでは正常に更新されるので、これが実装の問題じゃないのであればかなり致命的だなと。(業務アプリやる分にはOAuth情報保持されなくても画面reloadされる方がまだマシだった)
これ、だれかわかる人とか同じ状況起きたって人いたら教えてほしいです。
あとはスプラッシュが出ないとか細かいところはありますが、上記ができれば個人的にはより普及するんじゃないかと思っています。
最後に
深夜3時から4時頃にスライドの冒頭とデモ作ったので若干寒いネタが入ってるんですが、話す時はいかに寒いと思っても臆しないかが重要だということが勉強になったLTでした。(いったい何の勉強会なのか)
他の方の面白いLTも結構あったので、そのうちconnpass上に資料があがると思うので是非見てみてください。
