Progressive Web Apps for Beginners

Progressive Web Apps for Beginners

Pietro Alberto Rossi

Pietro Alberto [email protected]

www.sprik.it

@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi

Before starting…


Before starting

Before starting

13% Mobile web

87% AppsSource: comScore Mobile Metrix, U.S., Age 18+, June 2015


Before starting


Before starting

Progressive Web Apps!!!


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.



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.



• 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.


History Case

The Washington Post

https://wapo.com/pwa


The Washington Post

Add to Home Screen


The Washington Post

Splash Screen


The Washington Post

Launch it!


The Washington Post

Task Manager


AliExpress

2x more page views


Jumia

38% open rate


A bit of codes

manifest.json

@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi@: [email protected] | TW: @sprik89 | G+: +PietroAlbertoRossi

manifest.json


pwa.html


main.js


sw.js


Final Considerations


• Instant Loading • Add to Home Screen • Push Notifications • Fast • Secure • Responsive



Code, code and code!




https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb

https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb

Questions?

References

+PietroAlbertoRossi

@sprik89




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


https://wapo.com/pwa

https://sslmate.com

https://letsencrypt.org/

https://brucelawson.github.io/manifest/

https://manifest-validator.appspot.com/

http://realfavicongenerator.net/

https://codelabs.developers.google.com/pwa-roadshow

Grazie

Progressive Web Apps for Beginners

Technology

Transcript of Progressive Web Apps for Beginners