Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Confidential & ProprietaryConfidential & Proprietary
PWA!?!
Confidential & ProprietaryConfidential & Proprietary
“There is no higher form of user validation than
having customers sup...
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, ...
Confidential & Proprietary
In reality, time spent is concentrated in a few
Mobile web vs. apps
vs.
Source: comScore Media ...
Confidential & ProprietarySource: comScore Mobile Metrix, U.S., Age 18+, June 2015
The web offers broader reach, but engag...
Confidential & Proprietary
Opportunity to capitalize on broad mobile web reach
Mobile Web Lots of users, but hard to re-en...
Confidential & Proprietary
A holistic strategy for Mobile
Start thinking Site and App - not Site or App;
provide the best ...
Confidential & Proprietary
Agenda
● Progressive Web Apps
● #movingtoHTTPS
● One tap Sign In
● One tap Check Out
● Physical...
Confidential & Proprietary
Keys to a great mobile web experience
Security
HTTPS as web
standard
Speed and Engagement
Insta...
Confidential & ProprietaryConfidential & Proprietary
Speed and
Engagement
Confidential & Proprietary
Speed is the biggest factor driving
engagement on mobile web
of people abandon a website that
takes more than 3 seconds to load40%
Confidential & Proprietary
Accelerated Mobile Pages
● Articles are cached and load instantly
● Publishers have control ove...
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...
Confidential + ProprietaryConfidential + Proprietary
AMP:
Start Fast
Progressive Web Apps:
Stay Engaged
Confidential & Proprietary
Progressive Web Apps
All the goodness of websites:
● One click away from accessing content
● Av...
Confidential & Proprietary
Flipkart example
Confidential & Proprietary
Increase in conversion rate and lower data cost
higher conversions from users arriving via home...
App
Confidential & Proprietary
Enabling app-like capabilities
Service Worker
● Client-side proxy written in JavaScript
● Acces...
Confidential & Proprietary
Add to Homescreen and launch in full-screen mode
User who visits 2x
within two weeks will
be pr...
Confidential & Proprietary
Avoid the dreaded white screen
Similar to apps, always show
basic splash screen
experience whil...
Confidential & Proprietary
Load site quickly with app shell caching
Confidential & Proprietary
Show content when on flaky networks
Confidential & Proprietary
Instant loading and smooth navigation
● For first-time visitors, get to first paint in <3s on
3...
Confidential & Proprietary
Send Web push notifications
System level notifications, like apps
Ask to notify users with spec...
Confidential + ProprietaryConfidential + Proprietary
AMP:
Start Fast
Progressive Web Apps:
Stay Engaged
Confidential & Proprietary
AMP to Progressive Web App
Confidential & Proprietary
AMP to PWA Flow (1 of 2)
WaPo article in AMP carousel Once on AMP article, WaPo
silently regist...
Confidential & Proprietary
AMP to PWA Flow (2 of 2)
Site loads instantly on WaPo domain Frequent users prompted to
add to ...
Confidential & Proprietary
Jumia has seen
success with
push notifications
Users that enabled
push notifications made
9X mo...
Confidential & Proprietary
PWAs can work across browsers
Using standard progressive enhancement techniques, PWAs can
be ma...
Confidential & Proprietary
AliExpress is seeing
increased engagement
across browsers
74% increase
in time spent overall an...
Confidential & Proprietary
"One of the reasons we built a Progressive Web App
was to be able to invest in the web experien...
Confidential & ProprietaryConfidential & Proprietary
Security
Confidential + Proprietary
HTTPS: Secure connection between site and users
Confidential & Proprietary
Why a secure web matters
Trust
Is this site who they
claim to be?
Data integrity
Has anyone tam...
Confidential + Proprietary
Protect Users from Being Tracked and Retargeted
Permacookies can take over HTTP
● Inserted by t...
Confidential + Proprietary
Protect Your Business from Unwanted Content
● Third parties (e.g. ISPs) can inject
content on y...
Confidential + Proprietary
Browsers to Start Changing UI to Indicate Insecure Content
Confidential + Proprietary
New Web Features Will Only Be Available with HTTPS
Browsers will prohibit use of existing and
n...
Confidential + Proprietary
HTTPS Affects Your Search Ranking Positively
● Google announced to use HTTPS
as a ranking signa...
Confidential & ProprietaryConfidential & Proprietary
Simplicity
Confidential & Proprietary
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
Confidential & Proprietary
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 conver...
How to close the mobile web conversion gap?
Web Today
Make checkout forms
less painful
Autofill
Next Generation
Eliminate ...
Autofill
Fill payment forms in one-tap
Cards/Addresses Synced
Zero merchant integration
Increase form submission rate
More...
PaymentRequest API
Open Javascript API
Browser handles payment collection
Cross Browser / Cross Platform
Any form of Payme...
Confidential & Proprietary
Physical Web
Confidential & Proprietary
The Physical Web: Nearby objects and places broadcast sites
Confidential & Proprietary
The Physical Web: Broaden the reach of your site
Physical Web is open for anyone to use
● Moder...
Confidential & Proprietary
Thank You!
Upcoming SlideShare
Loading in …5
×

From AMP to PWA

10,143 views

Published on

Let's focus on the Mobile Web and talk about the keys to a building a great mobile experience.
From AMP (=Accelerated Mobile Pages) as a starting point up to PWA (=Progressive Web Apps). I will cover the steps through some of the key features we see as core to the modern web experience. As a bonus, we will close with new APIs that expending the web even farther.

Published in: Internet
  • Thanks for sharing such informative slideshow. You have focused on shifting from AMP to PWA. But you should know that you can do reverse shifting from PWA to AMP. PWA to AMP, you can use PWA as an app shell to serve AMP content. In this way you can utilize PWA’s versatility and AMP’s optimized performance, and can deliver a lighting-fast and rich user experience. You can study about this integration in details at Techmagnate blog. http://www.techmagnate.com/blog/what-difference-between-amp-pwa/ You can get the clarification from here and also some related subtopics like benefits, pros and cons and the difference between AMP and PWA.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

From AMP to PWA

  1. 1. Confidential & ProprietaryConfidential & Proprietary PWA!?!
  2. 2. 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
  3. 3. Proprietary + Confidential Ido Green@greenido ido-green.appspot.com
  4. 4. Confidential & ProprietarySource: xkcd.com a webcomic of romance, sarcasm, math, and language
  5. 5. 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
  6. 6. Confidential & Proprietary 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
  7. 7. 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
  8. 8. 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 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
  9. 9. Confidential & Proprietary A holistic strategy for Mobile Start thinking Site and App - not Site or App; provide the best experience in both. Site App
  10. 10. Confidential & Proprietary Agenda ● Progressive Web Apps ● #movingtoHTTPS ● One tap Sign In ● One tap Check Out ● Physical Web ● Q&A
  11. 11. Confidential & Proprietary 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
  12. 12. Confidential & ProprietaryConfidential & Proprietary Speed and Engagement
  13. 13. Confidential & Proprietary Speed is the biggest factor driving engagement on mobile web
  14. 14. of people abandon a website that takes more than 3 seconds to load40%
  15. 15. 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
  16. 16. AMP is simple for users to start fast Web pages, today Accelerated Mobile Pages
  17. 17. 4x 10x faster less data <1 second median load time
  18. 18. 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%
  19. 19. Confidential + ProprietaryConfidential + Proprietary AMP: Start Fast Progressive Web Apps: Stay Engaged
  20. 20. Confidential & Proprietary 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
  21. 21. Confidential & Proprietary Flipkart example
  22. 22. 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
  23. 23. App
  24. 24. Confidential & Proprietary 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" }
  25. 25. 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)
  26. 26. Confidential & Proprietary Avoid the dreaded white screen Similar to apps, always show basic splash screen experience while your content loads
  27. 27. Confidential & Proprietary Load site quickly with app shell caching
  28. 28. Confidential & Proprietary Show content when on flaky networks
  29. 29. 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
  30. 30. 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
  31. 31. Confidential + ProprietaryConfidential + Proprietary AMP: Start Fast Progressive Web Apps: Stay Engaged
  32. 32. Confidential & Proprietary AMP to Progressive Web App
  33. 33. 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
  34. 34. 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
  35. 35. Confidential & Proprietary Jumia has seen success with push notifications Users that enabled push notifications made 9X more more conversions on previously abandoned carts
  36. 36. Confidential & Proprietary PWAs can work across browsers Using standard progressive enhancement techniques, PWAs can be made to work across all modern browsers
  37. 37. Confidential & Proprietary AliExpress is seeing increased engagement across browsers 74% increase in time spent overall and... 82% more conversions on iOS
  38. 38. 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.
  39. 39. Confidential & ProprietaryConfidential & Proprietary Security
  40. 40. Confidential + Proprietary HTTPS: Secure connection between site and users
  41. 41. Confidential & Proprietary 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?
  42. 42. 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
  43. 43. 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
  44. 44. Confidential + Proprietary Browsers to Start Changing UI to Indicate Insecure Content
  45. 45. 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/
  46. 46. 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
  47. 47. Confidential & ProprietaryConfidential & Proprietary Simplicity
  48. 48. Confidential & Proprietary One Tap Sign in with Credential Manager API
  49. 49. Typing on mobile is hard
  50. 50. Asking users to sign in today is hard of users give up if they are unable to sign in 92%
  51. 51. Chrome already helps users sign in more easily 8B Sign-ins are assisted by Chrome’s password manager a month
  52. 52. One-tap sign in
  53. 53. Auto sign in
  54. 54. Confidential & Proprietary One Tap Check Out with Web Payments API
  55. 55. 66% Of mobile purchases are on the web ...but conversion lags behind other platforms -66% Mobile web vs desktop web conversion rate
  56. 56. How to close the mobile web conversion gap? Web Today Make checkout forms less painful Autofill Next Generation Eliminate checkout forms entirely PaymentRequest API
  57. 57. Autofill Fill payment forms in one-tap Cards/Addresses Synced Zero merchant integration Increase form submission rate More: checkout-faster-with-autofill
  58. 58. PaymentRequest API Open Javascript API Browser handles payment collection Cross Browser / Cross Platform Any form of Payment Single Click Checkout UI
  59. 59. Confidential & Proprietary Physical Web
  60. 60. Confidential & Proprietary The Physical Web: Nearby objects and places broadcast sites
  61. 61. 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
  62. 62. Confidential & Proprietary Thank You!

×