progressive web apps - intro & learnings

Image: https://yourstory.com/2017/03/progressive-web-vs-native-apps-will-mobile-experience/

Johannes Weber

@jowe

Why?

What & How?

Challenges.

Why PWA?

Take Web Contentm make them offline

and usable on mobile.

Android OS Fragmentation by Device. Source: OpenSignal

http://beetfusion.com/blogs/sujit-singh/asking-key-roi-questions

Easy to Launch

Immediate Value

Offline (mostly)

Handle slow Connections

Push Notifications

Device Access

What are PWA?

What is a “Progressive Web App”?

Progressive because it works for every user

on any browser.

Responsive because it fits any form factor.

Connectivity Independent because it is

designed with the worst network in mind

App-Like as a result of the separation of

functionality from application content.

Fresh due to the service workers updating

content in the background.

Safe because it is served over HTTPS.

Discoverable since search engines are

better able to identify it as an application.

Re-engageable through features like push

notifications.

Installable on a user’s home screen for easy

access.

Linkable through a simple url.

airhorner.com

How to start with PWA?

Precondition: be on HTTPS!

Pruning the Critical Path

Tolerating Network Instability

App Like Characteristics

You Can't Optimize What You Can't Measure

Image: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=de

Image: https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2

Request

HTML

CSS

DOM

CSSOM

JavaScriptRender

TreeLayout PaintNetwork

Critical rendering path

DNS Lookup TCP ConnectionHTTP Request and Response

Server Response Time

Client-Side Rendering

Networkprocessing and

rendering the page

100ms 150ms 150ms 200ms 400ms

One second on a mobile device

Image Source: Aumcore.com

Offline That WorksIt isn't an app if it doesn't start when you tap.

example.com

GET /app.html HTTP/1.1HOST example.com...

HTTP/1.1 200 OKDate: Thu, 19 Feb 2015 05:21:56 GMTcache-control: must_revalidate, public, max-age=3600...

example.com

// sw.jsonfetch = function(e) {

if(e.request.url == "app.html") {e.respondWith(

caches.match(e.request));

}

if(e.request.url == "content.json") {// go to the network for updates,// meanwhile, use cached contentfetch(...).then(function(r) {

r.asJSON().then(function(json) {e.client.postMessage(json);

});});

}};

GET /app.html HTTP/1.1HOST example.com...

GET /content.json HTTP/1.1HOST example.com... GET /content.json HTTP/1.1

HOST example.com...

HTTP/1.1 200 OKDate: Thu, 19 Feb 2015......

// sw.jsonfetch = function(e) {

if(e.request.url == "app.html") {e.respondWith(caches.match(e.request)

);}

if(e.request.url == "content.json") {// go to the network for updates,// meanwhile, use cached contentfetch(...).then(function(r) {r.asJSON().then(function(json) {

e.client.postMessage(json);});

});}

};

Image: https://developers.google.com/web/fundamentals/getting-started/primers/

Worker ThreadMain Thread

Service Workers Are Network Progressive

Enhancement

A Programmable Network Proxy under your control.

w/o ServiceWorker

w/o ServiceWorker

with ServiceWorker

Application Shell

No matter what,it should at least be able to say “sorry mate, I’m offline”

Source: https://developers.google.com/web/updates/2015/11/app-shell

Image: https://sokra.github.io/slides/webpack2

Plaing Page

/w ServiceWorker

/w ServiceWorker/w ApplicationShell

DNS Lookup TCP ConnectionHTTP Request and Response

Server Response Time

Client-Side Rendering

Networkprocessing and

rendering the page

100ms 150ms 150ms 200ms 400ms

Again, that’s one second on a mobile device


Cable Connection


3G Connection

Resources

Guides https://goo.gl/S1yWWe, http://goo.gl/2rPg9B

Samples https://serviceworke.rs, https://goo.gl/nnPd7p

Spec slightlyoff.github.io/ServiceWorker/spec/service_worker

Installable web apps in 2 simple steps

{

"name": "The Airhorner",

"short_name": "Airhorner",

"icons": [],

"start_url": "index.html",

"display": "standalone",

"theme_color": "",

"background_color": ""

}

1. Create a manifest (json)

<link rel="manifest"href="/manifest.json">

2. Link it to your page

Flow

{

"name": "The Air Horner",

"short_name": "Air Horner",

"icons": [

{

"src": "images/Airhorner_192.png",

"type": "image/png",

"sizes": "192x192"

}

],



"orientation": "portrait",

"theme_color": "#2196F3",

"background_color": "#2196F3"

}

Homescreen

{



"icons": [

{



"sizes": "192x192"

}

],






}

App switcher

{



"icons": [

{



"sizes": "192x192"

}

],






}

Splash screen: part 1

{



"icons": [

{



"sizes": "192x192"

}

],






}

How to launch: standalone

{



"icons": [

{



"sizes": "192x192"

}

],






}

How to launch: browser or fullscreen

{



"icons": [

{



"sizes": "192x192"

}

],


"display": "standalone", // browser or fullscreen




}

How to launch: standalone

{



"icons": [

{



"sizes": "192x192"

}

],






}

@media (display-mode: standalone) {

h3:after { content “ in standalone mode!”}

}

How to launch: window

{



"icons": [

{



"sizes": "192x192"

}

],






}

How to launch: window

{



"icons": [

{



"sizes": "192x192"

}

],


"display": "fullscreen",

"orientation": "landscape",



}

andreasbovens.github.io/inbox-attack

What to Launch

{



"icons": [

{



"sizes": "192x192"

}

],

"start_url": "index.html?homescreen", // statistics....





}

Resources

Guides https://goo.gl/UrOYcG

Samples https://goo.gl/phPpab

Spec w3c.github.io/manifest/

Push Notifications

How can we re-engage users at the right time?

Build better engagement

- Works if Browser Closed

- Needs Permission

+26%increase in average spend

per visit by members arrivingvia a push notification

+72%increase in time spent for users visiting via a push notification

+50%repeat visits within 3 months

Subscribing Users

Ask User to Subscribe

User Subscribes

Send End Point Details

Check If User Is Subscribed

Save End Point Details

Browser Server

Sending Messages

Send to End Point

Send To Browser

Received by Browser

Generate Message

Server End Point Client

Receiving Messages

SW StartsHandle

MessageShow

NotificationPush Arrives

Client

API’s

● Notification API

Handles notification display

● Service Workers API

Handles the push message when it arrives

● Push API

Enables users to (un)subscribe and receive push messages

Resources

Guides https://goo.gl/1uUCGk

Samples gauntface.github.io/simple-push-demo/

Spec w3.org/TR/push-api

Challenges.

Is it worth to dig intoPWA now?

More on https://www.pwastats.com

https://jakearchibald.github.io/isserviceworkerready/index.html

Global Smartphone Sales. Source: Gartner

webpack and PWA

Use Route-Based Code Splitting

Use Smaller Images

Image: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

Delay ServiceWorker Registration

Image: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

THANK YOU!

https://github.com/pazguille/offline-first

https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

https://docs.google.com/document/d/1y94QHbYW2Xmob6vPX2BMBvm50ojR0qD9KEwMBTHNBLg/edit#heading=h.9kr8cip

k9uk7

https://docs.google.com/document/d/1JlKBWmowi9sA5_9FCMBt9WJbTKHc9g6CYZksToCtfd4/edit#

https://serviceworke.rs/

https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en

https://public.etherpad-mozilla.org/p/pwa-nexmo

https://ponyfoo.com/articles/serviceworker-revolution

https://ponyfoo.com/articles/progressive-networking-serviceworker

Related Links

https://github.com/pazguille/offline-first

https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

https://docs.google.com/document/d/1y94QHbYW2Xmob6vPX2BMBvm50ojR0qD9KEwMBTHNBLg/edit#heading=h.9kr8cipk9uk7

https://docs.google.com/document/d/1JlKBWmowi9sA5_9FCMBt9WJbTKHc9g6CYZksToCtfd4/edit

https://serviceworke.rs/

https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en

https://public.etherpad-mozilla.org/p/pwa-nexmo

https://ponyfoo.com/articles/serviceworker-revolution

https://ponyfoo.com/articles/progressive-networking-serviceworker

https://github.com/GoogleChrome/sample-currency-converter

https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

https://habd.as/monitor-pwa-website-performance/

https://github.com/paulirish/pwmetrics

https://developers.google.com/web/showcase/

https://www.pwastats.com/

https://github.com/GoogleChrome/sw-toolbox

Related Links

https://github.com/GoogleChrome/sample-currency-converter

https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures

https://habd.as/monitor-pwa-website-performance/

https://github.com/paulirish/pwmetrics

https://developers.google.com/web/showcase/

https://www.pwastats.com/

https://github.com/GoogleChrome/sw-toolbox

progressive web apps - intro & learnings

Technology