Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become thinner"

Instant

Loading
Add to

Home Screen
Push

Noti8cations
Fast Secure Responsive

Secure
Trust
Data integrity
User privacy

HTTP
Best deal!
Only today.
inject advertisement

Push critical resources
for the initial URL route

Lazy-load and create
remaining routes on
demand

<app-drawer-layout> 
<app-drawer> 
<app-toolbar>Menu</app-toolbar> 
<iron-selector selected="[[page]]"> 
<a name="view1" href="/view1">View One</a> 
... 
</iron-selector> 
</app-drawer> 
 
<app-header-layout> 
... 
</app-header-layout> 
</app-drawer-layout>

<iron-pages selected="[[page]]" attr-for-selected="name"> 
<my-view1 name="view1"></my-view1> 
</iron-pages>

class MyApp extends Polymer.Element {
static get is() {
return ‘my-app';
}
static get properties() {
return {
page: {
type: String,
observer: '_pageChanged',
},
};
}
_pageChanged(page) {
const resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
}
_showPage404() {
this.page = 'view404';
}
}

h>ps://shop.polymer-project.org
Demo time

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>GDG DevFest Ukraine 2017</title> 
<link rel="manifest" href="manifest.json">
...

{ 
"name": “GDG DevFest Ukraine 2016", 
"short_name": “GDG DevFest", 
"icons": [{ 
"src": "images/icons/splash-icon-128.png", 
"sizes": "128x128", 
"type": "image/png" 
},{ 
"sizes": "192x192", 
},{ 
"sizes": "384x384", 
}], 
"start_url": "/", 
"display": "standalone", 
"background_color": "#607d8b", 
"theme_color": "#607d8b" 
}

{ 
"name": “GDG DevFest Ukraine 2016", 
"short_name": “GDG DevFest", 
"icons": [{ 
"sizes": "128x128", 
},{ 
"sizes": "192x192", 
},{ 
"sizes": "384x384", 
}], 
"start_url": "/", 
"display": "browser", 
"background_color": "#607d8b", 
"theme_color": "#607d8b" 
}

h>ps://devfest.gdg.org.ua
Demo time

56.83%
Source (Mar 2017): http://caniuse.com/#feat=web-app-manifest
IN DEV IN DEV

navigator.serviceWorker.register('/service-worker.js')
.then(reg => {
console.log('Service Worker Registered', reg);
})
.catch(err => {
console.log('Error registering Service Worker', err);
});
Register Service Worker

const cacheName = 'app-shell-cache-v1';
const filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', event => {
event.waitUntil(caches.open(cacheName)
.then(cache => cache.addAll(filesToCache))
.then(() => self.skipWaiting())
);
});
Cache Files

self.addEventListener('activate', event => {
event.waitUntil(caches.keys()
.then(keyList => {
return Promise.all(keyList.map(key => {
if (key !== cacheName) {
return caches.delete(key);
}
}));
}));
return self.clients.claim();
});
Remove Outdated Resources

self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request)
.then(response => {
return response || fetch(event.request);
}));
});
Return Resources from Cache

Amsterdam, NL - Go Daddy - Chrome - 3G
First View (3.7s)
Repeat View (0.6s)

Browser quota limits
6% of free disk
space per
origin
10% of free
disk space
(shared
across
eTLD+1)
at least 10%
of free disk
space
8GB: 10MB
32GB: 50MB
128GB: 250MB
>128GB: 500MB

62.8%
Source (Mar 2017): http://caniuse.com/#feat=serviceworkers
CONS. IN DEV

Check if User
is Subscribed
Ask User
To Subscribe
User
Subscribes
Send
Subscription
Save
Subscription
Browser Server
Subscribing Users

.then(reg => {
reg.pushManager.getSubscription()
.then(sub => {
console.log('Subscription Info', sub);
});
});
Check for Subscriptions

.then(reg => {
.then(sub => {
console.log('Subscription Info', sub);
});
});
Check for Subscription

JSONi8ed Subscription Object
{ 
"endpoint": "https://example.com/push/ddj4Sk3abw:A49b...", 
"keys": { 
"auth": "qLAYRzG9TnUwbprns6H2Ew==", 
"p256dh": "BILXd-c1-zuEQYXH_tc3qmLcqZclw7-Xs0Nlu/sG..." 
} 
}

navigator.serviceWorker.getRegistration()
.then(reg => {
.then(sub => {
if (sub) {
sub.unsubscribe();
console.log('Update our server to remove subscription');
}
});
})
.catch(error => {
console.log('Error while trying to unsubscribe', error);
});
Unsubscribe the User

Generate
Message
Send to
End Point
Send to
Browser
Received
by Browser
Server BrowserEnd Point
Sending Messages

Push Arrives SW Starts Handle
Message
Show
Notiﬁcation
Browser
Receiving Messages

self.addEventListener('push', event => {
let data;
if (event.data) {
data = event.data.json();
} else {
// fetch data from server
}
self.registration.showNotification(data.title, {
body: data.body, icon: data.icon, tag: data.tag
});
});
Listen For Messages

{ 
"body": "Did you make a $1,000,000 purchase at Dr. Evil...", 
"icon": "images/card.png", 
"vibrate": [200, 100, 200, 100, 200, 100, 400], 
"tag": "request", 
"actions": [ 
{ "action": "yes", "title": "Yes", "icon": "images/yes.png" }, 
{ "action": "no", "title": "No", "icon": "images/no.png" } 
] 
}

self.registration.showNotification(data.title, { 
body: data.body, 
icon: data.icons, 
tag: data.tag, 
actions: [ 
{action: 'like', title: 'Like', icon: ic_li}, 
{action: 'reshare', title: 'Reshare', icon: ic_re} 
] 
});
Add Action Bu>ons

Respond To The User
self.addEventListener('notificationclick', event => { 
if (event.action === 'like') { 
event.waitUntil(fetch('/like-from-notification')); 
} else if (event.action === 'reshare') { 
event.waitUntil(fetch('/reshare-from-notification')); 
} else { 
clients.openWindow(event.srcElement.location.origin); 
} 
});

h>ps://tests.peter.sh/noti8cation-generator
Demo time

62.33%
Source (Mar 2017): http://caniuse.com/#feat=push-api
IN DEV

Responsive
— 100%
Secure
— 100%
Fast
— 100%
Instant Loading
— 62.8%
Push Noti8cations
— 62.33%
Add to Home Screen
— 56.83%

Lighthouse
Project page: https://github.com/GoogleChrome/lighthouse

Project page: https://github.com/GoogleChrome/lighthouse

Source (June 2015): https://goo.gl/nArG5B
2.5x
Monthly unique visitors on mobile
8.9
3.3
BROWSER APP

A seamless
inter-app
experience

Is this the end of

Native apps?

BROWSERBROWSERBROWSERBROWSERBROWSER
14%
10% 9% 8%
20%
158 162
220
251
300
Q1 2013 Q1 2014 Q2 2015 Q4 2015 Q4 2016
Source (Feb 2017): http://flurrymobile.tumblr.com
US Daily Mobile Time Spent

Progressive web apps have limited
capabilities when it comes to offering
integration with a smartphone or
tablet’s hardware features

navigator.credentials.get() 
navigator.credentials.store() 
navigator.credentials.requireUserMediation()
Credential Management API

const cred = new FederatedCredential({ 
id: id,  
name: name,  
provider: 'https://accounts.google.com',  
iconURL: iconUrl  
});
 
navigator.credentials.store(cred);

navigator.credentials.get({ 
password: true, 
federated: { 
providers: [ 
'https://accounts.google.com', 
'https://www.facebook.com' 
] 
}, 
unmediated: true // `unmediated: true` lets the user automatically sign in 
}).then(cred => { 
if (cred) // auto sign-in possible 
else // auto sign-in not possible 
});

navigator.credentials.get().then(cred => { 
if (cred.type === 'federated' 
&& cred.provider === 'https://accounts.google.com') { 
const auth2 = gapi.auth2.getAuthInstance(); 
 
return auth2.signIn({ 
login_hint: cred.id || '' 
}).then(profile => { 
... 
}); 
} 
});

Enable users to sign in with just one
tap
Remember the federated account
the user has used to sign in with
Sign users back in when a session
expires

h>ps://credential-management-sample.appspot.com
Demo time

50.08%
Source (Mar 2017): http://caniuse.com/#feat=credential-management
CONS.CONS.

const request = new PaymentRequest(
methodData, // required payment method data
details, // required information about transaction
options // optional parameter for things like shipping, etc.
);
Payment Request API

const methodData = [{
supportedMethods: [ "basic-card" ],
data: {
supportedNetworks: [ "visa", "mastercard" ]
}
}];
Payment Request API

const details = {
displayItems: [{
label: "Original donation amount",
amount: { currency: "USD", value : "65.00" }, // US$65.00
},
{
label: "Friends and family discount",
amount: { currency: "USD", value : "-10.00" }, // -US$10.00
pending: true // The price is not determined yet
}],
total: {
label: "Total",
amount: { currency: "USD", value : "55.00" }, // US$55.00
}
};
Payment Request API

const options = {
requestShipping: true,
shippingType: "shipping" // "shipping"(default), "delivery" or "pickup"
};
Payment Request API

const request = new PaymentRequest(methodData, details, options);
request.show()
.then(paymentResponse => {
// Process paymentResponse here
paymentResponse.complete("success");
})
.catch(err => {
console.error("Uh oh, something bad happened", err.message);
});
Payment Request API

Standardize the payment
communication flow as much as
possible
Support different secure payment
methods
Integrates into existing checkout
flow

h>ps://emerald-eon.appspot.com
Demo time

25.64%
Source (Mar 2017): http://caniuse.com/#feat=payment-request
FLAGFLAG

navigator.bluetooth.requestDevice({
acceptAllDevices: true, optionalServices: ['generic_access']
})
.then(device => device.gatt.connect())
.then(server => {
...
})
.catch(error => {
console.log(error);
});
Web Bluetooth API

h>ps://beaufodfrancois.github.io/sandbox/web-bluetooth/eddystone-url-con8g
Demo time

43.32%
Source (Mar 2017): http://caniuse.com/#feat=web-bluetooth

navigator.getVRDisplays().then(displays => {
displays = displays.filter(display => display.capabilities.canPresent);
if (displays.length === 0) {
console.warn('No devices available able to present.');
return;
}
this._vr.display = displays[0];
this._vr.display.depthNear = DemoVR.CAMERA_SETTINGS.near;
this._vr.display.depthFar = DemoVR.CAMERA_SETTINGS.far;
});
WebVR API

h>ps://ad-socks.herokuapp.com/demo.html
Demo time

0%
Source (Mar 2017): http://caniuse.com/#feat=webvr
FLAG FLAG

navigator.share({ 
title: 'Web Share API Demo', 
text: 'Hello, United Dev Conf. #pwa #webShareAPI #webrocks', 
url: 'https://web-today.firebaseapp.com/share' 
}) 
.then(() => console.log('Successful share')) 
.catch(error => console.log('Error sharing:', error));
Web Share API

h>ps://justmarkup.com/log/2016/10/using-the-web-share-api
Demo time

0%
Source (Mar 2017): https://paul.kinlan.me/navigator.share
FLAG

— 50.08%
Payment Request API
— 25.64%
Web Bluetooth API
— 43.32%
WebVR API
— 0%
Web Share API
— 0%

Easier access
and increased
engagement

104% for new users across all browsers
82% increase in iOS conversion rate
2X more pages visited per session
74% increase in time spent per session
across all browsers
Live: https://aliexpress.com Source: https://developers.google.com/web/showcase/2016/aliexpress

76% higher conversions across browsers
14% more monthly active users on iOS,
30% on Android
4X higher interaction rate from Add to
Homescreen
Live: http://www.alibaba.com Source: https://developers.google.com/web/showcase/2016/alibaba

38% more conversions
40% lower bounce rate
10% longer average session
30% faster page load
Live: https://housing.com Source: https://developers.google.com/web/showcase/2016/housing

Source: https://developers.google.com/web/progressive-web-apps/checklist
Site is served over HTTPS
Pages are responsive on tablets &
mobile devices
The start URL (at least) loads 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
Progressive Web App Checklist

https://developers.google.com/web/progressive-web-apps
https://www.youtube.com/user/ChromeDevelopers
https://whatwebcando.today
Learn More

Thank you
Oleh Zasadnyy

@ozasadnyy

Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become thinner"

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become thinner"

Similar to Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become thinner" (20)

More from IT Event

More from IT Event (20)

Recently uploaded

Recently uploaded (20)

Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become thinner"