Introduction aux progressive web apps

WILLIAM PINAUD
PM
SLIDES ♥ AFUP LIMOGES
INTRODUCTION
AUX PROGRESSIVE WEB APPS

ORIGINS
Building the wall of future, stone after stone

MOBILE changed the User eXperience

Native / Hybrid apps changed
the Mobile eXperience

Why?
> Predictable
> Easy-to-find
> Notifications

51% traffic from mobile sources
2x MORE time spent on mobile sources than on regular
computers
Q4 2017 native app sales > mobile+desktop sales
1 second delay = -7% conversion

Lowest cart abandonment (~20%)

78% time spent in their top 3 apps

ZERO new app installed per month

100 new sites visited every month

SO WHAT?
Do a barrel roll. Don’t panic.

Apps are very capable
Web is very transparent and understood

MAKE THE BEST of the two concepts

3. Create apps one can rely on

2. Make UX natural, unified and integrated

SOLVED
(Though it’s a work in progress, you know…)

IMPLEMENTING
PWA How To basics

Web App manifest.json + Add to home screen
Push API
Notifications API
Service workers

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

...
index.html

{
"short_name": "AFUP",
"name": "AFUP Web App",
"icons": [
{
"src": "/images/logo-afup-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/logo-afup-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/afupwa/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/afupwa/",
"theme_color": "#3367D6"
}
manifest.json

// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button'); // use an HTML <button> for the trigger
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault(); // Prevent Chrome 67 and earlier from automatically showing the prompt
deferredPrompt = e; // Stash the event so it can be triggered later.
addBtn.style.display = 'block'; // Update UI to notify the user they can add to home screen
addBtn.addEventListener('click', (e) => {
addBtn.style.display = 'none'; // hide our user interface that shows our A2HS button
deferredPrompt.prompt(); // Show the prompt
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted our AFUP A2HS prompt!');
} else {
console.log('User dismissed our AFUP A2HS prompt!');
}
deferredPrompt = null;
});
});
});
Sample.js (simply included in original HTTP response, like index.php)

Chrome proactive automatic app suggestions:
Valid web app manifest
Be served over HTTPS
Have a valid service worker registered
30s on the website

// Register service worker if possible
// @SEE https://developer.mozilla.org/en-US/docs/Web/API/Navigator
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/afuppwa/afupserviceworker.js')
.then(function() {
console.log('AFUP Service Worker Registered');
})
.catch(function() {
console.log('Whoops! :/');
});
}
index.js (simply included in original HTTP response, like index.php)

// @SEE https://serviceworke.rs/push-simple_service-worker_doc.html
// Register a Service Worker.
navigator.serviceWorker.register('afupserviceworker.js');
navigator.serviceWorker.ready
.then(function(registration) {
// Use the PushManager to get the user's subscription to the push service.
return registration.pushManager.getSubscription()
.then(async function(subscription) {
// If a subscription was found, return it.
if (subscription) {
return subscription;
}
// Get the server's public key
const response = await fetch('./vapidPublicKey');
const vapidPublicKey = await response.text();
// Chrome doesn't accept the base64-encoded (string) vapidPublicKey yet
const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
// Otherwise, subscribe the user (userVisibleOnly allows to specify that we don't plan to
// send notifications that don't have a visible effect for the user).
return registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: convertedVapidKey
});
});
}).then [...]
[1/2]

[...] .then(function(subscription) {
// Send the subscription details to the server using the Fetch API.
fetch('./register', {
method: 'post',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({
subscription: subscription
}),
});
});
[2/2]

// @SEE https://serviceworke.rs/push-simple_service-worker_doc.html
// Register event listener for the ‘push’ event
self.addEventListener('push', function(event) {
// Keep the service worker alive until the notification is created.
event.waitUntil(
// Show a notification with title ‘AFUP Notification’
// and body ‘AFUP rocks, brothers and sisters!’.
self.registration.showNotification('AFUP Notification', {
body: 'AFUP rocks, brothers and sisters!',
})
);
});
afupserviceworker.js

A few key elements to remember (conception):
Work with slow/average connection speed (3G) in browsers
Think about the data volume
Think parallelism
Think about pre-caching
Respect UX

A few key elements to remember (implementation):
Works only on HTTPS
Plan your features simply, MVP + agile build
You’ll get a faster time-to-interactive, whatever
Don’t forget Payment API
Use double opt-in for notifications
Use Lighthouse to get the damn thing work

Don’t forget this is just the beginning

PWA compat
https://github.com/GoogleChromeLabs/pwacompat

PWA checklist by Google
https://developers.google.com/web/progressive-web-apps/checklist

Sandbox tools
https://serviceworke.rs/

PWA builder
https://www.pwabuilder.com/

REFERENCES //
https://www.criteo.com/insights ● Criteo Insights
https://caniuse.com/#feat=web-app-manifest ● Web App compatibility (CanIUse)
https://www.w3.org/TR/appmanifest/ ● W3C App manifests and installation (W3C)
https://developers.google.com/web/fundamentals/performance/prpl-pattern/ ● The PRPL Pattern
https://developers.google.com/web/fundamentals/web-app-manifest/ ● The Web App manifest (Google)
https://www.youtube.com/watch?v=z2JgN6Ae-Bo ● Progressive Web Apps - PWA Roadshow (Google Chrome Developers)
https://www.youtube.com/watch?v=vhg01Ml-8pI ● PWAs vs Native (aka There's A Progressive Web App For That) (Mike Harris)
https://www.youtube.com/watch?v=mM40-gC0xOI ● The State of Progressive Web Apps - The State of the Web (Google Chrome
Developers)
https://developers.google.com/web/progressive-web-apps/checklist ● Progressive Web App Checklist (Google)
https://medium.com/@drync/mobile-web-vs-mobile-app-6df0fbd48503 ● Mobile Web vs. Mobile app (Drync)
https://www.census.gov/retail/mrts/www/data/pdf/ec_current.pdf ● Quarterly U.S. Retail E-commerce Sales (US Census
Bureau News)
https://www.infoworld.com/article/2851396/43-percent-of-marketing-organizations-sell-data.html ● 43 percent of marketing
organizations sell data (Yves de Montcheuil)
https://www.comscore.com/layout/set/popup/Request/Presentations/2017/The-2017-US-Mobile-App-Report?logo=0&c=12 ●
The 2017 U.S. Mobile App Report (ComScore)
https://www.businessinsider.fr/us/mobile-apps-most-popular-e-commerce-channel-q4-2017-2018-2 ● Mobile apps were the
most popular e-commerce channel in Q4 2017 (Daniel Keyes)
https://www.forbes.com/sites/quora/2017/12/19/why-many-online-shopping-sites-are-becoming-mobile-shopping-apps/ ●
Why Many Online Shopping Sites Are Becoming Mobile Shopping Apps (Forbes)
https://itnext.io/part-1-building-a-progressive-web-application-pwa-with-angular-material-and-aws-amplify-5c741c957259 ●
Building a Progressive Web Application (PWA) with Angular Material and AWS Amplify (Michael Labieniec)

GET THE SLIDES //
WILLIAM PINAUD
#LIMOUZICODEV #AFUP #ALIPTIC
(free to reuse)
SLIDESHARE GOOGLE DRIVE

DEMO TIME?
(if you’re still awake)

Demo sources
https://gitlab.com/docfx/afup-pwa-demo-2019

THANK YOU ❤
WILLIAM PINAUD
PM
SLIDES ♥ AFUP LIMOGES

Introduction aux progressive web apps

More Related Content

What's hot (20)

Similar to Introduction aux progressive web apps (20)

Recently uploaded (20)

Introduction aux progressive web apps