Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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


物江修
「EC/キャンペーンサイト、デジタルマーケティングツール開発者に効くApp Service活用開発術」の資料です。

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

進化する 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 メソッド) • 静的なアセットのキャッシュ • ダウンロードの失敗 • キャッシュの失敗 • Activate されない • 有効化された際に発生 • インストール直後 • 復帰時 • 待機状態 • 終了(メモリ節約のため)• ネットワークリクエスト またはメッセージに対する処理
  23. 23. Step 1 : Service Worker の登録 Web コンテンツ側の JS
  24. 24. Step 1 : Service Worker の登録 if ( navigator.serviceWorker ) { } Service Worker がサポートされているか検証 Web コンテンツ側の JS
  25. 25. Step 1 : Service Worker の登録 if ( navigator.serviceWorker.controller ) { console.log('There’s an active service worker'); } すでに動作している Service Worker があるか検証することも可能 Web コンテンツ側の JS
  26. 26. Step 1 : Service Worker の登録 else { navigator.serviceWorker.register('/sw.js') .then(function(reg) { } Service Worker を登録 Web コンテンツ側の JS
  27. 27. Step 1 : Service Worker の登録 .then(function(reg) { console.log('SW registered for scope', reg.scope); }); Promise で結果が返される Web コンテンツ側の JS
  28. 28. Step 1 : Service Worker の登録 if ( navigator.serviceWorker ) { navigator.serviceWorker.register('/sw.js'); } Web コンテンツ側の JS Service Worker 登録するだけならシンプルに書ける
  29. 29. Step 2 : アセットのキャッシュ Service Worker 側の JS
  30. 30. Step 2 : アセットのキャッシュ Self.addEventListener('install', function(event) Service Worker 側の JS Service Worker 登録時に install イベントが発生
  31. 31. Step 2 : アセットのキャッシュ event.waitUntil( caches.open('キャッシュの名前') ) Service Worker 側の JS キャッシュを開く
  32. 32. Step 2 : アセットのキャッシュ urlsToCache '/', '/index.html', '/css/index.css', '/script/index.js' caches.open('キャッシュの名前') .then(function(cache) { return cache.addAll(urlsToCache); Service Worker 側の JS キャッシュするアセットを登録する
  33. 33. Step 3 : 有効化イベント 'キャッシュの名前' Service Worker 側の JS
  34. 34. Step 3 : 有効化イベント self.addEventListener('activate', function(e) { 'キャッシュの名前' }); Service Worker 側の JS Service Worker のインストールが完了し有効化
  35. 35. Step 3 : 有効化イベント e.waitUntil( caches.keys().then(function(keyList) { 'キャッシュの名前' }) ); Service Worker 側の JS 既存のキャッシュの一覧を取り出す
  36. 36. Step 3 : 有効化イベント return Promise.all(keyList.map(function(key) { console.log('ServiceWorker の古いキーを削除しました。', key); if (key !== 'キャッシュの名前') { return caches.delete(key); } Service Worker 側の JS 今回開いたキャッシュと異なる名前のキャッシュを削除
  37. 37. キャッシュについて コンテンツのキャッシュをオフラインで使用できるように管理 • App Shell • UI が機能するために必要な最小限のリソース • 要件にあったアセット なにをキャッシュするか? Service Worker の更新 • js ファイルを更新 • キャッシュがクリアされるわけではない • 有効になるのは一度ページを閉じた後
  38. 38. Step 4 : リクエストのハンドリング Service Worker 側の JS
  39. 39. Step 4 : リクエストのハンドリング self.addEventListener('fetch', function(e) { }) Service Worker 側の JS ネットワークリクエストがされると fetch イベントが発生
  40. 40. Step 4 : リクエストのハンドリング caches.match(e.request) Service Worker 側の JS キャッシュからのデータが利用可能か どうかを確認
  41. 41. Step 4 : リクエストのハンドリング e.request .then(function(response) { return response || fetch(e.request); } Service Worker 側の JS キャッシュか fetch でネットワークから取得した内容を返す
  42. 42. Step 4 : リクエストのハンドリング e.respondWith( ) Service Worker 側の JS ページにレスポンスを返す
  43. 43. デモ : Service Worker の実装
  44. 44. Web App Manifest サイトのブックマークを端末のホーム画面に保存 <link rel="manifest" href="/manifest.manifest"> (※)Windows では現状 .appxmanifest(XML)形式に変換して使用
  45. 45. { "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 の記述
  46. 46. { "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:ショートネーム
  47. 47. { "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 : ホーム画面の アイコンや起動画面に使用 されるアイコン
  48. 48. { "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 : 背景色
  49. 49. display : 優先されるビューの設定 fullscreen standalone minimal-ui browser 戻るボタンのみ 4 種類の指定が可能 限定された UI (読み取り専用のナビ ゲーションバー) ブラウザーのまま
  50. 50. デモ : Web Application Manifest
  51. 51. Progressive Web Apps on Windows
  52. 52. Microsoft Store からの配布 • 自動インデックス • セルフパブリッシング PWA を Microsoft Store で公開する 2 の方法
  53. 53. Bing に自動インデックスされる条件 • HTTPS, セキュアなエンドポイント • 高品質の manifest (names, screen shots, descriptions) • オフラインサポート • ストアの審査をパス • デジタルグッズを販売しないこと • アダルトコンテンツを含まないこと • 不快なコンテンツは不可 • Windows ならではの差別化がされている Microsoft Store で公開するための条件
  54. 54. Windows Store むけ PWA の検証 • PWA が Microsoft Store の準備ができていることを 検証 • パフォーマンスとユーザーエクスペリエンスの向上https://sonarwhal.com/
  55. 55. Bing に検出されないようにするには • manifest なし、https なし、もしくは オフラインで動作しない • Robot.txt ファイルを設定 • display: browser • アプリを削除するようサービスリクエストを 出す (reportapp@microsoft.com)
  56. 56. Microsoft ストアでの公開 • dev.microsoft.com で開発者アカウントを 開設 PWABuilder.com で Appx を生成する reportapp@microsoft.com UWP アプリの提出とおなじ
  57. 57. PWA Builder での PWA の開始 https://www.pwabuilder.com/ ホストされている PWA をパッケージング
  58. 58. Windows Store App の価値 • デベロッパーセンターの分析 • アプリ内課金 • プロモーションの機会 • データストレージの上限がない • Service Workers • WinRT API へのアクセス Progressive Web Apps をさらに Progressive
  59. 59. WinRT API にアクセス可能 //Windows にインストールされているかどうか //セカンダリータイルをピン留めする //有効化される場所
  60. 60. Progressive Web Apps の価値を高める API • CSS3 • WebAssembly • WebVR • Web Payments
  61. 61. Progressive Web Apps の位置づけ Web と Native の間を埋める
  62. 62. Progressive Web Apps の位置づけ Web と Native の間を埋める PWA
  63. 63. まとめ = • Service Worker • Web Application Manifest • Other.. Web + Native Apps This is good one!
  64. 64. 参考 • Progressive Web Apps on Windows • Sonarwhal • PWA BUILDER • Building Progressive Web Apps for Windows devices : Build 2018 • Cboard: A Progressive Web App for Everyone
  65. 65. Ask the Speaker のご案内 ブレイクアウトセッション終了後の休憩時間に、 登壇したスピーカーに直接ご質問いただける コーナーを 「Ask The Speakers」 Room に 用意しております。セッション内容のより深い 理解のため、ぜひお役立てください。 「Ask The Speakers」
  66. 66. セッションアンケートにご協力ください。 Twitter のご案内
  67. 67. © 2018 Microsoft Corporation. All rights reserved. 本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。

×