Slide 1
Slide 1 text
1
2018.12.20 MC Open Lab.#7
メンバーズキャリア Kurita Tatsuo
※配布用（イベント時の編集版です）
Slide 2
Slide 2 text
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
7
Slide 8
Slide 8 text
8
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
10
Slide 11
Slide 11 text
11
Slide 12
Slide 12 text
12
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
14
Slide 15
Slide 15 text
15
Slide 16
Slide 16 text
16
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
19
Slide 20
Slide 20 text
20
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
22
Slide 23
Slide 23 text
23
Slide 24
Slide 24 text
24
Slide 25
Slide 25 text
25
https://goo.gl/DSvQnH
Web Creators MeetUp
クリスマス&忘年会ビアバッシュLT会（MC Open Lab #7）
2018/12/20(木) 19:30
イベント当日に実際に使ったスライドPWAは
左図QRコードに公開中です（2018年12月20日時点）
PCでは「→」キー、SPでは「右スワイプ」でスライドします
Slide 26
Slide 26 text
26
ここから本編
Slide 27
Slide 27 text
27
PWA って何？
Slide 28
Slide 28 text
28
Progressive Web Apps
進歩的な/革新的な Web アプリ
Slide 29
Slide 29 text
29
PWA って何？
PWAとは、Progressive Web Appsの略で、モバイル端末
のブラウザでWebページを表示するときに、ネイティブア
プリのような挙動をさせることができる新しい仕組みです。
Googleを中心に仕様の策定、開発が進められており、
ChromeやFirefoxで利用することができます。
Slide 30
Slide 30 text
30
PWA のすごい
1. 「ホームに追加」ボタンを表示できる
2. 起動時のスプラッシュ画面を表示できる
3. ネイティブアプリのような全画面表示ができる
4. インストール不要なアプリ
5. ページの読み込みが早いWebページ
6. オフラインでも動作する
7. プッシュ通知を受信できる
Slide 31
Slide 31 text
31
実際に試してみる
Slide 32
Slide 32 text
32
実際に試してみる
Google フォト
https://photos.google.com/
Slide 33
Slide 33 text
33
「ホームに追加」ボタン
Slide 34
Slide 34 text
34
「ホームに追加」ボタン
ほぼアプリの挙動！
Slide 35
Slide 35 text
35
比較してみる
Slide 36
Slide 36 text
36
デスクトップでもPWA
Slide 37
Slide 37 text
37
デスクトップでもPWA
＜手順＞
1. 最新のChrome67 にアップデート
2. 「chrome://flags」をアドレスバーに入れて以下を有効
Desktop PWAs を ⇒
3. Chromeを再起動して、PWA対応サイトで試す
Disabled Enabled
Slide 38
Slide 38 text
38
先に Chrome の準備
chrome://flags/
4カ所ほど
Slide 39
Slide 39 text
39
Twitter でやってみる
https://mobile.twitter.com/home
Slide 40
Slide 40 text
40
Twitter でやってみる
Slide 41
Slide 41 text
41
Slide 42
Slide 42 text
42
スターバックス
https://preview.starbucks.com
Twitter
https://mobile.twitter.com
Uber（配車サービス）
https://m.uber.com
Googleフォト
https://photos.google.com
Slide 43
Slide 43 text
43
インストールされたPWA
chrome://apps/
Slide 44
Slide 44 text
44
ちょっと作ってみた
Slide 45
Slide 45 text
45
ちょっと作ってみた
https://goo.gl/NCshtX
Slide 46
Slide 46 text
46
1.HTML本体
1. index.html
2. manifest.json
3. script.js
4. service-worker.js
5. icon-192.png
PWAテスト1
PWAで遊んでみた！
～中略～
Slide 47
Slide 47 text
47
2.manifestファイル
1. index.html
2. manifest.json
3. script.js
4. service-worker.js
5. icon-192.png
{
"short_name": "pwa_test",
"name": "PWA_TEST",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/quiz/002/",
"display": "fullscreen",
"theme_color": "#00A862",
"background_color": "#FFFFFF"
}
Slide 48
Slide 48 text
48
3.scriptファイル
1. index.html
2. manifest.json
3. script.js
4. service-worker.js
5. icon-192.png
// サービスワーカーの登録
window.addEventListener('load', function() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(function(registration) {
console.log('serviceWorker registed.');
}).catch(function(error) {
console.warn('serviceWorker error.', error);
})
;
}
});
Slide 49
Slide 49 text
49
4.service-workerファイル
1. index.html
2. manifest.json
3. script.js
4. service-worker.js
5. icon-192.png
self.addEventListener('fetch', function(event) {
});
Slide 50
Slide 50 text
50
5.アプリアイコン
1. index.html
2. manifest.json
3. script.js
4. service-worker.js
5. icon-192.png
Slide 51
Slide 51 text
51
やってみよう
Slide 52
Slide 52 text
52
ご静聴ありがとうございました
Slide 53
Slide 53 text
53