Progressive Web Apps for Beginners - 2018palermo.grusp.org/wp-content/uploads/2018/06/PWA_Magneti.pdf · Progressive Web Apps A Progressive Web App is •Progressive - Works for every

Progressive Web Apps for Beginners - 2018

Pietro Alberto Rossi


[email protected]

www.sprik.it

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


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.

Check List



• Baseline Progressive Web App Checklist• Exemplary Progressive Web App Checklist

Baseline Checklist


• Site is served over HTTPS• Pages are responsive on tablets & mobile devices• All app URLs load while offline• Metadata provided for Add to Home screen• First load fast even on 3G• Site works cross-browser• Page transitions don't feel like they block on the network

• Each page has a URL

Exemplary Checklist


• Site's content is indexed by Google• Schema.org metadata is provided where appropriate• Social metadata is provided where appropriate• Canonical URLs are provided when necessary• Pages use the History API• Content doesn't jump as the page loads• Pressing back from a detail page retains scroll position on the previous list page

Exemplary Checklist


• When tapped, inputs aren't obscured by the on screen keyboard

• Content is easily shareable from standalone or full screen mode

• Site is responsive across phone, tablet and desktop screen sizes

• Any app install prompts are not used excessively• The Add to Home Screen prompt is intercepted

Exemplary Checklist


• First load very fast even on 3G• Site uses cache-first networking• Site appropriately informs the user when they're offline• Provide context to the user about how notifications will be used

• UI encouraging users to turn on Push Notifications must not be overly aggressive.

• Site dims the screen when permission request is showing

Exemplary Checklist


• Push notifications must be timely, precise and relevant• Provides controls to enable and disable notifications• User is logged in across devices via Credential Management API

• User can pay easily via native UI from Payment Request API

Checklist


https://developers.google.com/web/progressive-web-apps/checklist

Url checklist

https://developers.google.com/web/progressive-web-apps/checklist

Lighthouse


https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

History Case

History Case


The Washington Post


https://wapo.com/pwa

The Washington Post


Add to Home Screen

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


manifest.json


manifest.json


pwa.html


main.js


Service Worker


What is a service worker?

A service worker is a type of web worker. It's essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.

Because workers run separately from the main thread, service workers are independent of the application they are associated with.

Service Worker


What a service worker can do?

• Improve performance of your application/site • Make your app “offline-first" • Act as the base for advanced features (Notification API, Push

API, Backround Sync API, Channel Messaging API)

https://developers.google.com/web/ilt/pwa/introduction-to-service-worker

https://developers.google.com/web/ilt/pwa/introduction-to-service-worker

sw.js


Final Considerations



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



Code, code and code!

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

Thanks

Documents

Progressive Web Apps for Beginners - 2018palermo.grusp.org/wp-content/uploads/2018/06/PWA_Magneti.pdf · Progressive Web Apps A Progressive Web App is •Progressive - Works for every