Progressive Web Apps

Are Progressive Web Apps the Future of Web
Development?

● Current state of Apps
● PWAs
● Manifest
● Service Worker
● Push Notifications
● Outlook
What’s up today?

https://www.fiksu.com/resources/fiksu-indexes/

“Every Step Costs You 20% of Users”

http://beetfusion.com/blogs/sujit-singh/asking-key-roi-questions
Easy to Launch
Immetiate Value
Offline (mostly)
Handle slow Connections
Push Notifications
Device Access

What is a “Progressive Web App”?
● Works offline
● Launches from home screen
● Hides URL bar
● Branded colors
● "First class" treatment in OS
● Push notifications (optional)

Add to homescreen
Is not Bookmarking

example.com
vs.
example.com/blog/2016/08/PWA

Next Steps
● Be on HTTPS
● Add a manifest to control the how your experience is
shown and launched
● Use Service Worker and make it work offline
● Control the prompting experience

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

What to Launch
{
"icons": [
{
"sizes": "192x192"
}
],
"start_url": "index.html?homescreen", // statistics....
}
Must Match the
ServiceWorker

Resources
Guides https://goo.gl/UrOYcG
Samples https://goo.gl/phPpab
Spec w3c.github.io/manifest/

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

example.com
// 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);
});
});
}
};

Service Workers Are
Network Progressive
Enhancement
A Programmable Network Proxy under your control.

Service Workers are to
Progressive Web Apps as
XMLHttpRequest was to Ajax
The foundational capability that was a tipping point for innovation

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

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

1. Works if Browser Closed
2. 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

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

● Reliable: Fast loading, offline and on flaky networks
● Fast: Smooth animation, scrolling and nav
● Engaging and integrated
On the home screen, no URL bar, icons, splash
● Re-engaging with push notifications
● Consistent experience across browsers
The Progressive Web App Experience

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.9kr8ci
pk9uk7
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

Progressive Web Apps

More Related Content

What's hot

Viewers also liked

Similar to Progressive Web Apps

More from Johannes Weber

Recently uploaded

Progressive Web Apps