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 の実装と応用 ~
AD09
for
DEVELOPER
• Progressive Web Apps について
• Progressive Web Apps を実現する API
• Progressive Web Apps on Windows
アジェンダ
Progressive Web Apps
Progressive Web Apps とは?
ネイティブアプリのような UX を提供する Web アプリの概念
• Chrome Dev Summit 2015
• もともとは Alex Russell 氏(Google) のブログ記事
•...
アプリにおける Progressive Enhancement
同じコンテンツ
Web ページ
アプリケーション
Web サーバー
Progressive Web Apps を実現する機能
これまでの Web になかった機能
オフラインサポート プッシュ通知 バックグラウンド処理 アイコンの追加
Cache API Push API Background Sync Web ...
Web のメリット
•Secure (安全)
•Linkable (リンク可能)
•Indexable (インデックス可能)
•Composable (再構成可能)
•Ephemeral (一時的な利用)
SLICE
Progressive Web Apps が提供する価値
• FIRE = Fast Integrated Reliable Engage
• Fast: パフォーマンスの良い、軽快な動作
• Integrated: OS と統合されたユーザー...
Progressive Web Apps のメリット
PWA = Web + アプリのメリット
Progressive Web Apps を実現する API
Service Worker
• Web Worker のひとつ
• DOM に直接アクセスできない
• Web ページと異なるライフサイクル
• ページのスクリプトから “登録” (インストール)
• 再インストール : Service Wo...
Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能
Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能
Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能
Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能
Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能
Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能
Service Worker が提供する機能
クライアントWeb サーバー
• キャッシュ
• リクエストのハンドリング
• Push
• バックグラウンド同期
これまでの Web になかった機能
Service Worker の各 API 実装状況
Service Worker 〇 〇 〇 〇
Cache API 〇 〇 〇 〇
Push API 〇 〇 〇 ×
Background Sync API △ 〇 × ×
17 5966 1...
Service Worker を使う準備
Service Worker 用の JS ファイルが必要
+
sw.js
JavaScript JavaScript
配下のアセットを制御
Service Worker のライフサイクル
Install
Activate
Idle
Error
Fetch /
Message
• ServiceWoker の登録
(Register メソッド)
• 静的なアセットのキャッシュ
• ダ...
Step 1 : Service Worker の登録 Web コンテンツ側の JS
Step 1 : Service Worker の登録
if ( navigator.serviceWorker ) {
} Service Worker がサポートされているか検証
Web コンテンツ側の JS
Step 1 : Service Worker の登録
if ( navigator.serviceWorker.controller ) {
console.log('There’s an active service worker');
}...
Step 1 : Service Worker の登録
else {
navigator.serviceWorker.register('/sw.js')
.then(function(reg) {
}
Service Worker を登録
W...
Step 1 : Service Worker の登録
.then(function(reg) {
console.log('SW registered for scope',
reg.scope);
});
Promise で結果が返される
...
Step 1 : Service Worker の登録
if ( navigator.serviceWorker ) {
navigator.serviceWorker.register('/sw.js');
}
Web コンテンツ側の JS
...
Step 2 : アセットのキャッシュ Service Worker 側の JS
Step 2 : アセットのキャッシュ
Self.addEventListener('install', function(event)
Service Worker 側の JS
Service Worker 登録時に install イベント...
Step 2 : アセットのキャッシュ
event.waitUntil(
caches.open('キャッシュの名前')
)
Service Worker 側の JS
キャッシュを開く
Step 2 : アセットのキャッシュ
urlsToCache
'/',
'/index.html',
'/css/index.css',
'/script/index.js'
caches.open('キャッシュの名前')
.then(fun...
Step 3 : 有効化イベント
'キャッシュの名前'
Service Worker 側の JS
Step 3 : 有効化イベント
self.addEventListener('activate', function(e) {
'キャッシュの名前'
});
Service Worker 側の JS
Service Worker のインストー...
Step 3 : 有効化イベント
e.waitUntil(
caches.keys().then(function(keyList) {
'キャッシュの名前'
})
);
Service Worker 側の JS
既存のキャッシュの一覧を取り出す
Step 3 : 有効化イベント
return Promise.all(keyList.map(function(key) {
console.log('ServiceWorker の古いキーを削除しました。', key);
if (key !...
キャッシュについて
コンテンツのキャッシュをオフラインで使用できるように管理
• App Shell
• UI が機能するために必要な最小限のリソース
• 要件にあったアセット
なにをキャッシュするか?
Service Worker の更新
•...
Step 4 : リクエストのハンドリング Service Worker 側の JS
Step 4 : リクエストのハンドリング
self.addEventListener('fetch', function(e) {
})
Service Worker 側の JS
ネットワークリクエストがされると fetch イベントが発生
Step 4 : リクエストのハンドリング
caches.match(e.request)
Service Worker 側の JS
キャッシュからのデータが利用可能か どうかを確認
Step 4 : リクエストのハンドリング
e.request
.then(function(response) {
return response || fetch(e.request);
}
Service Worker 側の JS
キャッ...
Step 4 : リクエストのハンドリング
e.respondWith(
)
Service Worker 側の JS
ページにレスポンスを返す
デモ : Service Worker の実装
Web App Manifest
サイトのブックマークを端末のホーム画面に保存
<link rel="manifest" href="/manifest.manifest">
(※)Windows では現状 .appxmanifest(XML)...
{
"lang": "ja",
"short_name": "Spece Enemy",
"name": "The Spece Enemy",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"s...
{
"lang": "ja",
"short_name": "Spece Enemy",
"name": "The Spece Enemy",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"s...
{
"lang": "ja",
"short_name": "Spece Enemy",
"name": "The Spece Enemy",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"s...
{
"lang": "ja",
"short_name": "Spece Enemy",
"name": "The Spece Enemy",
"icons": [
{
"src": "img/launcher-icon-2x.png",
"s...
display : 優先されるビューの設定
fullscreen standalone minimal-ui browser
戻るボタンのみ
4 種類の指定が可能
限定された UI
(読み取り専用のナビ
ゲーションバー)
ブラウザーのまま
デモ : Web Application Manifest
Progressive Web Apps on
Windows
Microsoft Store からの配布
• 自動インデックス • セルフパブリッシング
PWA を Microsoft Store で公開する 2 の方法
Bing に自動インデックスされる条件
• HTTPS, セキュアなエンドポイント
• 高品質の manifest
(names, screen shots, descriptions)
• オフラインサポート
• ストアの審査をパス
• デジ...
Windows Store むけ PWA の検証
• PWA が Microsoft Store の準備ができていることを
検証
• パフォーマンスとユーザーエクスペリエンスの向上https://sonarwhal.com/
Bing に検出されないようにするには
• manifest なし、https なし、もしくは
オフラインで動作しない
• Robot.txt ファイルを設定
• display: browser
• アプリを削除するようサービスリクエストを
...
Microsoft ストアでの公開
• dev.microsoft.com で開発者アカウントを
開設
PWABuilder.com で Appx を生成する
reportapp@microsoft.com
UWP アプリの提出とおなじ
PWA Builder での PWA の開始
https://www.pwabuilder.com/
ホストされている PWA をパッケージング
Windows Store App の価値
• デベロッパーセンターの分析
• アプリ内課金
• プロモーションの機会
• データストレージの上限がない
• Service Workers
• WinRT API へのアクセス
Progress...
WinRT API にアクセス可能
//Windows にインストールされているかどうか
//セカンダリータイルをピン留めする
//有効化される場所
Progressive Web Apps の価値を高める API
• CSS3
• WebAssembly
• WebVR
• Web Payments
Progressive Web Apps の位置づけ
Web と Native の間を埋める
Progressive Web Apps の位置づけ
Web と Native の間を埋める
PWA
まとめ
=
• Service Worker
• Web Application Manifest
• Other..
Web
+
Native
Apps
This is
good one!
参考
• Progressive Web Apps on Windows
• Sonarwhal
• PWA BUILDER
• Building Progressive Web Apps
for Windows devices : Build...
Ask the Speaker のご案内
ブレイクアウトセッション終了後の休憩時間に、
登壇したスピーカーに直接ご質問いただける
コーナーを 「Ask The Speakers」 Room に
用意しております。セッション内容のより深い
理解の...
セッションアンケートにご協力ください。
Twitter のご案内
© 2018 Microsoft Corporation. All rights reserved.
本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。
進化する Web  ~ Progressive Web Apps の実装と応用 ~
Upcoming SlideShare
Loading in …5
×

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

293 views

Published on


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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

進化する 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. 本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。

×