From AMP to PWA

Confidential & ProprietaryConfidential & Proprietary
PWA!?!

“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

Proprietary + Confidential
Ido Green@greenido
ido-green.appspot.com

Confidential & ProprietarySource: xkcd.com a webcomic of romance, sarcasm, math, and language

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

In reality, time spent is concentrated in a few
Mobile 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

Confidential & ProprietarySource: comScore Mobile Metrix, U.S., Age 18+, June 2015
The web offers broader reach, but engagement is low
Top 1000 mobile apps vs. top 1000 mobile web properties
10.9
Monthly unique visitors (MM)
3.3
Average minutes per visitor
Mobile webApps
8.9
201.8

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 engagement
Opportunity 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

A holistic strategy for Mobile
Start thinking Site and App - not Site or App;
provide the best experience in both.
Site App

Agenda
● Progressive Web Apps
● #movingtoHTTPS
● One tap Sign In
● One tap Check Out
● Physical Web
● Q&A

Keys to a great mobile web experience
Security
HTTPS as web
standard
Speed and Engagement
Instant loading with AMP and
next gen, app-like experiences
with Progressive Web Apps
Simplicity
One-tap sign in,
easy check out,
real world interactions
with physical web

Speed and
Engagement

Speed is the biggest factor driving
engagement on mobile web

of people abandon a website that
takes more than 3 seconds to load40%

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

AMP is simple for users to start fast
Web pages, today Accelerated Mobile Pages

4x 10x
faster less data
<1 second
median load time

Confidential + Proprietary
Proprietary + Confidential
Washington Post AMP Metrics
Performance:
● 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%

Confidential + ProprietaryConfidential + Proprietary
AMP:
Start Fast
Progressive Web Apps:
Stay Engaged

Progressive Web Apps
All 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

Flipkart example

Increase in conversion rate and lower data cost
higher conversions from users arriving via home
screen icon (Flipkart, 2015)
+70%
3xLower data usage

Enabling app-like capabilities
Service 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"
}

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)

Avoid the dreaded white screen
Similar to apps, always show
basic splash screen
experience while your
content loads

Load site quickly with app shell caching

Show content when on flaky networks

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

Send Web push notifications
System level notifications, like apps
Ask to notify users with specific information
Can send notifications even when page closed

AMP to Progressive Web App

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

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

Jumia has seen
success with
push notifications
Users that enabled
push notifications made
9X more
more conversions on
previously abandoned carts

PWAs can work across browsers
Using standard progressive enhancement techniques, PWAs can
be made to work across all modern browsers

AliExpress is seeing
increased engagement
across browsers
74% increase
in time spent overall and...
82% more
conversions on iOS

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

Security

HTTPS: Secure connection between site and users

Why a secure web matters
Trust
Is this site who they
claim to be?
Data integrity
Has anyone tampered
with this page?
User privacy
Can anyone see my
browsing behavior?

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

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

Browsers to Start Changing UI to Indicate Insecure Content

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/

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

Simplicity

One Tap Sign in
with
Credential Manager API

Asking users to sign in
today is hard
of users give up if they
are unable to sign in
92%

Chrome already helps users
sign in more easily
8B
Sign-ins are assisted by
Chrome’s password
manager a month

One Tap Check Out with Web Payments API

66%
Of mobile
purchases are on
the web
...but conversion
lags behind
other platforms
-66%
Mobile web vs desktop
web conversion rate

How to close the mobile web conversion gap?
Web Today
Make checkout forms
less painful
Autofill
Next Generation
Eliminate checkout
forms entirely
PaymentRequest
API

Autofill
Fill payment forms in one-tap
Cards/Addresses Synced
Zero merchant integration
Increase form submission rate
More: checkout-faster-with-autofill

PaymentRequest API
Open Javascript API
Browser handles payment collection
Cross Browser / Cross Platform
Any form of Payment
Single Click Checkout UI

Physical Web

The Physical Web: Nearby objects and places broadcast sites

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

Thank You!

From AMP to PWA

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to From AMP to PWA

Similar to From AMP to PWA (20)

More from Ido Green

More from Ido Green (20)

Recently uploaded

Recently uploaded (20)

From AMP to PWA