Progressive Web App at Google I/O at Google I/O 2016 Extended in Korea

Progressive Web App at Google I/O at Google I/O 2016 Extended in Korea

Presentation for Google I/O Extended 2016 in Seoul, Korea. It covers what is the new at PWA. For example, basic knowledge of PWA and high-perfomance app and status of Chrome in emerging margets

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

July 03, 2016
Tweet

Transcript

  1. Progressive Web App @ Google I/O 2016

  2. Progressive Web App?

  3. - Progressively Becoming Apps, building in as Progressive Enhancement Alex

    Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
  4. - Progressively Becoming Apps, building in as Progressive Enhancement Alex

    Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul
  5. - The site begins life as a regular tab. It

    doesn’t have super- powers
  6. - The site begins life as a regular tab. It

    doesn’t have super- powers
  7. - The site begins life as a regular tab. It

    doesn’t have super- powers - The site begins life as a regular tab. It doesn’t have super- powers
  8. But it is but using Progressive App features - Security

    - Responsive Design
  9. But it is but using Progressive App features - Security

    - Responsive Design
  10. But it is but using Progressive App features - Offline

    experience
  11. But it is but using Progressive App features - Offline

    experience
  12. But it is but using Progressive App features - Re-engaging

    by push notification
  13. But it is but using Progressive App features - Re-engaging

    by push notification
  14. The second (or third or fourth) time one visits the

    site - prompt is shown by the browser - Add to home screen
  15. The second (or third or fourth) time one visits the

    site - prompt is shown by the browser - Add to home screen
  16. The second (or third or fourth) time one visits the

    site - prompt is shown by the browser - Add to home screen Users can decide to keep apps to - the home screen or app launcher - Splash screen - Instant loading
  17. When launched from the home screen, these apps blend into

    their environment - top-level - full-screen
  18. When launched from the home screen, these apps blend into

    their environment - top-level - full-screen
  19. Progressive Web App @ Google I/O 2016

  20. +JimmyMoon @ragingwind Google Developer Expert KOSSLab

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. “How do you build a great (progressive) web app on

    the mobile … ? > Our answer is to”
  33. http://goo.gl/xU2MMu

  34. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  35. None
  36. None
  37. None
  38. None
  39. Using Custom Elements with Platform power for App shell architecture

    Pages are Web Components
  40. Using Custom Elements with Platform power for App shell architecture

    Pages are Web Components
  41. http://jonrimmer.github.io/are-we-componentized-yet/

  42. None
  43. - Service Worker - Push notification - Geolocation and More

    Platform APIs - HTTP/2 - Firebase hosting - Brotli HTTPS
  44. None
  45. None
  46. None
  47. None
  48. Our tools become part of our deploy process, but not

    part of our development process
  49. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  50. - Very fast first loading experience - Cached shell load

    instantly - Running on RAIL App shell architecture
  51. - Very fast first loading experience - Cached shell load

    instantly - Running on RAIL App shell architecture
  52. None
  53. None
  54. Three components for App shell. Using transform, rAF and …

    layout once FLIP animations
  55. Three components for App shell. Using transform, rAF and …

    layout once FLIP animations
  56. Devtools Time Timeline: https://googlechrome.github.io/ui-element- samples/expand-collapse/

  57. Using Polymer’s <app-layout> for App shell architecture <app-layout>

  58. Using Polymer’s <app-layout> for App shell architecture <app-layout>

  59. Using Polymer’s <app-layout> for App shell architecture <app-layout>

  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. Service Worker - Born to kill the offline- dinosaur -

    Javascript running in background - Full programmatic control of network and cache - IndexedDB - Plugins https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. Lighthouse demo: https://jakearchibald-gcm.appspot.com/

  79. None
  80. Devtools Time Service Worker: https://airhorner.com/

  81. Use the Platform to build create apps - Minimal payload

    & overhead - Minimal time to first interaction - Offline-first
  82. Handling Offline

  83. Handling Offline

  84. None
  85. None
  86. None
  87. None
  88. Cache

  89. None
  90. None
  91. None
  92. None
  93. Devtools Time Cache: https://jakearchibald-gcm.appspot.com/

  94. Installable App launch from home screen splash screen

  95. Installable App launch from home screen splash screen

  96. None
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. http://app-manifest.firebaseapp.com/

  106. $ npm install -g pwa-manifest

  107. $ npm install -g pwa-manifest

  108. Devtools Time Web Manifest: https://airhorner.com/

  109. Storage

  110. None
  111. None
  112. IndexedDB It’s the worst API ever designed in the history

    of computer science.
  113. None
  114. None
  115. It was a challenge. Wrap IndexedDB, Stash IDB first, try

    to write it to firebase and then remove that stashed data Stashing IndexedDB and Pushing Firebase
  116. It was a challenge. Wrap IndexedDB, Stash IDB first, try

    to write it to firebase and then remove that stashed data Stashing IndexedDB and Pushing Firebase
  117. None
  118. None
  119. Devtools Time IndexedDB: https://jakearchibald-gcm.appspot.com/

  120. Sync

  121. None
  122. None
  123. None
  124. Web Push for Push notification

  125. None
  126. None
  127. None
  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. None
  149. None
  150. https://github.com/gauntface/simple-push-demo

  151. Pushing for engaging
 on Progressive Web Apps

  152. Pushing for engaging
 on Progressive Web Apps

  153. None
  154. None
  155. None
  156. None
  157. None
  158. Next • All screenshots and video clips come from Google

    IO 2016 Videos for Progressive Web App • Google I/O 2016 Codelabs • Progressive Web App Dev Summit 2016 • Progressive Web App on Google developers site • GDG Meetup • Join GDG slack channel #progressive-webapp