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

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
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
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/
43. - Service Worker - Push notification - Geolocation and More Platform APIs - HTTP/2 - Firebase hosting - Brotli HTTPS
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
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>
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
78. Lighthouse demo: https://jakearchibald-gcm.appspot.com/
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
88. Cache
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
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
112. IndexedDB It’s the worst API ever designed in the history of computer science.
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
119. Devtools Time IndexedDB: https://jakearchibald-gcm.appspot.com/
120. Sync
124. Web Push for Push notification
150. https://github.com/gauntface/simple-push-demo
151. Pushing for engaging
 on Progressive Web Apps
152. Pushing for engaging
 on Progressive Web Apps
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