Web業界2018クイズ&PWAで遊んでみた!

31959fb2d8d72f6cbf96a13e17107ff8?s=47 kurita
December 20, 2018

 Web業界2018クイズ&PWAで遊んでみた!

PWA(Progressive Web Apps) 進歩的な/革新的な Web アプリ
というけど実際どうなのを考えてみた結果
実際に作って遊んでみた!
https://memberscareer.connpass.com/event/110822/

31959fb2d8d72f6cbf96a13e17107ff8?s=128

kurita

December 20, 2018
Tweet

Transcript

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

  2. 2

  3. 3

  4. 4

  5. 5

  6. 6

  7. 7

  8. 8

  9. 9

  10. 10

  11. 11

  12. 12

  13. 13

  14. 14

  15. 15

  16. 16

  17. 17

  18. 18

  19. 19

  20. 20

  21. 21

  22. 22

  23. 23

  24. 24

  25. 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. 26 ここから本編

  27. 27 PWA って何?

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

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

  30. 30 PWA のすごい 1. 「ホームに追加」ボタンを表示できる 2. 起動時のスプラッシュ画面を表示できる 3. ネイティブアプリのような全画面表示ができる 4.

    インストール不要なアプリ 5. ページの読み込みが早いWebページ 6. オフラインでも動作する 7. プッシュ通知を受信できる
  31. 31 実際に試してみる

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

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

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

  35. 35 比較してみる

  36. 36 デスクトップでもPWA

  37. 37 デスクトップでもPWA <手順> 1. 最新のChrome67 にアップデート 2. 「chrome://flags」をアドレスバーに入れて以下を有効 Desktop PWAs

    を ⇒ 3. Chromeを再起動して、PWA対応サイトで試す Disabled Enabled
  38. 38 先に Chrome の準備 chrome://flags/ 4カ所ほど

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

  40. 40 Twitter でやってみる

  41. 41

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

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

  44. 44 ちょっと作ってみた

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

  46. 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. 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. 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. 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. 50 5.アプリアイコン 1. index.html 2. manifest.json 3. script.js 4. service-worker.js

    5. icon-192.png
  51. 51 やってみよう

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

  53. 53