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

https://www.udacity.com/course/app-monetization--ud518

Proprietary + Confidential

Ido [email protected]

https://greenido.wordpress.com/

https://greenido.wordpress.com/

https://ido-green.appspot.com

https://ido-green.appspot.com

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

http://xkcd.com/1367/

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

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


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

http://avc.com/2015/09/mobile-web-is-top-of-funnel-mobile-app-is-bottom-of-funnel/


A holistic strategy for MobileStart 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

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


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 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%

Confidential + ProprietaryConfidential + Proprietary

AMP: Start Fast

Progressive Web Apps:Stay Engaged


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


Flipkart example

http://www.youtube.com/watch?v=gE25FA8CpbI


Increase in conversion rate and lower data cost

higher conversions from users arriving via home

screen icon (Flipkart, 2015)

+70%

3xLower data usage

https://developers.google.com/web/showcase/2016/flipkart

App


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


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

6Similar to apps, always show basic splash screen experience while your content loads


Load site quickly with app shell caching 2


Show content when on flaky networks

6


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

Confidential + ProprietaryConfidential + Proprietary

AMP: Start Fast

Progressive Web Apps:Stay Engaged


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 moremore 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

TrustIs this site who they

claim to be?

Data integrityHas anyone tampered

with this page?

User privacyCan 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

Typing on mobile is hard

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 sign in

Auto sign in


One Tap Check Out with Web Payments API

66% Of mobile purchases are on the web

...but conversionlags 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

https://developers.google.com/web/updates/2015/06/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

http://physical-web.org


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

https://docs.google.com/document/d/1VC9umaw9TItV31WrcX0eJ9xVsfXXQoWvUjuSqWXmH8A/edit#heading=h.lqutvegp2xkn

https://docs.google.com/document/d/1VC9umaw9TItV31WrcX0eJ9xVsfXXQoWvUjuSqWXmH8A/edit#heading=h.lqutvegp2xkn

http://blog.chromium.org/2016/02/the-physical-web-expands-to-chrome-for_10.html

http://blog.chromium.org/2016/02/the-physical-web-expands-to-chrome-for_10.html


Thank You!

Internet

From AMP to PWA