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.

進化する Web ~ Progressive Web Apps の実装と応用 ~

15,561 views

Published on

de:code2018の登壇で使用したスライドです。
セッションの内容は、こちらの記事にまるっとまとめてありますのでぜひご覧ください。

https://blogs.msdn.microsoft.com/osamum/2018/07/03/about_pwa/

== 概要 ==
Progressive Web Apps (PWA) は Service Worker に代表される新しい API を複数組み合わせて実現する新しい Web アプリケーションの概念です。PWA は新旧問わず、ブラウザーの能力に応じた最適なユーザー体験を提供し、新しいブラウザーにはこれまでの Web にはなかった、ネイティブアプリのような体験も実装できます。
このセッションでは、PWA の概念と具体的な実装方法、その技術の応用について紹介します。(※本セッションは JavaScript 中級者以上が対象です)

Published in: Technology
  • Be the first to comment

進化する Web ~ Progressive Web Apps の実装と応用 ~

  1. 1. 進化する Web ~ Progressive Web Apps の実装と応用 ~ AD09
  2. 2. for DEVELOPER
  3. 3. • Progressive Web Apps について • Progressive Web Apps を実現する API • Progressive Web Apps on Windows アジェンダ
  4. 4. Progressive Web Apps
  5. 5. Progressive Web Apps とは? ネイティブアプリのような UX を提供する Web アプリの概念 • Chrome Dev Summit 2015 • もともとは Alex Russell 氏(Google) のブログ記事 • Web によるネイティブアプリのような UX • クライアントの性能に合わせた機能提供 • アプリにおける Progressive Enhancement
  6. 6. アプリにおける Progressive Enhancement 同じコンテンツ Web ページ アプリケーション Web サーバー
  7. 7. Progressive Web Apps を実現する機能 これまでの Web になかった機能 オフラインサポート プッシュ通知 バックグラウンド処理 アイコンの追加 Cache API Push API Background Sync Web App Manifest Service Worker Web App Manifest
  8. 8. Web のメリット •Secure (安全) •Linkable (リンク可能) •Indexable (インデックス可能) •Composable (再構成可能) •Ephemeral (一時的な利用) SLICE
  9. 9. Progressive Web Apps が提供する価値 • FIRE = Fast Integrated Reliable Engage • Fast: パフォーマンスの良い、軽快な動作 • Integrated: OS と統合されたユーザー体験 • Reliable: オフラインでも動作する利便性と信頼性 • Engaging: Web サイトの価値向上 高速で信頼性の高いエンゲージメント
  10. 10. Progressive Web Apps のメリット PWA = Web + アプリのメリット
  11. 11. Progressive Web Apps を実現する API
  12. 12. Service Worker • Web Worker のひとつ • DOM に直接アクセスできない • Web ページと異なるライフサイクル • ページのスクリプトから “登録” (インストール) • 再インストール : Service Worker の JS ファイルの更新 • HTTPS 必須 バックグラウンドで動作するネットワークプロキシ プログラミング可能な
  13. 13. Service Worker が提供する機能 クライアントWeb サーバー • キャッシュ • リクエストのハンドリング • Push • バックグラウンド同期 これまでの Web になかった機能
  14. 14. Service Worker が提供する機能 クライアントWeb サーバー • キャッシュ • リクエストのハンドリング • Push • バックグラウンド同期 これまでの Web になかった機能
  15. 15. Service Worker が提供する機能 クライアントWeb サーバー • キャッシュ • リクエストのハンドリング • Push • バックグラウンド同期 これまでの Web になかった機能
  16. 16. Service Worker が提供する機能 クライアントWeb サーバー • キャッシュ • リクエストのハンドリング • Push • バックグラウンド同期 これまでの Web になかった機能
  17. 17. Service Worker が提供する機能 クライアントWeb サーバー • キャッシュ • リクエストのハンドリング • Push • バックグラウンド同期 これまでの Web になかった機能
  18. 18. Service Worker が提供する機能 クライアントWeb サーバー • キャッシュ • リクエストのハンドリング • Push • バックグラウンド同期 これまでの Web になかった機能
  19. 19. Service Worker が提供する機能 クライアントWeb サーバー • キャッシュ • リクエストのハンドリング • Push • バックグラウンド同期 これまでの Web になかった機能
  20. 20. Service Worker の各 API 実装状況 Service Worker 〇 〇 〇 〇 Cache API 〇 〇 〇 〇 Push API 〇 〇 〇 × Background Sync API △ 〇 × × 17 5966 11.1 開発中
  21. 21. Service Worker を使う準備 Service Worker 用の JS ファイルが必要 + sw.js JavaScript JavaScript 配下のアセットを制御
  22. 22. Service Worker のライフサイクル Install Activate Idle Error Fetch / Message • ServiceWoker の登録 (Register メソッド) • 静的なアセットのキャッシュ
  23. 23. Service Worker のライフサイクル Install Activate Idle Error Fetch / Message • ダウンロードの失敗 • キャッシュの失敗 • Activate されない
  24. 24. Service Worker のライフサイクル Install Activate Idle Error Fetch / Message • 有効化された際に発生 • インストール直後 • 復帰時
  25. 25. Service Worker のライフサイクル Install Activate Idle Error Fetch / Message • 待機状態
  26. 26. Service Worker のライフサイクル Install Activate Idle Error Fetch / Message • ネットワークリクエスト またはメッセージに対する処理
  27. 27. Service Worker のライフサイクル Install Activate Idle Error Fetch / Message • 終了(メモリ節約のため)
  28. 28. Step 1 : Service Worker の登録 Web コンテンツ側の JS
  29. 29. Step 1 : Service Worker の登録 if ( navigator.serviceWorker ) { } Service Worker がサポートされているか検証 Web コンテンツ側の JS
  30. 30. Step 1 : Service Worker の登録 if ( navigator.serviceWorker.controller ) { console.log('There’s an active service worker'); } すでに動作している Service Worker があるか検証することも可能 Web コンテンツ側の JS
  31. 31. Step 1 : Service Worker の登録 else { navigator.serviceWorker.register('/sw.js') .then(function(reg) { } Service Worker を登録 Web コンテンツ側の JS
  32. 32. Step 1 : Service Worker の登録 .then(function(reg) { console.log('SW registered for scope', reg.scope); }); Promise で結果が返される Web コンテンツ側の JS
  33. 33. Step 1 : Service Worker の登録 if ( navigator.serviceWorker ) { navigator.serviceWorker.register('/sw.js'); } Web コンテンツ側の JS Service Worker 登録するだけならシンプルに書ける
  34. 34. Step 2 : アセットのキャッシュ Service Worker 側の JS
  35. 35. Step 2 : アセットのキャッシュ Self.addEventListener('install', function(event) Service Worker 側の JS Service Worker 登録時に install イベントが発生
  36. 36. Step 2 : アセットのキャッシュ event.waitUntil( caches.open('キャッシュの名前') ) Service Worker 側の JS キャッシュを開く
  37. 37. Step 2 : アセットのキャッシュ urlsToCache '/', '/index.html', '/css/index.css', '/script/index.js' caches.open('キャッシュの名前') .then(function(cache) { return cache.addAll(urlsToCache); Service Worker 側の JS キャッシュするアセットを登録する
  38. 38. Step 3 : 有効化イベント 'キャッシュの名前' Service Worker 側の JS
  39. 39. Step 3 : 有効化イベント self.addEventListener('activate', function(e) { 'キャッシュの名前' }); Service Worker 側の JS Service Worker のインストールが完了し有効化
  40. 40. Step 3 : 有効化イベント e.waitUntil( caches.keys().then(function(keyList) { 'キャッシュの名前' }) ); Service Worker 側の JS 既存のキャッシュの一覧を取り出す
  41. 41. Step 3 : 有効化イベント return Promise.all(keyList.map(function(key) { console.log('ServiceWorker の古いキーを削除しました。', key); if (key !== 'キャッシュの名前') { return caches.delete(key); } Service Worker 側の JS 今回開いたキャッシュと異なる名前のキャッシュを削除
  42. 42. キャッシュについて コンテンツのキャッシュをオフラインで使用できるように管理 • App Shell • UI が機能するために必要な最小限のリソース • 要件にあったアセット なにをキャッシュするか? Service Worker の更新 • js ファイルを更新 • キャッシュがクリアされるわけではない • 有効になるのは一度ページを閉じた後
  43. 43. Step 4 : リクエストのハンドリング Service Worker 側の JS
  44. 44. Step 4 : リクエストのハンドリング self.addEventListener('fetch', function(e) { }) Service Worker 側の JS ネットワークリクエストがされると fetch イベントが発生
  45. 45. Step 4 : リクエストのハンドリング caches.match(e.request) Service Worker 側の JS キャッシュからのデータが利用可能か どうかを確認
  46. 46. Step 4 : リクエストのハンドリング e.request .then(function(response) { return response || fetch(e.request); } Service Worker 側の JS キャッシュか fetch でネットワークから取得した内容を返す
  47. 47. Step 4 : リクエストのハンドリング e.respondWith( ) Service Worker 側の JS ページにレスポンスを返す
  48. 48. デモ : Service Worker の実装
  49. 49. Web App Manifest サイトのブックマークを端末のホーム画面に保存 <link rel="manifest" href="/manifest.manifest"> (※)Windows では現状 .appxmanifest(XML)形式に変換して使用
  50. 50. { "lang": "ja", "short_name": "Spece Enemy", "name": "The Spece Enemy", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "img/launcher-icon-4x.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa/?utm_source=homescreen", "display": "standalone", "orientation": "portrait", "background_color": "black" } Web Application Manifest の記述
  51. 51. { "lang": "ja", "short_name": "Spece Enemy", "name": "The Spece Enemy", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "img/launcher-icon-4x.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa/?utm_source=homescreen", "display": "standalone", "orientation": "portrait", "background_color": "black" } • name:アプリのフルネーム • short_name:ショートネーム
  52. 52. { "lang": "ja", "short_name": "Spece Enemy", "name": "The Spece Enemy", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "img/launcher-icon-4x.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa/?utm_source=homescreen", "display": "standalone", "orientation": "portrait", "background_color": "black" } • icons : ホーム画面の アイコンや起動画面に使用 されるアイコン
  53. 53. { "lang": "ja", "short_name": "Spece Enemy", "name": "The Spece Enemy", "icons": [ { "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "img/launcher-icon-4x.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa/?utm_source=homescreen", "display": "standalone", "orientation": "portrait", "background_color": "black" } • display : 優先されるビュー • orientation : 画面の向き • Background_color : 背景色
  54. 54. display : 優先されるビューの設定 fullscreen standalone minimal-ui browser 戻るボタンのみ 4 種類の指定が可能 限定された UI (読み取り専用のナビ ゲーションバー) ブラウザーのまま
  55. 55. デモ : Web Application Manifest
  56. 56. Progressive Web Apps on Windows
  57. 57. Microsoft Store からの配布 • 自動インデックス • セルフパブリッシング PWA を Microsoft Store で公開する 2 の方法
  58. 58. Bing に自動インデックスされる条件 • HTTPS, セキュアなエンドポイント • 高品質の manifest (names, screen shots, descriptions) • オフラインサポート • ストアの審査をパス • デジタルグッズを販売しないこと • アダルトコンテンツを含まないこと • 不快なコンテンツは不可 • Windows ならではの差別化がされている Microsoft Store で公開するための条件
  59. 59. Windows Store むけ PWA の検証 • PWA が Microsoft Store の準備ができていることを 検証 • パフォーマンスとユーザーエクスペリエンスの向上https://sonarwhal.com/
  60. 60. Bing に検出されないようにするには • manifest なし、https なし、もしくは オフラインで動作しない • Robot.txt ファイルを設定 • display: browser • アプリを削除するようサービスリクエストを 出す (reportapp@microsoft.com)
  61. 61. Microsoft ストアでの公開 • dev.microsoft.com で開発者アカウントを 開設 PWABuilder.com で Appx を生成する reportapp@microsoft.com UWP アプリの提出とおなじ
  62. 62. PWA Builder での PWA の開始 https://www.pwabuilder.com/ ホストされている PWA をパッケージング
  63. 63. Windows Store App の価値 • デベロッパーセンターの分析 • アプリ内課金 • プロモーションの機会 • データストレージの上限がない • Service Workers • WinRT API へのアクセス Progressive Web Apps をさらに Progressive
  64. 64. WinRT API にアクセス可能 //Windows にインストールされているかどうか //セカンダリータイルをピン留めする //有効化される場所
  65. 65. Progressive Web Apps の価値を高める API • CSS3 • WebAssembly • WebVR • Web Payments
  66. 66. Progressive Web Apps の位置づけ Web と Native の間を埋める
  67. 67. Progressive Web Apps の位置づけ Web と Native の間を埋める PWA
  68. 68. まとめ = • Service Worker • Web Application Manifest • Other.. Web + Native Apps This is good one!
  69. 69. 参考 • Progressive Web Apps on Windows • Sonarwhal • PWA BUILDER • Building Progressive Web Apps for Windows devices : Build 2018 • Cboard: A Progressive Web App for Everyone
  70. 70. © 2018 Microsoft Corporation. All rights reserved. 本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。

×