「Web Working Group 「PWAに備える３ヶ月」 vol.3」に参加してきました

• 2018/5/31
• https://japan-android-group.connpass.com/event/87237/
• https://youtu.be/Yx7OyaE8Sd4

Cache 自由自在

• 進藤龍之介さん
• https://www.slideshare.net/RyuShindo/cache-99772140

PWAの動作

• SWがオンラインコンテンツとキャッシュの仲介

キャッシュをどう使うか

• なぜキャッシュ
  • 高速化
  • ネットワーク節約
  • オフライン対応
• 考慮点
  • 更新の反映
  • インタラクティブなコンテンツ
• 3パターン
  • cache first
  • network first
  • no cache

CacheAPI

• API
  • match/matchAll
  • add/addAll
  • put
  • delete
  • keys
• 有効期限はない
• 適用例
  • SPA
    • AppShellとそれ以外が分かれてシンプルな設計
  • 従来型SSR
    • 固定コンテンツとそれ以外の制御

キャッシュの削除

• Activate時に削除する
• 更新タイミング
  • SWはオンライン時に同期次回起動時に更新されたものが動作
  • Cacheは明示的に更新するかSWのActivate時に削除しないとだめ
• 対策
  • IndexedDBにタイムスタンプとURL記録
  • Workboxのexpiration.Plugin
    • PWAライブラリで有効期限的なのはこれ以外みない

PWAフレームワーク

PWA Builder

• マイクロソフト製
• PWAを生成するツール
• 既存サイトをPWA化
  • manifestとかもともとあったらそれベースに作ってくれる
• https://github.com/pwa-builder/serviceworker

Workbox

• google製
• オフラインサポートのためのライブラリ
• ライブラリのjsを読み込むようにする
• キャッシュするURLを正規表現とかで指定できる
• プラグインもいろいろ
  • キャッシュの有効期限も指定可

総称

• 2つを組み合わせると便利
  • PWA builderで原型つくる
  • Workboxで細かいところを

今から開発できる、Progressive Web Apps

• 物江修さん(マイクロソフト)
• https://www.slideshare.net/osamum/web-progressive-web-apps

PWAとは

• 2015/11のChrome Dev Summit
  • もともとはGoogleの人のブログ記事
• クライアントの性能に合わせた機能
  • IEなら従来通りとかってこと
• これまでWebになかった機能
  • オフライン
  • プッシュ通知
  • バックグラウンド所為r
  • アイコンの追加
• これらは新しいAPIが追加された
  • SW
  • Web App Manifest
• Webのメリット
  • SLICE
  • FIRE

PWAのメリット

• ServiceWorker
  • バックグラウンドで動作するプログラミング可能なネットワークプロキシ
• 既存のWebページに後付でもいける
  • sw.jsとそれを登録する崇敬
• 何をキャッシュ
  • AppShell
    • UIが機能するために必要最小限のリソース
    • 要件にあったアセット
    • モバイルの場合ストレージ圧迫してしまうから注意
  • SWの更新
    • キャッシュは消えない
• 開発中にキャッシュしちゃうと反映されなくて面倒なので注意

PWA for windows

• Bingがweb上のPWA検出し自動でレビューしてストアに
• microsoftストアからダウンロードするとwindowsのAPIが使える
• sonarwhai
  • https://sonarwhai.com
  • lighthouse的な？

PWA位置づけ

• Nativeを置き換えるものではない
• 今までWebViewで十分だったってものならはまるかも

まとめ

• ServiceWorker
• Web App Manifest
• 各種API

PWA化するときのUIとスコープの設計について

• eegozilla
• 江頭さん
• abcのサイトPWA化した
• https://www.slideshare.net/hirokazuegashira/pwa-99950968

PWA対応してみた知見の話

• 多言語対応
  • 言語ごとにディレクトリ切ってそこをルートにSW配置
• 一部分だけ多く使われるサイト
  • 戦略としてSWのスコープを調整した
• インストールされて使われてる場合は〜とか場合分けすると大変
  • start_urlのクエリを見て〜って感じで頑張る
• エンゲージメント
  • 初回アクセスのユーザとリピータは使い方が違う
  • それを考えた上でstart_urlを決める
• SPAでないとページにアクセスしないとキャッシュできない
  • SPAだと一発でまとめて
• オフラインのときはオフラインであることが分かるような画面を出してあげる
  • キャッシュしておいたコンテンツで誤解を与えたりしてしまわないように
• OS差の対応
  • ホームアイコン
  • スプラッシュはAndroidだけ
  • ローディングアニメーション
    • スプラッシュのあとにローディング画面出すものとか
    • アプリあがりますよってのを2回出してるみたいになる
  • iOSでのブラウザバック
    • 戻るを置くか遷移できるわかりやすいメニューを用意
  • Basic認証
    • iOSはBasic認証あるとmanifest.json読まない

重要だと思ったこと

• 誰向けのPWAなのか
  • エンゲージ指数が閾値を超えたユーザへのおもてなし
  • 有益な体験とは何なのか考えて
  • 初回ユーザ向けではないのでは？
    • コンテンツでエンゲージを上げた上での+α

使い所

• 社用スマホ
  • 事前にホーム画面追加
• イベントタイムテーブル
• ポートフォリオ/ギャラリー
• イベントタイムテーブル

注意点

• iOSとかトラブル起きがち
  • 公開する前に確認しておくこと