This document introduces progressive web apps (PWAs), covering their origins, advantages over mobile apps, implementation basics, and key elements for conception and development. It discusses how PWAs make the best of both web and app concepts by being instantly accessible like web pages but also engaging users through features like push notifications. The document provides code samples for implementing service workers, manifest files, and other PWA features and recommends tools and references for building PWAs.

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

3. ORIGINS
Building the wall of future, stone after stone

4. HTTP defined the web

5. AJAX changed the web

6. MOBILE changed the web

7. MOBILE changed the User eXperience

8. Native / Hybrid apps changed
the Mobile eXperience

9. MobilewebvsMobileapps

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

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

12. Lowest cart abandonment (~20%)

13. 3-4x more time spent in-app

14. DRAWBACKS
Yep, but...

15. 78% time spent in their top 3 apps

16. ZERO new app installed per month

17. 100 new sites visited every month

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

19. Apps are very capable
Web is very transparent and understood

20. NETWORK still is a problem

21. ISO // TCP/IP layers

24. MAKE THE BEST of the two concepts

25. 3. Create apps one can rely on

26. 1. Make it faster

27. 2. Make UX natural, unified and integrated

28. 4. Keep users engaged

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

30. Never go down

31. Instant access

33. Push notifications

34. Start from the web

35. Appears in task managers

36. Keep a little customization

37. HTTP/2 will help

38. HUGE ROI

40. IMPLEMENTING
PWA How To basics

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

42. Web App manifest.json

43. ...
<link rel="manifest" href="/manifest.json">
<!-- Also, add [crossorigin="use-credentials"] if auth is needed. -->
...
index.html

44. {
"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

45. < Results! >

46. Compatibility

47. Add to home screen

48. // 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)

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

50. Service workers

52. // 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)

53. Compatibility

54. Push API

55. Push workflow

56. // @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 [...]
index.js (simply included in original HTTP response, like index.php)
[1/2]

57. [...] .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
}),
});
});
index.js (simply included in original HTTP response, like index.php)
[2/2]

58. Compatibility

59. Notifications API

60. // @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

61. Compatibility

62. IN THE END
What’s for you?

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

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

65. Don’t forget this is just the beginning

66. PRPL architecture principles

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

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

70. Sandbox tools
https://serviceworke.rs/

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

72. Goodbye hybrid/compiled apps?

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

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

75. DEMO TIME?
(if you’re still awake)

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

77. THANK YOU ❤
WILLIAM PINAUD
PM
SLIDES ♥ AFUP LIMOGES