progressive web apps for beginners

Progressive Web Apps for Beginners

Pietro Alberto Rossi

Pietro Alberto Rossipietroalberto.rossi@gmail.com

www.sprik.it

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Before starting…

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Before starting

Before starting

13% Mobile web

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

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Before starting

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Before starting

Progressive Web Apps!!!

@: pietroalberto.rossi@gmail.com | 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.

@: pietroalberto.rossi@gmail.com | 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.

@: pietroalberto.rossi@gmail.com | 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.

@: pietroalberto.rossi@gmail.com | 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.

@: pietroalberto.rossi@gmail.com | 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.

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

History Case

The Washington Post

https://wapo.com/pwa

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

The Washington Post

Add to Home Screen

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

The Washington Post

Add to Home Screen

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

The Washington Post

Splash Screen

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

The Washington Post

Launch it!

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

The Washington Post

Task Manager

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

AliExpress

2x more page views

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Jumia

38% open rate

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

A bit of codes

manifest.json

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

manifest.json

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

manifest.json

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

pwa.html

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

main.js

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

sw.js

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Final Considerations

Final Considerations

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

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Final Considerations

Code, code and code!

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Final Considerations

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Final Considerations

@: pietroalberto.rossi@gmail.com | 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

@: pietroalberto.rossi@gmail.com | 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

@: pietroalberto.rossi@gmail.com | TW: @sprik89 | G+: +PietroAlbertoRossi

Grazie