SlideShare a Scribd company logo
1 of 42
Download to read offline
Proprietary + Confidential
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 + ConfidentialProprietary + Confidential
Agenda
● Why mobile web matters ?
● What are the user benefits ?
● What are the business impacts ?
● How to make it happen ?
● The future of web ?
Proprietary + ConfidentialProprietary + Confidential
Why mobile web matters ?
Proprietary + ConfidentialProprietary + Confidential
1h18min
25 min
French internet users are mobile 1st
Source : Médiamétrie // Netratings, Aout 2019
2h 27 min
All users 15-34 yo
Proprietary + ConfidentialProprietary + Confidential
But mobile sites are not catching up
contentbazaar.co/20160314/pi-way
Painful interfaceNot reactiveSlow
contentbazaar.co/20160314/pi-way
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
contentbazaar.co/20160314/pi-way
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + Confidential
87% 13%
time spent in native apps
on the web
Source: eMarketer, 2019
First, consumers spent most time in native apps
Proprietary + Confidential
77% 23%
time spent in top 3 apps
on a device
All other apps
Source: eMarketer, 2018
Your App ?
But usage is highly concentrated
Proprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
REACH
CAPABILITIES
Apps are more engaging, but web reaches more users
Mobile Apps Mobile Websites
Proprietary + ConfidentialProprietary + Confidential
REACH
CAPABILITIES
Apps can be easily surfaced and accessed
Google Play Instant
App Deeplink
Android Slices
Mobile Websites
Proprietary + ConfidentialProprietary + Confidential
REACH
CAPABILITIES
PWA are websites as engaging as a native app
Mobile Apps
Mobile
Websites
PWA
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
What are the user benefits ?
Proprietary + ConfidentialProprietary + Confidential
Fast Installable Reliable Engaging
Your users demanded app-like experiences
like an app
u know
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
‘‘
Chrome Dev Summit latest news
Chrome may identify
sites that typically load
fast or slow for users with
clear badging
‘‘
Proprietary + ConfidentialProprietary + Confidential
Improve your webperf
Measure your webperf with
Google PageSpeed Insights KPI
Speed Index
Proprietary + ConfidentialProprietary + Confidential
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 significant 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)
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
Fast page load with the service worker
ClassicPWA
Proprietary + ConfidentialProprietary + Confidential
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.
Proprietary + ConfidentialProprietary + Confidential
Be Installable : no friction for install
Proprietary + ConfidentialProprietary + Confidential
The right message at the right time
Proprietary + ConfidentialProprietary + Confidential
Proprietary + ConfidentialProprietary + Confidential
More informations on : developers.google.com/web
https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
Engage with push notifications
User chooses to opt-in to
push notifications.
Push Notification displayed
even when browser is not
open.
Brings user back into mobile
website.
Proprietary + ConfidentialProprietary + Confidential
Being timely, precise and relevant is crucial for notifications
When, it’s
timely
what & who, it’s
relevant
What, it’s
precise
Proprietary + ConfidentialProprietary + Confidential
What are the business impacts ?
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
How to make it happen ?
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
The future of web
Proprietary + ConfidentialProprietary + Confidential
https://developers.google.com/web/progressive-web-apps/desktop
PWA are available on Desktop since this summer !
Proprietary + ConfidentialProprietary + Confidential
Your PWA can be listed in Google Play through Trusted
Web Activities
And also on Microsoft Store &
Samsung Galaxy Store
Proprietary + ConfidentialProprietary + Confidential
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
Proprietary + ConfidentialProprietary + Confidential
If you want to deep dive :
goo.gle/codec
Code, Design, Culture #codec

More Related Content

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

gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
Asphri457
 
WSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile Applications
WSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile ApplicationsWSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile Applications
WSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile Applications
WSO2
 

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

From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
 
Production-ready progressive web apps
Production-ready progressive web appsProduction-ready progressive web apps
Production-ready progressive web apps
 
Progressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejorProgressive Web Apps - Porque nativo no es significa mejor
Progressive Web Apps - Porque nativo no es significa mejor
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
PWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdfPWA Development Guide_ Creating Progressive Web Apps.pdf
PWA Development Guide_ Creating Progressive Web Apps.pdf
 
LyteSpark
LyteSparkLyteSpark
LyteSpark
 
Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?Progressive web apps For e-Commerce- How do they go hand-in-hand?
Progressive web apps For e-Commerce- How do they go hand-in-hand?
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
Progressive Web Apps: The Breakdown
Progressive Web Apps: The BreakdownProgressive Web Apps: The Breakdown
Progressive Web Apps: The Breakdown
 
Baobab WebSuite overview - Publisher's Toolbox
Baobab WebSuite overview - Publisher's ToolboxBaobab WebSuite overview - Publisher's Toolbox
Baobab WebSuite overview - Publisher's Toolbox
 
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
 
Data driven mobile UX - UX insight 2017, uxinsight.nl
Data driven mobile UX -  UX insight 2017, uxinsight.nlData driven mobile UX -  UX insight 2017, uxinsight.nl
Data driven mobile UX - UX insight 2017, uxinsight.nl
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
9 Best Tools to Leverage for Progressive Web App Development
9 Best Tools to Leverage for Progressive Web App Development9 Best Tools to Leverage for Progressive Web App Development
9 Best Tools to Leverage for Progressive Web App Development
 
WSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile Applications
WSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile ApplicationsWSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile Applications
WSO2Con US 2013 - Using Jaggery in Telecom Web and Mobile Applications
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
 
El siguiente paso para aplicaciones exitosas, aplicando cloud, tensorflow y f...
El siguiente paso para aplicaciones exitosas, aplicando cloud, tensorflow y f...El siguiente paso para aplicaciones exitosas, aplicando cloud, tensorflow y f...
El siguiente paso para aplicaciones exitosas, aplicando cloud, tensorflow y f...
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
Nina Vanneck's presentation at Publish 2016
Nina Vanneck's presentation at Publish 2016Nina Vanneck's presentation at Publish 2016
Nina Vanneck's presentation at Publish 2016
 

More from Thiga

More from Thiga (20)

Should this exist ? (Or how I sold my Product to NASA).
Should this exist ? (Or how I sold my Product to NASA).Should this exist ? (Or how I sold my Product to NASA).
Should this exist ? (Or how I sold my Product to NASA).
 
Comment réduire l’impact de votre produit ?
Comment réduire l’impact de votre produit ?Comment réduire l’impact de votre produit ?
Comment réduire l’impact de votre produit ?
 
AI for Growth: tips, tricks and tools to improve your retention and conversio...
AI for Growth: tips, tricks and tools to improve your retention and conversio...AI for Growth: tips, tricks and tools to improve your retention and conversio...
AI for Growth: tips, tricks and tools to improve your retention and conversio...
 
How to make customer centricity easy and fun ?
How to make customer centricity easy and fun ?How to make customer centricity easy and fun ?
How to make customer centricity easy and fun ?
 
Focus sur la conversion par Pascal Masson de Privateaser
Focus sur la conversion par Pascal Masson de PrivateaserFocus sur la conversion par Pascal Masson de Privateaser
Focus sur la conversion par Pascal Masson de Privateaser
 
Focus sur la création d'un design System
Focus sur la création d'un design System Focus sur la création d'un design System
Focus sur la création d'un design System
 
La quête du Design System !
La quête du Design System !La quête du Design System !
La quête du Design System !
 
Introduction au design system
Introduction au design system Introduction au design system
Introduction au design system
 
Spécial levée de fonds par Sebastien Levaillant de Payfit
Spécial levée de fonds par Sebastien Levaillant de PayfitSpécial levée de fonds par Sebastien Levaillant de Payfit
Spécial levée de fonds par Sebastien Levaillant de Payfit
 
Spécial levée de fonds par Nicolas Venet de Meero
Spécial levée de fonds par Nicolas Venet de MeeroSpécial levée de fonds par Nicolas Venet de Meero
Spécial levée de fonds par Nicolas Venet de Meero
 
Managing stakeholders par Clément Paillasse - Head of Product @Seloger
Managing stakeholders par Clément Paillasse - Head of Product @SelogerManaging stakeholders par Clément Paillasse - Head of Product @Seloger
Managing stakeholders par Clément Paillasse - Head of Product @Seloger
 
Autonomie et alignement : comment orchestrer son département produit à l’Amér...
Autonomie et alignement : comment orchestrer son département produit à l’Amér...Autonomie et alignement : comment orchestrer son département produit à l’Amér...
Autonomie et alignement : comment orchestrer son département produit à l’Amér...
 
Meetup LPCx de juin 2019 avec Younited Credit
Meetup LPCx de juin 2019 avec Younited Credit  Meetup LPCx de juin 2019 avec Younited Credit
Meetup LPCx de juin 2019 avec Younited Credit
 
Le design fiction, pour une innovation toute en frictions
Le design fiction, pour une innovation toute en frictionsLe design fiction, pour une innovation toute en frictions
Le design fiction, pour une innovation toute en frictions
 
Le product designer by Thiga
Le product designer by ThigaLe product designer by Thiga
Le product designer by Thiga
 
Comment on gère la refonte d'un produit existant ? - Xavier Dumont - BAP
Comment on gère la refonte d'un produit existant ? - Xavier Dumont - BAPComment on gère la refonte d'un produit existant ? - Xavier Dumont - BAP
Comment on gère la refonte d'un produit existant ? - Xavier Dumont - BAP
 
Pourquoi et comment Alan a supprimé les réunions ? - Thomas Rolf
Pourquoi et comment Alan a supprimé les réunions ? - Thomas RolfPourquoi et comment Alan a supprimé les réunions ? - Thomas Rolf
Pourquoi et comment Alan a supprimé les réunions ? - Thomas Rolf
 
Lpcx - Comment le Growth Engineering peut rendre votre équipe autonome ?
Lpcx - Comment le Growth Engineering peut rendre votre équipe autonome ?Lpcx - Comment le Growth Engineering peut rendre votre équipe autonome ?
Lpcx - Comment le Growth Engineering peut rendre votre équipe autonome ?
 
Best practice du Data Product Management
Best practice du Data Product ManagementBest practice du Data Product Management
Best practice du Data Product Management
 
LPCx Internationalisation Produit
LPCx  Internationalisation ProduitLPCx  Internationalisation Produit
LPCx Internationalisation Produit
 

Recently uploaded

Teachers record management system project report..pdf
Teachers record management system project report..pdfTeachers record management system project report..pdf
Teachers record management system project report..pdf
Kamal Acharya
 
Laundry management system project report.pdf
Laundry management system project report.pdfLaundry management system project report.pdf
Laundry management system project report.pdf
Kamal Acharya
 
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdfDR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DrGurudutt
 
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdfONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
Kamal Acharya
 

Recently uploaded (20)

Natalia Rutkowska - BIM School Course in Kraków
Natalia Rutkowska - BIM School Course in KrakówNatalia Rutkowska - BIM School Course in Kraków
Natalia Rutkowska - BIM School Course in Kraków
 
Teachers record management system project report..pdf
Teachers record management system project report..pdfTeachers record management system project report..pdf
Teachers record management system project report..pdf
 
Pharmacy management system project report..pdf
Pharmacy management system project report..pdfPharmacy management system project report..pdf
Pharmacy management system project report..pdf
 
Laundry management system project report.pdf
Laundry management system project report.pdfLaundry management system project report.pdf
Laundry management system project report.pdf
 
RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5
RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5
RM&IPR M5 notes.pdfResearch Methodolgy & Intellectual Property Rights Series 5
 
RM&IPR M4.pdfResearch Methodolgy & Intellectual Property Rights Series 4
RM&IPR M4.pdfResearch Methodolgy & Intellectual Property Rights Series 4RM&IPR M4.pdfResearch Methodolgy & Intellectual Property Rights Series 4
RM&IPR M4.pdfResearch Methodolgy & Intellectual Property Rights Series 4
 
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
Software Engineering - Modelling Concepts + Class Modelling + Building the An...Software Engineering - Modelling Concepts + Class Modelling + Building the An...
Software Engineering - Modelling Concepts + Class Modelling + Building the An...
 
Arduino based vehicle speed tracker project
Arduino based vehicle speed tracker projectArduino based vehicle speed tracker project
Arduino based vehicle speed tracker project
 
Introduction to Machine Learning Unit-4 Notes for II-II Mechanical Engineering
Introduction to Machine Learning Unit-4 Notes for II-II Mechanical EngineeringIntroduction to Machine Learning Unit-4 Notes for II-II Mechanical Engineering
Introduction to Machine Learning Unit-4 Notes for II-II Mechanical Engineering
 
Electrical shop management system project report.pdf
Electrical shop management system project report.pdfElectrical shop management system project report.pdf
Electrical shop management system project report.pdf
 
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdfDR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
DR PROF ING GURUDUTT SAHNI WIKIPEDIA.pdf
 
Online book store management system project.pdf
Online book store management system project.pdfOnline book store management system project.pdf
Online book store management system project.pdf
 
Top 13 Famous Civil Engineering Scientist
Top 13 Famous Civil Engineering ScientistTop 13 Famous Civil Engineering Scientist
Top 13 Famous Civil Engineering Scientist
 
BRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWING
BRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWINGBRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWING
BRAKING SYSTEM IN INDIAN RAILWAY AutoCAD DRAWING
 
Construction method of steel structure space frame .pptx
Construction method of steel structure space frame .pptxConstruction method of steel structure space frame .pptx
Construction method of steel structure space frame .pptx
 
İTÜ CAD and Reverse Engineering Workshop
İTÜ CAD and Reverse Engineering WorkshopİTÜ CAD and Reverse Engineering Workshop
İTÜ CAD and Reverse Engineering Workshop
 
ONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdf
ONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdfONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdf
ONLINE CAR SERVICING SYSTEM PROJECT REPORT.pdf
 
KIT-601 Lecture Notes-UNIT-5.pdf Frame Works and Visualization
KIT-601 Lecture Notes-UNIT-5.pdf Frame Works and VisualizationKIT-601 Lecture Notes-UNIT-5.pdf Frame Works and Visualization
KIT-601 Lecture Notes-UNIT-5.pdf Frame Works and Visualization
 
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdfONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
ONLINE VEHICLE RENTAL SYSTEM PROJECT REPORT.pdf
 
"United Nations Park" Site Visit Report.
"United Nations Park" Site  Visit Report."United Nations Park" Site  Visit Report.
"United Nations Park" Site Visit Report.
 

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

  • 1. Proprietary + Confidential 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 ?
  • 2. Proprietary + ConfidentialProprietary + Confidential Agenda ● Why mobile web matters ? ● What are the user benefits ? ● What are the business impacts ? ● How to make it happen ? ● The future of web ?
  • 3. Proprietary + ConfidentialProprietary + Confidential Why mobile web matters ?
  • 4. Proprietary + ConfidentialProprietary + Confidential 1h18min 25 min French internet users are mobile 1st Source : Médiamétrie // Netratings, Aout 2019 2h 27 min All users 15-34 yo
  • 5. Proprietary + ConfidentialProprietary + Confidential But mobile sites are not catching up contentbazaar.co/20160314/pi-way Painful interfaceNot reactiveSlow contentbazaar.co/20160314/pi-way 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 contentbazaar.co/20160314/pi-way
  • 6. Proprietary + ConfidentialProprietary + Confidential 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
  • 7. Proprietary + Confidential 87% 13% time spent in native apps on the web Source: eMarketer, 2019 First, consumers spent most time in native apps
  • 8. Proprietary + Confidential 77% 23% time spent in top 3 apps on a device All other apps Source: eMarketer, 2018 Your App ? But usage is highly concentrated
  • 9. Proprietary + Confidential 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
  • 10. Proprietary + ConfidentialProprietary + Confidential REACH CAPABILITIES Apps are more engaging, but web reaches more users Mobile Apps Mobile Websites
  • 11. Proprietary + ConfidentialProprietary + Confidential REACH CAPABILITIES Apps can be easily surfaced and accessed Google Play Instant App Deeplink Android Slices Mobile Websites
  • 12. Proprietary + ConfidentialProprietary + Confidential REACH CAPABILITIES PWA are websites as engaging as a native app Mobile Apps Mobile Websites PWA
  • 13. Proprietary + ConfidentialProprietary + Confidential 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
  • 14. Proprietary + ConfidentialProprietary + Confidential What are the user benefits ?
  • 15. Proprietary + ConfidentialProprietary + Confidential Fast Installable Reliable Engaging Your users demanded app-like experiences like an app u know
  • 16. Proprietary + ConfidentialProprietary + Confidential 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
  • 17. Proprietary + ConfidentialProprietary + Confidential ‘‘ Chrome Dev Summit latest news Chrome may identify sites that typically load fast or slow for users with clear badging ‘‘
  • 18. Proprietary + ConfidentialProprietary + Confidential Improve your webperf Measure your webperf with Google PageSpeed Insights KPI Speed Index
  • 19. Proprietary + ConfidentialProprietary + Confidential 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 significant 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)
  • 20. Proprietary + ConfidentialProprietary + Confidential 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
  • 21. Proprietary + ConfidentialProprietary + Confidential 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
  • 22. Proprietary + ConfidentialProprietary + Confidential Fast page load with the service worker ClassicPWA
  • 23. Proprietary + ConfidentialProprietary + Confidential 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.
  • 24. Proprietary + ConfidentialProprietary + Confidential Be Installable : no friction for install
  • 25. Proprietary + ConfidentialProprietary + Confidential The right message at the right time
  • 27. Proprietary + ConfidentialProprietary + Confidential More informations on : developers.google.com/web https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile
  • 28. Proprietary + ConfidentialProprietary + Confidential 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
  • 29. Proprietary + ConfidentialProprietary + Confidential Engage with push notifications User chooses to opt-in to push notifications. Push Notification displayed even when browser is not open. Brings user back into mobile website.
  • 30. Proprietary + ConfidentialProprietary + Confidential Being timely, precise and relevant is crucial for notifications When, it’s timely what & who, it’s relevant What, it’s precise
  • 31. Proprietary + ConfidentialProprietary + Confidential What are the business impacts ?
  • 32. Proprietary + ConfidentialProprietary + Confidential Etam ● Instant revisit ● Desktop conversion rate increase ● Conversion rate +30% ● Avg basket value +18%
  • 33. 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
  • 34. Proprietary + Confidential 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
  • 35. Proprietary + ConfidentialProprietary + Confidential How to make it happen ?
  • 36. Proprietary + ConfidentialProprietary + Confidential 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
  • 37. Proprietary + ConfidentialProprietary + Confidential 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
  • 38. Proprietary + ConfidentialProprietary + Confidential The future of web
  • 39. Proprietary + ConfidentialProprietary + Confidential https://developers.google.com/web/progressive-web-apps/desktop PWA are available on Desktop since this summer !
  • 40. Proprietary + ConfidentialProprietary + Confidential Your PWA can be listed in Google Play through Trusted Web Activities And also on Microsoft Store & Samsung Galaxy Store
  • 41. Proprietary + ConfidentialProprietary + Confidential 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
  • 42. Proprietary + ConfidentialProprietary + Confidential If you want to deep dive : goo.gle/codec Code, Design, Culture #codec