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 総まとめ @ABC 2018 Spring

2,376 views

Published on

日本Androidの会 Web Working Group による PWA 集中勉強会の総まとめ!
2018/6/9 ABC 2018 Spring での講演資料です。
PWA ってなんだ?というところからその導入メリット、さらには実装の勘所や技術解説をたっぷり盛り込みました。

Published in: Technology
  • Be the first to comment

PWA 総まとめ @ABC 2018 Spring

  1. 1. PWA 集中勉強会総まとめ! 既存サイトの「 PWA 化 」はこれでバッチリ!
  2. 2. 自己紹介 進藤 龍之介 エンジニア/日本Androidの会 Web Working Group PWA 集中勉強会主催 www.crowdfarm.jp 運営 Twitter @ryu_compin Fb ryushindo
  3. 3. はじめに 疑問点などありましたらぜひハッシュタグ #ABC2018S #JAGWWG をつけてツイートしてください。 最後の QA タイムでお答えします!( Best Effort )
  4. 4. Agenda • Progressive Web Apps • どんないいことがあるのか • あらゆるプラットフォームへ • PWAの構成 • ServiceWorker • Cache • フレームワークの活用
  5. 5. Progressive Web Apps Progressiveであるということ
  6. 6. Progressive Web Apps Progressive 「進歩」「革新」「前進」「段階」「累進」「進行」 段階的な実装、累進的な進歩が可能な Web アプリ ローカルインストールされたアプリのような挙動 インストール • ホーム画面にアイコン ネットワーク非依存での動作 • つながらなくてもなんとかする技術 Push通知などのアプリライクな機能
  7. 7. What is a Progressive Web App? • Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. • Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. • Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. • App-like - Feels like an app, because the app shell model separates the application functionality from application content . • Fresh - Always up-to-date thanks to the service worker update process. • Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. • Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. • Re-engageable - Makes re-engagement easy through features like push notifications. • Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store. • Linkable - Easily share the application via URL, does not require complex installation. https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ 「はじめてのプログレッシブウェブアプリ」より
  8. 8. Web アプリがローカルアプリに • インストール時にWeb コンテンツやリソースののキャッシュ • キャッシュされた javascript がオフラインでアプリを制御 • バックグラウンドでの動作(Android)
  9. 9. PWA の動作概要 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker
  10. 10. 自サイトでもやってみる Wordpress + WooCommerce の EC サイトをそのまま PWA 化
  11. 11. インストール
  12. 12. インストール完了 • スプラッシュいいね • やっぱキャッシュすると速 い! • ホーム画面のアイコンも
  13. 13. ブラウザ表示と PWA ブラウザ PWA アドレスバー の有無
  14. 14. オフライン で見てみる OK!
  15. 15. アプリのサイズ わずか201K、とてもコンパクト!
  16. 16. 最低限設定するところ • サイト名、アプリケーション短縮名 • デフォルトでサイトタイトルが入るのでそのままでよければOK • アイコン、スプラッシュ用アイコン • PWAプラグインそのままだとWordpressのアイコンになる • 背景色とテーマカラー • スプラッシュ画面で使用 • オフラインページ • デフォルトはスタートページ • オフラインで操作させたくないところにオフラインで遷移しようとす るとトップページが表示される、ではちょっとおかしい
  17. 17. どんないいことがあるの? Web とアプリのいいとこどりでハッピーになろう
  18. 18. はやい • 動作が速い • 導入が早い
  19. 19. うまい • アプリのいいとこ • ホーム画面のアイコン • Push通知 • バックグラウンド • Web のいいとこ • 検索に載る • 更新が容易 • ひとつのコードで多くのプラットフォームに対応
  20. 20. 安い • 導入コストが安い • 既にWebサイト(Webアプリ)があればそのままアプリ化できる • アプリとWebを別個に開発しなくていい • 通信量が抑えられる • サーバー負荷を抑えて事業者に優しい • 通信量を抑えて利用者に優しい • PWA はとてもコンパクト
  21. 21. あらゆるプラットフォームへ なぜ今 PWA なのか
  22. 22. PWA に対応するプラットフォーム – 3月 https://caniuse.com/#search=Service%20Worker
  23. 23. PWA に対応するプラットフォーム - 5月
  24. 24. Safari の対応は 日本でのインパクト大 3月末のバージョンアップで iOS / Safari に ServiceWorker が実装された 日本ではiOSのシェアが高いのでSafariの対応によって対 応環境の割合が飛躍的にアップ!
  25. 25. Windows & Edge での対応 Windows はパッケージ化した PWA をストアで配布できるように なる PWA のパッケージ化ツールとしてMicrosoft から PWA BUILDER を 配布(もちろんフリー) https://www.pwabuilder.com/ Bing 検索による PWA 収集
  26. 26. 75.41 43.12 12.6 37.09 11.99 19.79 GLOBAL JAPAN Global Japan 対応済 75.41 43.12 新規対応 12.6 37.09 未対応 11.99 19.79 SERVICE WORKER 対応状況 対応済 新規対応 未対応
  27. 27. これだけ対応してれば導入の価値あり Japan:43.12% → 80.21% Global:75.41% → 88.01% ※モバイルに対象を絞ればJapan/Globalとも に99%!!
  28. 28. 導入によるデメリットは? • PWA の導入によって既存の Web サイトの機能を毀損すること はない。 ※正しく導入すれば! • ServiceWorker が利用可能な場合だけ動作させる実装でこれまで 動いていた環境はそのままに、新しい環境で新しい機能の恩恵 を受ける
  29. 29. 段階的導入 「Progressive」 なアプローチ • いきなり全部ゼロから作らなくてもいい • 段階的に機能を追加できる • SPA (シングルページ)でなくてもいい 「Progressive Enhancement」 環境の差異を受け入れて、機能に制約のある環境でも情報は表示できる ようにしつつ、リッチな機能がある環境ではそれを存分に利用する。
  30. 30. 関連機能(API)の環境差異には注意 • どの環境もまず大丈夫 • IndexedDB • Cache • 使える、使えない、をちゃんと調べる • Background Sync • Push • Payment • Web Auth
  31. 31. ServiceWorkerの仲間たち
  32. 32. ServiceWorkerの仲間たち
  33. 33. ServiceWorkerの仲間たち
  34. 34. ServiceWorkerの仲間たち
  35. 35. ServiceWorkerの仲間たち
  36. 36. ServiceWorkerの仲間たち
  37. 37. PWAの構成 2つのファイルと、ほんのちょっとのコード追加
  38. 38. ファイル構成は大きく分けて3種 • コンテンツ/アセット • HTML/CSS/JS • 画像、アイコン • データ • manifest • json • service worker • JS
  39. 39. コンテンツ / アセット • ResponsiveならWebサイトそのままでもとりあえずOK • キャッシュするもの、しないもの • アイコンはお忘れなく • オフライン時に表示するコンテンツを追加 if('serviceWorker' in navigator) { navigator.serviceWorker .register('/service-worker.js') .then(function() { console.log('Service Worker Registered'); }); } ※Service Workerのインストールを追記
  40. 40. Manifest • jsonで記述 • 各種設定項目 • アイコン、スプラッシュ、背景色、テーマカラー、縦横表 示、など { "name": "Weather", "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, {
  41. 41. Service Worker • キャッシュの制御、Push通知、バックグラウンド処理 var filesToCache = [ '/', '/index.html', '/scripts/app.js', '/images/sleet.png', '/images/snow.png', '/images/thunderstorm.png', '/images/wind.png’ ]; self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); });
  42. 42. ひとまずの「 PWA 化」 サイトそのまんまでも、今フルHTTPSサイトなら • Manifest • Service Worker を追加して、インストール部分を追記したらとりあえ ずPWA化
  43. 43. ServiceWorker PWA の司令塔
  44. 44. ServiceWorker のライフサイクル No Service worker Installing Activated Idle Fetch/ Message TerminatedError
  45. 45. ServiceWorker の基本3点セット • イベントリスナ • install • activate • fetch
  46. 46. install • self.addEventListener('install', function(e) { • インストール時のアクション • インストールが終わったらまずは必須なところをキャッシュす る • アイコン、スタートページ、オフラインページ、等 • return cache.addAll(filesToCache);
  47. 47. activate • self.addEventListener('activate', function(e) { • インストールが完了して、Serviceworkerがページコントロール 可能になったらイベント発火 • return caches.delete(key);
  48. 48. fetch • self.addEventListener('fetch', function(e) { • URLリクエストが発生したときのイベント • 新規のリクエストをキャッシュする?しない? • キャッシュがあったらキャッシュから読むか? • キャッシュ除外ページかどうか • オフラインだったら?
  49. 49. その他 • Push Push通知の受信 self.addEventListener('push', function(event) { • Sync バックグラウンドでの同期 self.addEventListener('sync', function(event) {
  50. 50. Scopeに気をつけよう • インストール時にScapeを指定する navigator.serviceWorker.register("https://abc.android-group.jp/sw.js", {scope: "/2018s/app/"}) • 未指定時のデフォルトは ” ./ ” • ServiceWorkerが配置されたディレクトリの同列以下のコンテン ツだけコントロールできる RESTなどの実体のないパスを指定するときにはコントロール下から外れ ないように気をつける
  51. 51. あとひとつ • ServiceWorkerは「アプリ化」しなくても動 きます。 • Android/Windowsならchromeで • chrome://serviceworker-internals/ を見てみよう。 • 「アプリ」としてじゃなくても、キャッ シュを制御した高速化の手段として活用で きます。
  52. 52. cache Cache の運用計画こそが PWA の命
  53. 53. キャッシュをどう扱うか • そもそものキャッシュの目的 • 高速化 • ネットワークの節約、オフライン対応 • 考慮点 • 更新の反映 • インタラクティブなコンテンツ
  54. 54. キホン • Cache first • Network first • No cache
  55. 55. Cache API • match / matchAll • add / addAll • put • delete • keys
  56. 56. Cache API • 有効期限的なものはありません。 • だからほっといても消えません。 • 同期、更新、削除は自分でやります。
  57. 57. サイト構成によるCache制御 • SPA • AppShell 部分とそれ以外に明確に分けられるので設計がシンプル • Multiple Page • サイト構成によるが、固定コンテンツとそれ以外の個別の制御
  58. 58. 一般的なPWAのCache削除 Activate時に削除 self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if ( key !== cacheName ) { return caches.delete(key); } })); }) ); return self.clients.claim(); });
  59. 59. 更新タイミング • ServiceWorkerはオンライン時に同期され、次回起動時に更新さ れたものが動作する • Cacheは明示的に更新するか、ServiceWorkerのActivate時に削 除、再取得される
  60. 60. Cache焦げ付き対策プラン • IndexedDBの活用 • Cacheエントリー時にDBにタイムスタンプとURIを記録 • Cache読み出し時にオンラインなら期限切れのものは削除、更新する 一定期間のタイムラグはあるものの、「焦げ付き」はなくなる • Workboxのexpiration.Plugin
  61. 61. フレームワークの活用 PWA Builder と Workbox
  62. 62. フレームワークでのCacheコントロール • PWA Builder https://www.pwabuilder.com/ • Work Box https://developers.google.com/web/tools/workbox/
  63. 63. PWA Builder • サイトURLと必要項目を入力すると、ServiceWorker、Manifest、 registerを生成してくれる • Cache制御はURI個別の制御は無し(coming soon?) • Offline page • Offline copy of page • Offline copy with Backup offline page • Cache-first network • Advanced Pre-cache(coming soon) • ServiceWorkerのベース https://github.com/pwa-builder/serviceworkers • 既存のManifestがあるとそこから読み込んでくれる
  64. 64. PWA Builder
  65. 65. PWA Builder
  66. 66. Workbox • Webサイトのオフラインサポートのためのライブラリ • 細かなCache制御 importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js'); workbox.routing.registerRoute( new RegExp('.*.js'), workbox.strategies.networkFirst() );
  67. 67. Workbox • プラグインによる拡張 • workbox.backgroundSync.Plugin • workbox.broadcastUpdate.Plugin • workbox.cacheableResponse.Plugin • workbox.expiration.Plugin workbox.routing.registerRoute( /.(?:png|gif|jpg|jpeg|svg)$/, workbox.strategies.cacheFirst({ cacheName: 'images', plugins: [ new workbox.expiration.Plugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days }), ], }), );
  68. 68. 組み合わせるといい感じ! • PWA Builderは簡単に素早くPWAの原型を作ってくれる • 細かい制御をWorkboxで追加する
  69. 69. まとめ • PWA 導入するといいこといっぱい • PWA 導入は簡単 • ServiceWorker で PWA の挙動をコントロール • Cache は計画的に • フレームワークも活用しよう
  70. 70. ありがとうございました。 ABC サイトのカンファレンスリストも PWA になってるから見てみてね!

×