Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA A Go-Go !! @ABC2018A 20181013

677 views

Published on

ABC 2018 Autumn in KAWASAKI でのセッション「PWA A Go-Go !!」で使用した講演資料です。
PWA 実装、設計時に気をつけることや、PWA のトラブル回避などについて説明しています。

Published in: Technology
  • Be the first to comment

PWA A Go-Go !! @ABC2018A 20181013

  1. 1. PWA À Go-Go !! Make a good PWA, and be Happy. 2018.10.13 ABC 2018 Autumn in KAWASAKI Ryunosuke Shindo
  2. 2. 自己紹介 進藤 龍之介 エンジニア/日本Androidの会 Web Working Group PWA 集中勉強会主催 www.crowdfarm.jp 運営 WordPress プラグイン「PWA for WordPress」開発 Twitter @ryu_compin Fb ryushindo
  3. 3. モバイルにおける Web の存在 Web サイト不遇の時代?
  4. 4. スマートフォン使用時間に占める Web の使用時間は 15%(アプリ85%)
  5. 5. Web の立ち位置 Home App1 Google Web1 Web2 Web3 ・・・ SNS SNS 多くのユースケースにおいて • 入り口は検索か SNS • ブックマークなんて使わない • Web サイトは全部ひっくるめ て、検索や SNS シェアの先にあ る世界としてひとくくり、ひと つのアプリみたいに(無意識下 に)思われ、使われていない か?
  6. 6. PWA にかけられた期待 PWA で何が変わるのか
  7. 7. こうしたい Home App1 Google Web1 Web2 Web3 Web Web PWA PWA SNS 「ホーム画面へ 進撃する」
  8. 8. PWA の前に
  9. 9. エンゲージメントの壁 • 「ホーム画面に追加」を押してもらえるか • Push 通知を許可してもらえるか →Web サイトで通知の許可に「Yes」押したことありますか? →もっと言うと、初見のサイトで「Yes」押しますか? • 追加したアイコン、起動してもらえるか
  10. 10. PWA と相性がいいサイトの例 • 地域型の小さなビジネス • 空き状況や予約状況 • 予約者向けの通知 • 直接来店したときにインストール誘導できる • イベントサイト • スケジュールや会場の確認 • インフォメーションの発信 • ファンサイト
  11. 11. PWA で化けるサイトとも言える いずれもエンゲージメント確立済み Web にある既存の情報をローコストでアプリ化 →これまでコスト面でアプリには手が出せなかった →コストの壁を越える
  12. 12. PWA だから「Web アプリ」じゃないとダメ? • Web サイトと Web アプリの違い? どっちでもいい • アプリしか PWA になれないの? そんなことない • サイトをアプリ化しても意味ない? そんなことない
  13. 13. 事前考慮点 • 通知、インストールなどの「許可」をもらうタイミング、シ チュエーション • どこを見せたいか →空き状況、新着情報、など • インストールにこだわらず、パフォーマンス向上目的、という のもあり
  14. 14. PWA 実装準備
  15. 15. アイコン • png • 基本 192 x 192 • Apple Touch icon 用に 512 x 512 <link rel="apple-touch-icon" sizes="512x512" href=“xxx.png">
  16. 16. オフラインページ • オフライン時に表示するページ
  17. 17. キャッシュ計画 • キャッシュの基本 Cache first  Network first  No cache • コンテンツによって組み合わせる工夫も
  18. 18. パフォーマンスと更新反映のトレードオフ  Cache first  Network first  No cache (With OFFLINE Page) HIGH PERFORMANCE キャッシュの 利用度が高い ほどパフォー マンスはいい ContentUpdate Availability
  19. 19. キャッシュの更新タイミング • ServiceWorkerはオンライン時に同期され、 次回起動時に更新されたものが動作する • Cacheは明示的に更新するか、ServiceWorker のActivate時に削除、再取得する実装が一般的 • 既存のサンプルコードや実装例はこのパターンが多い このままじゃ新しく書いた記事が新着リスト に載らない!?
  20. 20. PWA for WordPress で工夫したところ • Online-First/Cache-First の2つの基本プラン • 柔軟なキャッシュの除外 • 正規表現で除外URLを指定可能 • キャッシュの有効期限 • キャッシュの焦げ付き防止
  21. 21. Push 計画 Push 許可のポップアップを出すタイミング messaging.requestPermission()
  22. 22. https 必須なので未対応なら対応を Chrome の「安全でない〜」表示対策としても対応しておくべき
  23. 23. PWA 実装
  24. 24. Manifest iOS で使われるアイコンは "apple-touch-icon"
  25. 25. ServiceWorker キャッシュコントロールはサイトに合わせて工夫する PWA for WordPress の ServiceWorker への実装 • Online-First と Cache-First に対応 • キャッシュの保持期限(IndexedDB を使用)
  26. 26. pwa4wp-cache-manager.js onFetch Online- First Cache- First Fetch Search Cache Return Cache Store Cache Cache Storage Indexed DB Return Response Fetch Failed No Cache Return OFFLINE PAGE Cache Found Fetch Failed Fetch Success Mode
  27. 27. Add to HomeScreen インストールのポップアップをコントロール(抑止) window.addEventListener('beforeinstallprompt', function (event)〜
  28. 28. ひと手間かけて改修 サイトの改修が可能なら、PWA で「キャッシュしたくない」と ころを切り離す
  29. 29. WordPress の例: ページ構成そのまま PWA 化 Template Data Cache ページまる ごとキャッ シュ
  30. 30. App Shell ライクにできるのが理想 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ
  31. 31. API 化して、URL をキャッシュ除外 Template Data REST API JavaScript Cache ページの外 枠だけ キャッシュ キャッシュ 除外する
  32. 32. よくあるトラブル 前もって知ってれば怖くない
  33. 33. https 不完全問題 http コンテンツの埋め込みが混入している Good Bad
  34. 34. http の埋め込みを探して修正 • http → https 化したときに、http 埋め込みが残留しているケース が多い • 外部サイトのアイコン • JavaScript からの呼び出し • WordPress のプラグインからの呼び出し(見つけにくい) • DevTools の Console で確認する
  35. 35. キャッシュ焦げ付き問題 • IndexedDB などを利用して実装 • WorkBox にはキャッシュの有効期限を指定できるプラグインあ り • WordPress なら PWA4WP !
  36. 36. iPhone キラー:行き止まり • 画像の全画面表示などでどん詰まり <a href="some-beautiful-picture.jpg"><img src="some-beautiful-picture.jpg" width=xxx height=xxx></a>
  37. 37. 外部ページとの行き来 • 外部ページに遷移すると、PWA はポップアウト画面(ブラウ ザ)を開くが、処理完了後正しく戻れない • 認証 • 決済 • ひとつ前の画面からポップアウトさせて結果を受け取るしか今 のところ手がない? authwindow = window.open (”auth.html",”authentication", "width=480,height=480");
  38. 38. 番外編:WordPress プラグインの動作障害 • PWA にしたら特定のプラグインが動かなくなった • プラグインが JavaScript で自身のフォルダを参照してリアルタイム性の 必要な情報を取得していた場合など • キャッシュの除外設定でプラグインの導入先を除外することで多くは 回避可能(PWA for WordPress) ^.*/wp-content/plugins/plugin-name/.*$
  39. 39. 検証しよう PWA のテストってちょっと面倒
  40. 40. Chrome DevTools • PC でのテスト • 実機テスト chrome://inspect/#devices
  41. 41. Audits Chromeのツール「Lighthouse」 100点
  42. 42. ServiceWorker の威力 超高速!! (Networkそもそも使わないんだから そりゃそうだ)
  43. 43. PWA for WordPress WordPress 使ってるならコレ!
  44. 44. PWA for WordPress https://wordpress.org/plugins/pwa4wp/ 「プラグイン→新規追加」から 「PWA for WordPress」または「PWA4WP」を検索
  45. 45. 他のプラグインにない PWA4WP のウリ • キャッシュの有効期限が設定できる ブログなどの新着記事一覧の埋め込み部分の反映 記事の内容などの更新 急がないけどずっと更新されないのはダメ、というコンテンツはわり と多い • キャッシュの除外が柔軟に指定できる Ajax などで取得するような API などの出力データの取り出し元 リアルタイムで状況を表示するようなコンテンツ 画像だけキャッシュする、というような設定も可能 • Online-First/Cache-First のモード切替
  46. 46. 自画自賛 PWA4WP Plugin A Plugin B Plugin C Plugin D Plugin E Plugin F Plugin G 操作 設定の容易さ 8 9 3 ? 8 7 2 8 日本語 ◎ × × × × × × × ServiceWorker キャッシュ除外 ○ × × - × × × × キャッシュ期限 ○ × × - × × × × キャッシュモー ド ○(2種) × × × ○(4種、ファイ ル種別ごとに設定 可能) × × × Push × × × ○(Firebase) × ×? × PWAの有効化/無 効化スイッチ ○ × × × ○(On Element Click実装可) × ×? × アクティブ数 50 10000 100 1000 600 30 50 100
  47. 47. 参考資料など • WordCamp Tokyo 2018 「Challenge PWA!! Web の舞台はホーム画面へ進撃する」 https://www.slideshare.net/RyuShindo/challenge-pwa-wordcamp-tokyo- 2018 • 日本Androidの会 定例会 「Challenge PWA!! テクニカルエディション」 https://www.slideshare.net/RyuShindo/challenge-pwa-technical-edition- jag201809 • ブログにも解説記事いくつか書いてます https://www.compin.jp/wp/
  48. 48. ありがとうございました。 PWA for WordPress ぜひお試しください https://wordpress.org/plugins/pwa4wp/

×