Progressive Web Apps line between web and native apps become thinner

Progressive Web Apps line between web and native apps become
thinner Oleh Zasadnyy @ozasadnyy

Instant Loading Add to Home Screen Push NotiCcations Fast Secure
Responsive

Responsive

Secure

Secure Trust Data integrity User privacy

HTTP attackers sensitive data

HTTP Best deal! Only today. inject advertisement

Instant loading

P R P L

Push critical resources for the initial URL route

Render initial route

Pre-cache remaining routes

Lazy-load and create remaining routes on demand

App shell Content

<app-drawer-layout fullbleed>  <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>  <my-view2 name="view2"></my-view2>  <my-view3 name="view3"></my-view3>  <my-view404
name="view404"></my-view404>  </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'; } }

HTTP/2 Server Push

hFps://shop.polymer-project.org Demo time

Add to Home Screen

<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"  },{  "src": "images/icons/splash-icon-192.png",  "sizes": "192x192",  "type": "image/png"  },{  "src": "images/icons/splash-icon-384.png",  "sizes": "384x384",  "type": "image/png"  }],  "start_url": "/",  "display": "standalone",  "background_color": "#607d8b",  "theme_color": "#607d8b"  }

[{  "src": "images/icons/splash-icon-128.png",  "sizes": "128x128",  "type": "image/png"  },{  "src": "images/icons/splash-icon-192.png",  "sizes": "192x192",  "type": "image/png"  },{  "src": "images/icons/splash-icon-384.png",  "sizes": "384x384",  "type": "image/png"  }],  "start_url": "/",  "display": "browser",  "background_color": "#607d8b",  "theme_color": "#607d8b"  }

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

[{  "src": "images/icons/splash-icon-128.png",  "sizes": "128x128",  "type": "image/png"  },{  "src": "images/icons/splash-icon-192.png",  "sizes": "192x192",  "type": "image/png"  },{  "src": "images/icons/splash-icon-384.png",  "sizes": "384x384",  "type": "image/png"  }],  "start_url": "/",  "display": "browser",  "background_color": "#607d8b",  "theme_color": "#607d8b"  }

hFps://devfest.gdg.org.ua Demo time

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

OUine access

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

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

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

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

hFps://devfest.gdg.org.ua Demo time

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

Push NotiCcations

Timely Precise Relevant

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

navigator.serviceWorker.register('/service-worker.js') .then(reg => { reg.pushManager.getSubscription() .then(sub => { console.log('Subscription Info',
sub); }); }); Check for Subscriptions

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

navigator.serviceWorker.getRegistration() .then(reg => { reg.pushManager.getSubscription() .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 Browser End 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 BuFons

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);  }  });

hFps://tests.peter.sh/notiCcation-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 NotiCcations — 62.33% Add to Home Screen — 56.83%

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

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

Maximize reach

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

Fewer clicks, more patience

A seamless inter-app experience

Is this the end of Native apps?

BROWSER BROWSER BROWSER BROWSER BROWSER 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); Credential Management API

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  }); Credential Management API

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 => {  ...  });  }  }); Credential Management API

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

hFps://credential-management-sample.appspot.com Demo time

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

Payments

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(); 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

hFps://emerald-eon.appspot.com Demo time

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

Bluetooth

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

hFps://beaufogfrancois.github.io/sandbox/web-bluetooth/eddystone-url-conCg 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

hFps://ag-socks.herokuapp.com/demo.html Demo time

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

navigator.share({  title: 'Web Today',  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

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

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

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

Reduce development time

Simple updates

Uniﬁed customer experience

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

Progressive Web Apps line between web and nativ...

Progressive Web Apps line between web and native apps become thinner

More Decks by Oleh Zasadnyy

Other Decks in Programming

Featured

Transcript