PWA Night vol.3 ～PWAのミライや活用方法をみんなで考えよう～に参加しました
4/17のPWA Night vol.3 ～PWAのミライや活用方法をみんなで考えよう～にブログ枠で参加しました。 pwanight.connpass.com
各発表の内容と感想等をまとめます。
初めてのPWA開発 あなたのWebサイトがPWAになるまで
PWAとはGoogleが推進する先進的なモバイルウェブのユーザ体験の指針
- Reliable
- Fast
- Engaging
- ネイティブアプリのように直感的に操作できる
- PWAでできることの中で以下の三つについて話す
- ネットワークに接続に依存しない
- インストール可能
- 常に最新
Service Worker
- アプリごとにブラウザに登録され、バックグラウンドで動くスクリプト
- swのイベント
- install
- ブラウザに登録
- activate
- アプリを制御できる状態
- wait
- 更新の登録待ち
- unintall
- ブラウザへの登録を解除
- install
Service Workerが更新された時の流れ
- すぐにswはインストールされずに待機状態になる
- ユーザがアプリケーションを終了するとswがアップデートされる
- そのあと最新のリソースをswが取得する
各場合別の挙動
PWAを実装する
- ネットワーク接続に依存しない
常に最新
- を満たす
installイベントでアセットをキャッシュする
- 2回目以降はアセットのリクエストを検知する
- fetchイベントで検知
- データのリクエストを検知する
- キャッシュのキーをswのバージョンにしておくことで、swを更新した時に最新のキャッシュを最新にする
Q&A
- アプリが使えるキャッシュストレージの容量
ブラウザによってバラバラ
ブラウザ標準のHTTPキャッシュ機能の影響は？
わからない
ブラウザごとの対応状況の違いへの対処
- アプリにとって重要な役割を担うような使い方は避ける 必要であれば非対応環境のユーザに向けてその旨と解決方法を伝える方法を考える
Cache APIに触れる by @tiwu_officialさん
「ネットワークに依存しない」とは
- swがリクエストを傍受してキャッシュしたデータを返す
swは
- プッシュ通知
- バックグラウンド同期
- オフライン対応
- やってくれる
respondWith()でレスポンスを返す
- caches.open()でキャッシュ取得
- cache.match()でキャッシュが存在するか判定
- 存在したらreturn responseでレスポンスを返す
swがキャッシュの仕組みを持っているわけではない
window、workerスコープで利用できる
- localstorageと同じ感覚
- swで結びつけて使う必要はない
- 有効期限は持てない
- StorageEstimate APIでキャッシュ使用状況がわかる
- グローバルにcachesという変数がある
Cache API
- caches.open()の引数を別にすることで複数のキャッシュを持つことができる
- メソッド（更新系）
- put(request, response)
- 追加系
- add(request)
- 取得系
- match(request, options)
- options
- ignoreSearch: クエリーを無視する
- ignoreMethod: メソッドを無視する
- options
- matchAll(request, options)
- match(request, options)
- 削除系
- delete(request, options)
- その他
- keys
プロダクトでの使い方
- 一覧の詳細で必要な静的リソースを読み込む
- 古いバージョンを消して新しいキャッシュを作る
まとめ
RoRをVueJS + Nuxt PWAで置き換えてみた by 天野たけしさん@devMeTokyo
みんなが普段使っているサービスは、世界最速のサービス
- PWA対応済み
- ユーザの期待値は高くなっている
- 常にオリンピックを見ているのでそれ以外は県大会レベルに見える
- 少しでもオリンピックに近づけないといけない
PWA化で実現すること
- サイトパフォーマンスが上がる
- PWA StatsはPWAの成功事例がまとまっている
ITのプロジェクト
- 何か新しいことをやらないといけない？
- 今あるサイトを改良するとKPIや売り上げが上がる
- 既存のビジネスモデルを変える必要がない
PWAへ置き換えをした
JAM STACK
- JavaScript -> Vue, React
- APIs -> GraphQL, REST
- Markup(静的サイトジェネレーター) -> Nuxt, gatsby
置き換え後の各レイヤー
データ取得: RoR->Lambda
- Lambdaでmodel諸々を置き換える
- serverlessなのでアクセスに耐えられる
- インフラ
- EC2->S3+Cloudfront
- EC2やめたのサーバー管理費が安くなった
ユーザ認証: 独自実装->Auth0
- ログイン周りの実装がシンプルに
- custom databaseを使って既存のユーザの移行可能
- 日本語の対応それなりに必要
MySQL RDS
- 唯一弄らなかったところ
各KPIの改善など
- リリース後にまたお伝えします
LT-1: 最大公約数的なServiceWorker制作から見るPWAの勘所 by 進藤龍之介さん@NPO法人日本Androidの会
みんなの環境にマッチしやすいPWA
- ->最大公約数的なプラグイン機能を作った
- PWAはキャッシュが命
- Cache FirstとOnline First
- キャッシュの除外
- キャッシュされてはいけないものを除外する
- 正規表現で柔軟にURLを指定
- キャッシュの有効期限
- 古いキャッシュを一定期間で捨てる
- キャッシュする｜しないの切り分けが大事
LT-2: Service Workerのcacheで色々問題が起きた話 by biga816さん
- 地下アイドルDAppsを作っていた
- ionic3を利用
- SW-Toolboxを利用(今はDeprecatedとなっている)
起こった問題
キャッシュの上限を超えた
- 解決策
- キャッシュの上限数を決めた
- 解決策
開発環境のみ上限を超えた
- AoTコンパイルが実行されていなかったのでそのファイルもキャッシュされていた
- 解決策
- 定期的にキャッシュ削除した
- ローカルで開発するときはswをオフにする
キャッシュから動画が再生されない
キャッシュ対象はオフラインで最低限参照できるファイルに絞る方がいい
LT-3: Ionic PWA Toolkitについて by scrpgilさん
- Ionicについて
- Ionic4 ReactやVueでもかける（Angularをすてた）
- PWA Toolkitについて
- デフォルトでworkboxが設定済み
- などなど盛り込まれている
- これからPWA始めるなら圧倒的敷居の低さ
感想とまとめ
- PWA対応はwebアプリのUXを改善する為に行うもの
- アプリのパフォーマンス改善こそがコンバージョン率などKPIの向上に繋がる
- PWAのiOS対応はやはりどこも苦心されている様子だった
- iOSの各バージョンがPWAにどこまで対応できているのかまとめとかないんだろうか
- キャッシュ戦略考えるの楽しそうだけど、すでに動いているサービスのリソースを全部洗い出して適用させていくのはかなり骨が折れそう
- 新規実装する場合は、初めからキャッシュ戦略を考えながら実装できると良さそう
- PWAは関係ないけど、serverless framework勉強しようと思った
- EC2の利用料下げれるの美味しい
- Hasura GraphQL EngineというPostgreに対応したGraphQL Serverを構築できるエンジンがある
- Prismaってのもある
- Ionic3以前は触って見たいと思わないが、Ionic4は良さそう
- PWA Toolkitもかなり良さそう
- PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～もすでに公開されていました
- 1ヶ月後なのにもうトーク内容が決まってるのすごい
