Quick introduction to Progressive Web Apps: What they are and how polymer can help building a great native-like web app for your service with offline capabilities and push notification among others.

1. Progressive Web Apps
What are they and how to build them with Polymer
Francisco Soares
@dallarosajp
http://dallarosa.me

2. What are Progressive Web Apps?
“A Progressive Web App uses modern web capabilities to deliver an app-like
user experience.” – Progressive Web Apps

4. What can Progressive Web Apps do?
● Push notifications
● Offline capabilities
● “Installable”

5. Service Workers
● Web standard (Draft) - Last Published here, latest version here
○ Offline functionality
○ Push notifications
○ Background content updating
○ Content caching
○ A whole lot more

6. Service Workers
● “Proxy” (Middleware) between app and the system
● Just pieces of a puzzle you have to build by yourself
○ Very complex

8. Service Worker recipes
● Easy to use, reusable recipes available by browser vendors available
○ Mozilla recipes here
○ Google recipes here

9. Service Workers - Compatibility

10. PWA/Service workers - Resources
● Google - Progressive Web Apps
● Mozilla - Progressive Web Apps
● Progressive Web Apps Gallery
● Original blog post on PWA

11. Progressive Web Apps and Polymer
● New App Elements to adhere to “App Shell” design concept
○ app-layout: Set of layout elements for your app
○ app-localize-behavior: help localizing your app
● Platinum Elements to turn your web page into a true webapp
○ platinum-bluetooth: Polymer elements to discover and communicate with Bluetooth
devices
○ platinum-https-redirect: Force a redirect to HTTPS when not on a local web server

12. Appendix

13. Service Workers Compatibility - By Usage

14. App Shell Architecture
● Allows focus on speed
● Native app feel
○ Instant loading
○ Regular updates