「PWA Night vol.3 ~PWAのミライや活用方法をみんなで考えよう~」に参加してきました

  • PWA Night vol.3 ~PWAのミライや活用方法をみんなで考えよう~に参加してきました。

pwanight.connpass.com

  • 今回はキャッシュ周りの話が多く実践的なノウハウが多かったんじゃないかと思います。開発する時に資料活用させてもらいます。
  • 参加者全員の自己紹介があったので参加者の層もなんとなく分かってそれも良かったです(アカウント名とアイコンと紐付かないのが残念!)
タイトル 発表者
既存のWebサイトをPWA化してみよう~Sevice Worker導入手順解説~ 小椋陽太さん@アシアル
Cache APIに触れる @tiwu_officialさん
RoRをVueJS + Nuxt PWAで置き換えてみた 天野たけしさん@devMeTokyo
最大公約数的なServiceWorker制作から見るPWAの勘所 進藤龍之介さん@NPO法人日本Androidの会
ServiceWorkerのCacheでいろいろと問題が起きた話 biga816さん
Ionic PWA Toolkitについて scrpgilさん

既存のWebサイトをPWA化してみよう~Sevice Worker導入手順解説~

  • 小椋陽太さん@アシアル

PWAとは

  • Googleが推進するモバイルWebのユーザ体験の指針
  • Reliable
  • Fast
  • Engaging

ServiceWorker

  • バックグラウンドで動くスクリプト
  • アプリごとにブラウザに登録される

ServiceWorkerのイベント

  • install
  • wait
  • activate
  • uninstall

SWの更新

  • 全てのタブでアプリを終了すると次に開いた時に更新済みのものが適用される

Cache APIに触れる

PWAの特徴

  • その一つにネットワークに依存しない

CacheAPI

  • ServiceWorkerがキャッシュの仕組みを持ってるわけでない
    • requestのイベントを拾えるだけ
    • CacheAPIがキャッシュの機能を持っている
  • ServiceWorker内でなくても使える
  • 有効期限はない

プロダクトでのキャッシュの使い方

  • 一覧画面で詳細画面のリソースをキャッシュしておくとか
  • 新しいバージョンが来たら古いバージョンを消しておく

RoRをVueJS + Nuxt PWAで置き換えてみた

  • 天野たけしさん@devMeTokyo

PWAの効果

www.pwastats.com

PWAの導入

  • 新しいことをやらないといけないか?
    • 今あるアプリを改良するとKPIや売上があがる
    • 既存のビジネスモデルを変える必要はない

最大公約数的なServiceWorker制作から見るPWAの勘所

PWA4WP

  • WordPressのPWAプラグインを作った
  • PWAはキャッシュが命
    • キャッシュファースト/オフラインファーストの選択
    • キャッシュするファイルの選択
    • キャッシュの有効期限
    • キャッシュファーストとオフラインファーストの組み合わせは今後実装
  • キャッシュするしないの選択が大事

ServiceWorkerのCacheでいろいろと問題が起きた話

  • biga816さん

キャッシュ上限に到達

  • 画像を全部キャッシュしてた
    • 容量上限に達してしまった
  • 上限や期限を設定しないといけなかった

開発環境でのみキャッシュの上限に到達

  • 開発中はAoTコンパイルしてないのでコードの量も大きかった
  • 定期的にキャッシュ削除

キャッシュから動画が再生されない

まとめ

  • 容量上限意識する必要あり
  • 無限に増えるコンテンツはCDN使った方がいい

Ionic PWA Toolkitについて

  • scrpgilさん

Ionic

  • Ionic4はAngular捨ててWebComponentsベースのUIフレームワークになった
    • ReactとかVueでも使えるようになった
  • cordvaからcapacitorに変わった

PWA Toolkit

ionicframework.com

  • ionicチームが出してる
  • デフォルトでいろんな設定やってくれてる
  • スタータープロジェクトが充実