Focus sur les PWA par Loic de Saint-Andrieu de Google

Proprietary + Conﬁdential
Loïc de Saint-Andrieu - Head of Customer Experience
Jules Rigaud - Mobile Lead
Meetup
Comment donner une expérience App-like à mes users web mobile ?

Proprietary + ConﬁdentialProprietary + Conﬁdential
Agenda
● Why mobile web matters ?
● What are the user benefits ?
● What are the business impacts ?
● How to make it happen ?
● The future of web ?

Why mobile web matters ?

1h18min
25 min
French internet users are mobile 1st
Source : Médiamétrie // Netratings, Aout 2019
2h 27 min
All users 15-34 yo

But mobile sites are not catching up
contentbazaar.co/20160314/pi-way
Painful interfaceNot reactiveSlow
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Source: StatCounter, Quarterly Ecommerce Report from Monetate
That’s why mobile conversion rate are low
Conversion rateTime spent on device
MobileDesktop
4x
Mobile
conversion rate
Desktop
conversion rate
1/2

87% 13%
time spent in native apps
on the web
Source: eMarketer, 2019
First, consumers spent most time in native apps

77% 23%
time spent in top 3 apps
on a device
All other apps
Source: eMarketer, 2018
Your App ?
But usage is highly concentrated

49%
of users download
0 apps per month
Source: Comscore & eMarketer
6
mobile domains
per day
but browse
And the web is key to drive awareness

REACH
CAPABILITIES
Apps are more engaging, but web reaches more users
Mobile Apps Mobile Websites

REACH
CAPABILITIES
Apps can be easily surfaced and accessed
Google Play Instant
App Deeplink
Android Slices
Mobile Websites

REACH
CAPABILITIES
PWA are websites as engaging as a native app
Mobile Apps
Mobile
Websites
PWA

Features PWA iOS PWA Native
Push notifications Yes No Yes
Home screen installation Yes Yes Yes
Offline Yes Yes Yes
Geolocation Yes Yes Yes
Geofencing / background No No Yes
Deep Linking Yes Yes Yes
Contacts No No Yes
Sharing Yes Yes Yes
Payments Yes Yes Yes
Credentials Yes No Yes
Sensors & Hardware
Camera Yes Yes Yes
Gyroscope Yes Yes Yes
Bluetooth No* No Yes
NFC No* No Yes
PWAs are a set of APIs for app-like experiences

What are the user benefits ?

Fast Installable Reliable Engaging
Your users demanded app-like experiences
like an app
u know

Conversion rate (%)
Note: Data under 2.4 sec
removed due to high rate
of 404s and other errors
skewing results.
1.7
1.6
1.4
1.2
1.0
0.8
0.6
0.4
0.2
0.0
1.2 1.5 1.8 2. 2.5 2.7 3.0 3.3 3.5 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
Load time (seconds)
Conversionrate(%)
1.9% conversion rate
(2.5 seconds)
1.5% conversion rate
(3.5 seconds)
1 second
27% more
conversions
Conversion rate (%)
Source: "Mobile performance conversion rate"
Note: Data under 2.4 sec
removed due to high rate
of 404s and other errors
skewing results.
Mobile pages that load 1s faster see up to 27% increase
in CvR

‘‘
Chrome Dev Summit latest news
Chrome may identify
sites that typically load
fast or slow for users with
clear badging
‘‘

Improve your webperf
Measure your webperf with
Google PageSpeed Insights KPI
Speed Index

Web is getting slower
Despite the increase in and availability of
best practice guidance, sites continue to ship
bloated code to their users…
...since Nov 2010, http archive reports
a signiﬁcant increase in
● Image bytes +555%
● Image requests +115%
● Request size +294%
● JavaScript bytes +585%
● JavaScript requests +350%
40% of brands who
optimize speed regress in
6 months
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
State of the web
Size & Data Transfer
Loading Speed (First Contentful Paint)
Median Desktop
2.0 seconds
⇩29%
Median Mobile
6.0 seconds
⇧ 25%
Median Desktop
1502 KB
⇧ 221%
Median Mobile
1568 KB
⇧ 983%
(Nov 15, 2010 - July 1, 2018)
(Dec 15, 2016 - July 1, 2018)

Webperf governance model
A single dashboard KPIs shared between
funtional & IT teams
Dedicated Webperf
owner for IT and for
the functional team
1 2 3

Fast page load with the service worker
First View
Repeat View
with Service
Worker
Page load time (seconds)
Page
Loaded!
Page
Loaded!
Service Worker provides
flexible content caching
for entire user journey.
Load static and dynamic
content instantly from
Service Worker.
Pre-fetch the
next page!
Navigate to next page

Fast page load with the service worker
ClassicPWA

How to implement a service worker?
Re-structure your site with
App Shell Model and break JS into smaller
chunks.
Site restructuring1
Implement Service Worker
using Workbox
3
Plan the caching strategies
for your scenarios
2
Main JS
JS chunk
JS chunk
JS chunk
Evaluate and pick the right caching
strategies for each resource. This
depends on the user experience you
are designing for users.
Create a service worker using
Workbox. Workbox provides a number
of pre-defined caching strategies.
Please note that a service worker registers on
domain level. E.g. www.example.com and
m.example.com needs two different service
workers.

Be Installable : no friction for install

The right message at the right time

More informations on : developers.google.com/web
https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile

Be reliable with offline & poor network experience
Trivago suggest to play a game when the
user goes offline
67% of users whose internet connection
was interrupted came back

Engage with push notifications
User chooses to opt-in to
push notiﬁcations.
Push Notiﬁcation displayed
even when browser is not
open.
Brings user back into mobile
website.

Being timely, precise and relevant is crucial for notifications
When, it’s
timely
what & who, it’s
relevant
What, it’s
precise

What are the business impacts ?

Etam
● Instant revisit
● Desktop conversion rate
increase
● Conversion rate +30%
● Avg basket value +18%

Navigation hors
ligne
Etam, un pionnier de l'expérience e-commerce next generation
PWA présente dans le Google
Play Store - un seul code à
gérer
PWA dans le Play
Store
Sign-in Google Pay Ajout à l’écran
d’accueil
Acquisition Engagement Engagement Conversion Retention
Le protocole WebAuth facilite
le login avec l’empreinte
digitale sur le web
Liste de favoris accessible en
hors ligne (et donc en magasin)
Paiement en 3 clics grâce à
Google Pay
+30% de taux de conversion
des utilisateurs venant du
raccourci

Weekendesk mix web & app to create a seamless experience
Thanks to the Service Worker, the
website is 15-30% faster and transitions
between pages are smoother
On 2nd page visited, Weekendesk
proposes you to add the PWA
shortcut to their home screen
CvR x2.5 from PWA users
When losing network connection,
you can still access your wishlist in
offline mode
You can even install the PWA
from the Play Store like a native
app

How to make it happen ?

You don’t have to go all-in from day one
PRODUCT ROADMAP EXAMPLE
Sprint n+2
Add to Home screen
Sprint n+3
Basic offline
page
Sprint n
Cache Strategy
with service
workers
Sprint n+4
Push
Notifications

Step 1: Fast & reliable → Service worker, interactive
within 10s, offline mode
Step 2: Installable → HTTPS, add to home screen
Step 3: Optimized → full-screen mode, splash
screen, push notifications
Check your Lighthouse PWA Audit

The future of web

https://developers.google.com/web/progressive-web-apps/desktop
PWA are available on Desktop since this summer !

Your PWA can be listed in Google Play through Trusted
Web Activities
And also on Microsoft Store &
Samsung Galaxy Store

Fresh news from Chrome Dev Summit ! New Web APIs
SMS Receiver Contact Picker Native File System API
https://blog.chromium.org/2019/11/chrome-dev-summit-2019-elevating-web.html

If you want to deep dive :
goo.gle/codec
Code, Design, Culture #codec

Focus sur les PWA par Loic de Saint-Andrieu de Google

Recomendados

Recomendados

Más contenido relacionado

Similar a Focus sur les PWA par Loic de Saint-Andrieu de Google

Similar a Focus sur les PWA par Loic de Saint-Andrieu de Google (20)

Más de Thiga

Más de Thiga (20)

Último

Último (20)

Focus sur les PWA par Loic de Saint-Andrieu de Google