- PWA Night vol.3 ～PWAのミライや活用方法をみんなで考えよう～に参加してきました。
- 今回はキャッシュ周りの話が多く実践的なノウハウが多かったんじゃないかと思います。開発する時に資料活用させてもらいます。
- 参加者全員の自己紹介があったので参加者の層もなんとなく分かってそれも良かったです(アカウント名とアイコンと紐付かないのが残念！)
| タイトル | 発表者 |
|---|---|
| 既存の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に触れる
- @tiwu_officialさん
PWAの特徴
- その一つにネットワークに依存しない
CacheAPI
- ServiceWorkerがキャッシュの仕組みを持ってるわけでない
- requestのイベントを拾えるだけ
- CacheAPIがキャッシュの機能を持っている
- ServiceWorker内でなくても使える
- 有効期限はない
プロダクトでのキャッシュの使い方
- 一覧画面で詳細画面のリソースをキャッシュしておくとか
- 新しいバージョンが来たら古いバージョンを消しておく
RoRをVueJS + Nuxt PWAで置き換えてみた
- 天野たけしさん@devMeTokyo
PWAの効果
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
- ionicチームが出してる
- デフォルトでいろんな設定やってくれてる
- スタータープロジェクトが充実
