Web業界2018クイズ＆PWAで遊んでみた！

1 2018.12.20 MC Open Lab.#7 メンバーズキャリア Kurita Tatsuo ※配布用（イベント時の編集版です）

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では「右スワイプ」でスライドします

26 ここから本編

27 PWA って何？

28 Progressive Web Apps 進歩的な/革新的な Web アプリ

29 PWA って何？ PWAとは、Progressive Web Appsの略で、モバイル端末のブラウザでWebページを表示するときに、ネイティブアプリのような挙動をさせることができる新しい仕組みです。 Googleを中心に仕様の策定、開発が進められており、 ChromeやFirefoxで利用することができます。

30 PWA のすごい 1. 「ホームに追加」ボタンを表示できる 2. 起動時のスプラッシュ画面を表示できる 3. ネイティブアプリのような全画面表示ができる 4.
インストール不要なアプリ 5. ページの読み込みが早いWebページ 6. オフラインでも動作する 7. プッシュ通知を受信できる

31 実際に試してみる

32 実際に試してみる Google フォト https://photos.google.com/

33 「ホームに追加」ボタン

34 「ホームに追加」ボタンほぼアプリの挙動！

35 比較してみる

36 デスクトップでもPWA

37 デスクトップでもPWA ＜手順＞ 1. 最新のChrome67 にアップデート 2. 「chrome://flags」をアドレスバーに入れて以下を有効 Desktop PWAs
を ⇒ 3. Chromeを再起動して、PWA対応サイトで試す Disabled Enabled

38 先に Chrome の準備 chrome://flags/ 4カ所ほど

39 Twitter でやってみる https://mobile.twitter.com/home

40 Twitter でやってみる

42 スターバックス https://preview.starbucks.com Twitter https://mobile.twitter.com Uber（配車サービス） https://m.uber.com Googleフォト https://photos.google.com

43 インストールされたPWA chrome://apps/

44 ちょっと作ってみた

45 ちょっと作ってみた https://goo.gl/NCshtX

46 1.HTML本体 1. index.html 2. manifest.json 3. script.js 4. service-worker.js
5. icon-192.png <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="robots" content="noindex,nofollow"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>PWAテスト1</title> <link rel="manifest" href="manifest.json"> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body class="conent-body"> <h1>PWAで遊んでみた！</h1> <p>～中略～</p> </body> </html>

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" }

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); }) ; } });

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) { });

50 5.アプリアイコン 1. index.html 2. manifest.json 3. script.js 4. service-worker.js
5. icon-192.png

51 やってみよう

52 ご静聴ありがとうございました

Web業界2018クイズ＆PWAで遊んでみた！

Web業界2018クイズ＆PWAで遊んでみた！

More Decks by kurita

Other Decks in Technology

Featured

Transcript