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.

SearchLeeds 2019 - Nichola stott - The state of PWAs

523 views

Published on

Progressive web apps have been around for some years now, but adoption rate appears to be slow. In this talk Nichola will review the baseline and enhanced PWA criteria to explore why this might be. In addition we’ll also cover what’s new, benefits experienced by early adopters, tracking tips, how to get into the Play Store; as well as some of the current downsides and security considerations.

Published in: Marketing
  • Be the first to comment

SearchLeeds 2019 - Nichola stott - The state of PWAs

  1. 1. The State of Progressive Web Apps 01
  2. 2. Since 2015, PWA capabilities for cross browser & platform applications that provide fast, & engaging web app experiences, regardless of network state @NicholaStott
  3. 3. App-like Experience Without the excess of local device storage Add to home screen Push notifications Offline content Modern APIs
  4. 4. Source: OneNorth
  5. 5. @NicholaStott November 2017 Source:AddyOsmani – A Pinterest ProgressiveWeb App Performance Case Study
  6. 6. 0 10 20 30 40 50 60 Android iOS PWA 9.6MB 56MB 150KB home feed load! Source:AddyOsmani – A Pinterest ProgressiveWeb App Performance Case Study
  7. 7. PWAsOverTime Source: HTTPArchive
  8. 8. Sizeoftheweb 5.6 BN Pages/ Indexed Web Source: WordWideWebSize
  9. 9. Why (s)low adoption? 02
  10. 10. 01 02 03 Timing: brands invested in native app strategy because existing site poor mobile UX Confusion: SPAs vs AMP vs either/or native app mentality Baseline requirements: can’t/wont’ be met to retro-fit
  11. 11. Benefits 03
  12. 12. Cached Assets Reduce Server Load & Less Data Requirements Chris Love– PWA benefits
  13. 13. BBC lost 10% of users for every additional second their site took to load.
  14. 14. PWAs must have a sub 10 second TTFI (on simulated 3G/first visit) Source: PWA
  15. 15. No apps for app sake
  16. 16. 01 0201 02 03 04 No Store, No commission No dev, deploy & maintain cost Discoverable via web optimisation Instant app update deployments
  17. 17. A majority of users (51%) still don’t download any apps in a month. 60% of apps in the Google Play app store have never been downloaded. Comscore:The 2017 U.S. Mobile App Report AdWords for App Promotion
  18. 18. Instead of outsourcing your success to Apple, Google or Microsoft a PWA puts you in charge of your ability to reach your audience, reengage them and improve your business processes. Chris Love: How Progressive Web Apps BenefitYour Ability to ImproveYour Business
  19. 19. Instantly Loads: Loads all cached content instantly Offline Loading: Site is accessible in areas with low or no connectivity Add to home screen: Access like a nativeAPP “App-like” Desktop Support: Desktop PWAs are now supported on all desktop platforms (Chrome 73)
  20. 20. Service worker: technically a MITM. Can be compromised if not HTTPS.
  21. 21. Source Mobify: 2017 Q1 Mobile Commerce Insights Report Push notifications
  22. 22. SHITTY LINKS THIN CONTENT SPAMMY SCHEMA We Can’t Have Nice Thing s
  23. 23. H/2 reduce latency minimise protocol overhead request prioritisation HTML5 SECURE/MOBILE DEVICE local storage motion/ native-likereact
  24. 24. LighterFrameworks Lower parse and compile times. See HNPWA for list of live examples frameworks/librarie s. Addy Osmani : Google I/O 17 Angular5 React VueJS
  25. 25. Payment request API
  26. 26. Submit to APP Store
  27. 27. All about the user experience “web apps are optimised to help users accomplish tasks quickly” Source KarlyCyr: Everything you need to know about PWA’s for ecommerce
  28. 28. Making it Happen 04
  29. 29. Baseline Requirements.
  30. 30. 01 02 03 HTTPS: is the site served over HTTPS? HTTP2: Multiplexing Service Worker: does the site register a ServiceWorker?
  31. 31. 04 05 06 Speed: <10,000TTFI/CI Add to Home Screen: user prompt ‘‘Add to Home Screen’’? Responsive design
  32. 32. Not all organisations can hit these baseline requirements, particularly non-HTTP/2 – therefore sub-10 secondTTFI is out of reach.
  33. 33. Tools 05
  34. 34. Lighthouse Chrome Dev Tools & Extension
  35. 35. Clear cache to ensure clean data
  36. 36. Run in incognito mode to get clean data
  37. 37. Lighthouse audit report
  38. 38. Lighthouse Performance focused
  39. 39. Lighthouse JS Diagnostics
  40. 40. Lighthouse PWAValidation Report
  41. 41. App manifest for name & icons Lighthouse
  42. 42. Check service worker Force disconnect Lighthouse
  43. 43. Android Homescreen Lighthouse
  44. 44. Source:Github User: Andreban // Setup a listener to track Add to Homescreen events. window.addEventListener('beforeinstallprompt', e => { e.userChoice.then(choiceResult => { ga('send', 'event', 'A2H', choiceResult.outcome); }); }); Track Install Prompt and Outcome
  45. 45. Source:Andre Bandarra on Medium
  46. 46. Entire PWA Course on Google Codelabs Source:Codelabs. Google Developers Network
  47. 47. SEO for PWA
  48. 48. 01 02 03 04 Each page has its own URL Use of canonical tags Use of schema.org and social meta data Content is shareable Just Good Housekeeping
  49. 49. 01 02 03 04 Seamless page transmission: History API Content doesn’t jump when page loads Smooth scroll App install prompts are not excessive UX Requirements
  50. 50. EruditeWordPressPWA Implementing specific fixes - https://github.com/o10n-x/
  51. 51. Progressive web AMP’s (PWAMPS) Making an even better first impression AMP: Start Fast PWA: Stay Fast Quote byAlex Russell
  52. 52. CodeLabs PWAMP Tutorial Source: https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/index.html?index=..%2F..io2019#0
  53. 53. We need to talk about JavaScript. /Client side rendering
  54. 54. One common approach to creating PWAs is to use client-side-rendering (essentially a bare- bones HTML page with JavaScript that creates all of the content & functionality); these kinds of sites can be rendered and indexed by Google, but it's usuallySource: John Mueller, Google
  55. 55. Tom Greenaway Google/IO 18 Source: Jennifer Slegg,TheSEMPOST
  56. 56. Tom Greenaway Google/IO 18 So if the page has JavaScript in it, the rendering is actually deferred until we have the resources ready to render the client-side content and then we index the content further. So Googlebot might index a page before the rendering is complete and the final render can actually arrive several days later. And when that final render does arrive, then we perform another wave of indexing on that client-side rendered content. Source: Jennifer Slegg,TheSEMPOST
  57. 57. 01 02 03 Don’t over-use client side rendering for JavaScript Audit your PWA JS on and JS off Possible to pass PWA Lighthouse Audit but…
  58. 58. Fail Completely When JS Disabled Credit:Aleyda Solis PWA SEO
  59. 59. Live Examples
  60. 60. 3.8x Faster Load time 31% Increase in CR part of ASDA Walmart Source:Google developers - case study
  61. 61. 150% increase in add to home screen 67% Increase in offline usage Source: PWA Stat
  62. 62. 50K core app when gzipped 3sec Load on 2G network Source: PWA Stat
  63. 63. Cut load times from 11.91 secs to 4.96 90% Smaller than its Android App Source: PWA Stat
  64. 64. Progressive Web Apps The Future of the Mobile Web Source: Google, Microsoft &* Awwwards Books
  65. 65. 01 02 03 Not many small(er) site examples. Particularly full ecommerce. Harder to retro-fit. Need to wait for budget and appetite for consolidation. Watch out for client/server rendering potential issues – highly dynamic sites
  66. 66. ERUDITE THANKS FOR LISTENING! Nichola.stott@erudite.agency N I C H O L A S T O T T +44 (0) 1256 384890 https://erudite.agency @Nichola.stott

×