Progressive Web App at Google I/O 2016

Summary of Progressive Web App at Google I/O 2016

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 - The site begins life as a regular tab. It doesn’t have super- powers
6. But it is but using Progressive App features - Security - Responsive Design
7. But it is but using Progressive App features - Offline experience
8. But it is but using Progressive App features - Re-engaging by push notification
9. 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
10. When launched from the home screen, these apps blend into their environment - top-level - full-screen
11. Progressive Web App @ Google I/O 2016
12. +JimmyMoon @ragingwind Google Developer Expert KOSSLab
24. “How do you build a great (progressive) web app on the mobile … ? > Our answer is to”
25. http://goo.gl/xU2MMu
26. Use the Platform to build create apps - Minimal payload & overhead - Minimal time to first interaction - Offline-first
29. Using Custom Elements with Platform power for App shell architecture Pages are Web Components
30. http://jonrimmer.github.io/are-we-componentized-yet/
32. - Service Worker - Push notification - Geolocation and More Platform APIs - HTTP/2 - Firebase hosting - Brotli HTTPS
37. Our tools become part of our deploy process, but not part of our development process
38. Use the Platform to build create apps - Minimal payload & overhead - Minimal time to first interaction - Offline-first
39. - Very fast first loading experience - Cached shell load instantly - Running on RAIL App shell architecture
42. Three components for App shell. Using transform, rAF and … layout once FLIP animations
43. Devtools Time Timeline: https://googlechrome.github.io/ui-element- samples/expand-collapse/
44. Using Polymer’s <app-layout> for App shell architecture <app-layout>
51. 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
62. Lighthouse demo: https://jakearchibald-gcm.appspot.com/
64. Devtools Time Service Worker: https://airhorner.com/
65. Use the Platform to build create apps - Minimal payload & overhead - Minimal time to first interaction - Offline-first
66. Handling Offline
70. Cache
74. Devtools Time Cache: https://jakearchibald-gcm.appspot.com/
75. Installable App launch from home screen splash screen
85. http://app-manifest.firebaseapp.com/
86. $ npm install -g pwa-manifest
87. Devtools Time Web Manifest: https://airhorner.com/
88. Storage
90. IndexedDB It’s the worst API ever designed in the history of computer science.
93. 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
96. Devtools Time IndexedDB: https://jakearchibald-gcm.appspot.com/
97. Sync
100. Web Push for Push notification
125. https://github.com/gauntface/simple-push-demo
126. Pushing for engaging
 on Progressive Web Apps
132. 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