Progressive Web Apps - Intro & Learnings

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

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

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

HTML
CSS
DOM
CSSOM
JavaScript
Render
Tree
Layout PaintNetwork
Critical rendering path

DNS Lookup TCP Connection
HTTP Request
and Response
Server
Response Time
Client-Side Rendering
Network
processing and
rendering the page
100ms 150ms 150ms 200ms 400ms
One second on a mobile device

Image Source: Aumcore.com
Offline That Works
It isn't an app if it doesn't start when you tap.

example.com
GET /app.html HTTP/1.1
HOST example.com
...
HTTP/1.1 200 OK
Date: Thu, 19 Feb 2015 05:21:56 GMT
cache-control: must_revalidate,
public, max-age=3600
...

e
// sw.js
onfetch = 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 content
fetch(...).then(function(r) {
r.asJSON().then(function(json) {
e.client.postMessage(json);
});
});
}
};
GET /app.html HTTP/1.1
HOST example.com
...
GET /content.json
HTTP/1.1
HOST example.com
... GET /content.json HTTP/1.1
HOST example.com
...
HTTP/1.1 200 OK
Date: Thu, 19 Feb 2015...
...

// sw.js
onfetch = 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 content
fetch(...).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
mable Network Proxy under your control.

w/o ServiceWorker
with ServiceWorker

Application Shell
No matter what,
east 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 Connection
HTTP Request
and Response
Server
Response Time
Client-Side Rendering
Network
processing 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?

- Works if Browser Closed
- Needs Permission

+26%
increase in average spend
per visit by members arriving
via 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 Starts
Handle
Message
Show
Notification
Push 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

Is it worth to dig into
PWA now?

Progressive Web Apps - Intro & Learnings

More Related Content

What's hot

Similar to Progressive Web Apps - Intro & Learnings

More from Johannes Weber

Recently uploaded

Progressive Web Apps - Intro & Learnings