Building modern Progressive Web Apps with Polymer
2 likes333 views
The document discusses Progressive Web Apps (PWAs) and their advantages, emphasizing features like progressive enhancement, responsiveness, offline capabilities through service workers, app-like experiences, and safety via HTTPS. It also introduces Polymer as a tool for building modern PWAs, showcasing its components, routing strategies, and development milestones. Additionally, it touches on the re-engagement features and the ease of installing and sharing PWAs.
Building modern Progressive Web Apps with Polymer
- 1. Building modern progressive web apps with Polymer
- 3. @d_danailov
- 4. Topics Today ● What exactly are Progressive Web Apps ? ● Tools and Libraries for Progressive Web Apps ● Polymer overview ● Building modern progressive web apps with Polymer ● There’s no silver bullet
- 5. What exactly is a Progressive Web App?
- 6. Radically improving web user experience
- 7. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
- 8. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next
- 9. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks
- 10. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model
- 11. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model Fresh - Always up-to-date thanks to the service worker update process
- 12. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model Fresh - Always up-to-date thanks to the service worker update process Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
- 13. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model Fresh - Always up-to-date thanks to the service worker update process Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it
- 14. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model Fresh - Always up-to-date thanks to the service worker update process Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it Re-engageable - Makes re-engagement easy through features like push notifications
- 15. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model Fresh - Always up-to-date thanks to the service worker update process Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it Re-engageable - Makes re-engagement easy through features like push notifications Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store
- 16. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet or whatever is next Connectivity independent - Enhanced with service workers to work offline or on low-quality networks App-like - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model Fresh - Always up-to-date thanks to the service worker update process Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it Re-engageable - Makes re-engagement easy through features like push notifications Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store Linkable - Easily share via URL, does not require complex installation
- 20. Housing.com: User Acquisition Costs $ 3.75 Android App Mobile Web $ 0.07 1 vs 53
- 21. 17 000+ developers across 35+ countries
- 23. sw-precache Build-time precaching for static assets github.com/GoogleChrome/sw-precache
- 24. sw-toolbox Runtime caching strategies & expiration github.com/GoogleChrome/sw-toolbox
- 31. Framework Layers ● Routes match URLs and apply Handlers ○ RegExpRoute ○ ExpressRoute ○ … and more! Routing
- 32. Framework Layers ● Routes match URLs and apply Handlers ○ RegExpRoute ○ ExpressRoute ○ … and more! ● Called by Route, or used in your own code (Caching strategies) ○ StaleWhileRevalidate ○ NetworkFirst ○ … and more! Routing Runtime Handlers
- 33. Framework Layers ● Routes match URLs and apply Handlers ○ RegExpRoute ○ ExpressRoute ○ … and more! ● Called by Route, or used in your own code ○ StaleWhileRevalidate ○ NetworkFirst ○ … and more! ● Custom callbacks for network & caches ○ requestWillFetch (Custom Action) ○ fetchDidFail (Custom Action) ○ cacheDidUpdate (Custom Action) Routing Runtime Handlers Request Behaviors
- 35. Browser Request Web API Server Progressive web apps (PWA) Service Worker Cache
- 36. Polymer overview
- 37. Web Components
- 40. 2014 - Polymer 0.5 (Developer preview) 2015 - Polymer 1.0 2016 and 2017 - Polymer 2.0
- 41. 500 + projects 6,000+ elements
- 43. My first component Picture-frame.html <link rel=”import” href="https://polygit2.appspot.com/components/polymer/polymer.html"> <dom-module id=”picture-frame”> <template> <style> :host { display: block; } </style> <h1>Hello jstalks</h1> <!-- any children are rendered here → <content></content> </template> <script> Polymer({ ‘is’: ‘picture-frame’ }) </script> </dom-module> <picture-frame> <img src=”jstalks.png” alt=”jstalks” /> </picture-frame>
- 44. Image Source: Polymer Summit 2016
- 45. Building modern progressive web apps with Polymer
- 46. Push components for initial route Pre - cache components for remaining routes Lazy - load & create next routes on-demand Render the initial route asap The PRPL Pattern
- 49. Security
- 52. Template Shadow dom v0 Custom Elements v0 HTML Imports
- 53. Template Shadow dom v1 Custom Elements v1 HTML Imports
- 54. How I learned to stop worrying and love the Polymer toolbox (Polymer Summit 2016)
- 55. #UseThePlatform
- 58. MyTeletouch your phone as TV-PC wireless keyboard
- 59. Questions