progressive web apps for beginners
TRANSCRIPT
Progressive Web Apps for Beginners
Pietro Alberto Rossi
Pietro Alberto [email protected]
www.sprik.it
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Before starting…
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Before starting
Before starting
13% Mobile web
87% AppsSource: comScore Mobile Metrix, U.S., Age 18+, June 2015
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Before starting
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Before starting
Progressive Web Apps!!!
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
What are the Progressive Web Apps?
Progressive Web Apps
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast, and engaging.
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Progressive Web Apps
A Progressive Web App is• 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.
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Progressive Web Apps
• 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.
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Progressive Web Apps
• 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.
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Progressive Web Apps
• 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.
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
History Case
The Washington Post
https://wapo.com/pwa
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
The Washington Post
Add to Home Screen
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
The Washington Post
Add to Home Screen
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
A bit of codes
manifest.json
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
manifest.json
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
manifest.json
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
pwa.html
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
main.js
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
sw.js
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Final Considerations
Final Considerations
• Instant Loading • Add to Home Screen • Push Notifications • Fast • Secure • Responsive
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Final Considerations
Code, code and code!
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Final Considerations
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Final Considerations
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb
Questions?
References
+PietroAlbertoRossi
@sprik89
Pietro Alberto Rossi
Pietro Alberto Rossi
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Resources
• Washington Post PWA - https://wapo.com/pwa • SSLMate - https://sslmate.com • Let’s Encrypt - https://letsencrypt.org/ • Manifest Generator - https://brucelawson.github.io/manifest/ • Manifest Validator - https://manifest-validator.appspot.com/ • Favicon Generator - http://realfavicongenerator.net/ • Code labs - https://codelabs.developers.google.com/pwa-roadshow
@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi
Grazie