From AMP to PWA
Transcript of From AMP to PWA
![Page 1: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/1.jpg)
Confidential & ProprietaryConfidential & Proprietary
PWA!?!
![Page 2: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/2.jpg)
Confidential & ProprietaryConfidential & Proprietary
“There is no higher form of user validation than having customers support your product with their wallets. However, the path to a profitable business is not necessarily an easy one.”
Learn more: https://www.udacity.com/course/app-monetization--ud518
![Page 3: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/3.jpg)
Proprietary + Confidential
![Page 4: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/4.jpg)
Confidential & ProprietarySource: xkcd.com a webcomic of romance, sarcasm, math, and language
![Page 5: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/5.jpg)
Confidential & Proprietary
What about all the time spent in apps?Mobile web vs. apps
vs.
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
13% 87%
Mobile web Apps
![Page 6: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/6.jpg)
Confidential & Proprietary
In reality, time spent is concentrated in a fewMobile web vs. apps
vs.
Source: comScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015
13%35%
Other apps
Entertainment(Games, radio, multimedia)
Social and messaging
32%
20%Mobile web
![Page 7: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/7.jpg)
Confidential & ProprietarySource: comScore Mobile Metrix, U.S., Age 18+, June 2015
The web offers broader reach, but engagement is lowTop 1000 mobile apps vs. top 1000 mobile web properties
10.9
Monthly unique visitors (MM)
3.3
Average minutes per visitor
Mobile webApps
8.9201.8
![Page 8: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/8.jpg)
Confidential & Proprietary
Opportunity to capitalize on broad mobile web reach
Mobile Web Lots of users, but hard to re-engage
High engagement, but a small piece of overall user traffic
Modern web features enable better engagementOpportunity to engage users
Apps
“...your mobile website is the top of the funnel for your user acquisition on mobile. It is where people land
when coming from search, email, social media, text links, etc, etc. The mobile web scales much better.
You can build a large audience on mobile web much more easily than via mobile apps.” -- Fred Wilson
![Page 9: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/9.jpg)
Confidential & Proprietary
A holistic strategy for MobileStart thinking Site and App - not Site or App; provide the best experience in both.
Site App
![Page 10: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/10.jpg)
Confidential & Proprietary
Agenda● Progressive Web Apps
● #movingtoHTTPS
● One tap Sign In
● One tap Check Out
● Physical Web
● Q&A
![Page 11: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/11.jpg)
Confidential & Proprietary
Keys to a great mobile web experience
SecurityHTTPS as web
standard
Speed and EngagementInstant loading with AMP and next gen, app-like experiences
with Progressive Web Apps
SimplicityOne-tap sign in, easy check out,
real world interactions with physical web
![Page 12: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/12.jpg)
Confidential & ProprietaryConfidential & Proprietary
Speed and Engagement
![Page 13: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/13.jpg)
Confidential & Proprietary
Speed is the biggest factor driving engagement on mobile web
![Page 14: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/14.jpg)
of people abandon a website that takes more than 3 seconds to load40%
![Page 15: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/15.jpg)
Confidential & Proprietary
Accelerated Mobile Pages
● Articles are cached and load instantly
● Publishers have control over visual design and business model
● Supports existing ad formats
● Deepen engagement with related articles
● Launched with news and expanding to other content verticals
![Page 16: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/16.jpg)
AMP is simple for users to start fast
Web pages, today Accelerated Mobile Pages
![Page 17: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/17.jpg)
4x 10x faster less data
<1 second median load time
![Page 18: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/18.jpg)
Confidential + Proprietary
Proprietary + Confidential
Washington Post AMP MetricsPerformance:
● Responsive mobile site: 3,500ms● AMP page load time: 1,200ms● AMP CDN load time: 400ms
% of 7 day visits from Search:● Before AMP: 53%● After AMP: 63%
![Page 19: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/19.jpg)
Confidential + ProprietaryConfidential + Proprietary
AMP: Start Fast
Progressive Web Apps:Stay Engaged
![Page 20: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/20.jpg)
Confidential & Proprietary
Progressive Web AppsAll the goodness of websites:
● One click away from accessing content● Available across browsers● Fast loading, smooth animations and navigations
With new capabilities:
● Access via Homescreen icon on device● Good experience on flaky or no network connections● Re-engages with push notifications ● Works better in browsers that support new APIs
![Page 22: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/22.jpg)
Confidential & Proprietary
Increase in conversion rate and lower data cost
higher conversions from users arriving via home
screen icon (Flipkart, 2015)
+70%
3xLower data usage
![Page 23: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/23.jpg)
App
![Page 24: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/24.jpg)
Confidential & Proprietary
Enabling app-like capabilitiesService Worker
● Client-side proxy written in JavaScript● Access device capabilities to allow your site to be
“app like”
Web App Manifest File
● Rich presence on user’s Android homescreen● Launch in full-screen mode on Android (no URL bar)● Control the screen orientation for optimal viewing● Define “splash screen” launch, theme color for site
{"short_name": "My Cool App", "name": "My Totally Cool Application", "icons": [{"src": "launcher-icon-3x.png", "sizes": "192x192", "type": "image/png"}, {"src": "launcher-splash.png", "sizes": "512x512", "type": "image/png"}], "start_url": "index.html", "display": "standalone", "background_color" : "#aeaeae", "theme_color" : "#aeaeae", "orientation" : "landscape"}
![Page 25: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/25.jpg)
Confidential & Proprietary
Add to Homescreen and launch in full-screen mode
User who visits 2x within two weeks will be prompted with “add to homescreen”
One tap to add to homescreen
Opens full screen (no URL bar)
![Page 26: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/26.jpg)
Confidential & Proprietary
Avoid the dreaded white screen
6Similar to apps, always show basic splash screen experience while your content loads
![Page 27: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/27.jpg)
Confidential & Proprietary
Load site quickly with app shell caching 2
![Page 28: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/28.jpg)
Confidential & Proprietary
Show content when on flaky networks
6
![Page 29: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/29.jpg)
Confidential & Proprietary
Instant loading and smooth navigation
● For first-time visitors, get to first paint in <3s on 3G connections
● For repeat visitors, instant loading of page in <500 milliseconds
● Always scrolling at 60 frames/second● Content shouldn’t jump as images are loaded
![Page 30: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/30.jpg)
Confidential & Proprietary
Send Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed
![Page 31: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/31.jpg)
Confidential + ProprietaryConfidential + Proprietary
AMP: Start Fast
Progressive Web Apps:Stay Engaged
![Page 32: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/32.jpg)
Confidential & Proprietary
AMP to Progressive Web App
![Page 33: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/33.jpg)
Confidential & Proprietary
AMP to PWA Flow (1 of 2)
WaPo article in AMP carousel Once on AMP article, WaPo silently registers Service Worker
PWA launchable from menu; in future WaPo may direct more navigations to PWA experience
![Page 34: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/34.jpg)
Confidential & Proprietary
AMP to PWA Flow (2 of 2)
Site loads instantly on WaPo domain Frequent users prompted to add to homescreen
Icon appears on device like other app icons
![Page 35: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/35.jpg)
Confidential & Proprietary
Jumia has seen success with push notifications
Users that enabled push notifications made
9X moremore conversions on previously abandoned carts
![Page 36: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/36.jpg)
Confidential & Proprietary
PWAs can work across browsers
Using standard progressive enhancement techniques, PWAs can be made to work across all modern browsers
![Page 37: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/37.jpg)
Confidential & Proprietary
AliExpress is seeing increased engagement across browsers
74% increase in time spent overall and...
82% more conversions on iOS
![Page 38: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/38.jpg)
Confidential & Proprietary
"One of the reasons we built a Progressive Web App
was to be able to invest in the web experience across
all browsers. Not only did we see huge benefits on
browsers that support the latest features, but we also
got to see a bump across the board. That is the sign of
a great investment, and one that will keep paying for
itself as browsers evolve."
Lijun Chen, Director of AliExpress Mobile Team.
![Page 39: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/39.jpg)
Confidential & ProprietaryConfidential & Proprietary
Security
![Page 40: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/40.jpg)
Confidential + Proprietary
HTTPS: Secure connection between site and users
![Page 41: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/41.jpg)
Confidential & Proprietary
Why a secure web matters
TrustIs this site who they
claim to be?
Data integrityHas anyone tampered
with this page?
User privacyCan anyone see my browsing behavior?
![Page 42: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/42.jpg)
Confidential + Proprietary
Protect Users from Being Tracked and Retargeted
Permacookies can take over HTTP
● Inserted by third parties to follow users on your site
● Collects user browsing behaviors, including searches and other personal info
● Data is sold to competitors who can then target your users
![Page 43: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/43.jpg)
Confidential + Proprietary
Protect Your Business from Unwanted Content
● Third parties (e.g. ISPs) can inject content on your website without your knowledge (possible on all non-HTTPS content!)
● Unwanted ads damage your brand image and put existing ad revenue at risk
● Malware puts your users at serious risk and will cause major damage
![Page 44: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/44.jpg)
Confidential + Proprietary
Browsers to Start Changing UI to Indicate Insecure Content
![Page 45: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/45.jpg)
Confidential + Proprietary
New Web Features Will Only Be Available with HTTPS
Browsers will prohibit use of existing and new technologies if there is only HTTP:
● Camera● Geolocation (recently deprecated)● Auto-Fill for Forms● Progressive Web Apps
○ Push Notifications○ Service Worker
https://blog.mozilla.org/security/2015/04/30/deprecating-non-secure-http/
![Page 46: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/46.jpg)
Confidential + Proprietary
HTTPS Affects Your Search Ranking Positively
● Google announced to use HTTPS as a ranking signal in 2014 already
● Will be strengthened over time to encourage broader use of HTTPS
● Google products moving to HTTPS as well
https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html
![Page 47: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/47.jpg)
Confidential & ProprietaryConfidential & Proprietary
Simplicity
![Page 48: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/48.jpg)
Confidential & Proprietary
One Tap Sign in with
Credential Manager API
![Page 49: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/49.jpg)
Typing on mobile is hard
![Page 50: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/50.jpg)
Asking users to sign in today is hard
of users give up if they are unable to sign in
92%
![Page 51: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/51.jpg)
Chrome already helps users sign in more easily
8B Sign-ins are assisted by Chrome’s password manager a month
![Page 52: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/52.jpg)
One-tap sign in
![Page 53: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/53.jpg)
Auto sign in
![Page 54: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/54.jpg)
Confidential & Proprietary
One Tap Check Out with Web Payments API
![Page 55: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/55.jpg)
66% Of mobile purchases are on the web
...but conversionlags behind
other platforms
-66%Mobile web vs desktop web conversion rate
![Page 56: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/56.jpg)
How to close the mobile web conversion gap?
Web Today
Make checkout forms
less painful
Autofill
Next Generation
Eliminate checkout
forms entirely
PaymentRequest
API
![Page 57: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/57.jpg)
Autofill
Fill payment forms in one-tap
Cards/Addresses Synced
Zero merchant integration
Increase form submission rate
More: checkout-faster-with-autofill
![Page 58: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/58.jpg)
PaymentRequest API
Open Javascript API
Browser handles payment collection
Cross Browser / Cross Platform
Any form of Payment
Single Click Checkout UI
![Page 59: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/59.jpg)
Confidential & Proprietary
Physical Web
![Page 60: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/60.jpg)
Confidential & Proprietary
The Physical Web: Nearby objects and places broadcast sites
![Page 61: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/61.jpg)
Confidential & Proprietary
The Physical Web: Broaden the reach of your site
Physical Web is open for anyone to use
● Modern web browsers unlock powerful actions○ Push notifications○ URL redirectors manage beacons in the cloud○ Web Bluetooth unlocks interactive devices
A few places where it’s currently used○ Brookwood Middle School to send useful classroom information to students○ Golden State Warriors stadium to promote seat upgrades and merchandise sales○ Consumer Electronics Show 2016 to power a scavenger hunt○ Proxama’s MyStop App delivers real time transport updates to Transport for
London bus commuters
![Page 62: From AMP to PWA](https://reader036.fdocuments.in/reader036/viewer/2022081502/58f9b33c760da3da068bd3f4/html5/thumbnails/62.jpg)
Confidential & Proprietary
Thank You!