Progressive Web Apps in 15 Minutes

Progressive Web Apps in 15 Minutes

Short intro the history of the web and why PWA's are the logical next step


Johann du Toit

February 27, 2019


  1. None
  2. email website @signedness

  3. Developer Expert (first in Africa)

  4. Mentor since 2016

  5. None
  6. 22:30 - October 29, 1969

  7. “login” first thing sent over “public” internet

  8. l Charley Kline proceeded to type “l”

  9. lo Charley Kline proceed to type “o”

  10. log Charley Kline proceed to type “g”

  11. crashed... classic.

  12. “..yet a revolution had begun.”

  13. None
  14. None
  15. None


  18. None
  19. None
  20. “The web has become the platform with the widest reach

    on all form factors and the least amount of friction for all users“ - Google
  21. Top 1000 Mobile Apps VS Top 1000 Mobile Properties

  22. Apps Mobile Web Monthly Unique Visitors Reach 4 million 11.4

  23. Average minutes per user Engagement 188.4 minutes 9.6 minutes Apps

    Mobile Web
  24. SO WHAT IS A PWA???

  25. A PWA uses modern web capabilities to deliver an app-like

    user experience.
  26. None
  27. None
  28. Trust. I ‘d trust a website running in Chrome/Firefox/Safari over

    a native app any day
  29. None
  30. The Web Browser is a totally different beast today

  31. None
  32. None
  33. None
  34. These API enable various scenarios these days: Web apps that

    work offline? Yeap Store Data Locally? Yeap Access bluetooth from a web app? Yeap Access to Sensors? Yeap High Performance Graphics? Yeap
  35. PWA are the logical next step for web apps

  36. None
  37. Progressive Web Apps are user experiences that have the reach

    of the web, and are:
  38. Reliable

  39. Fast

  40. Engaging

  41. Install Web Apps like Native Apps

  42. None
  43. None
  44. Active Users with 1 Step

  45. Push Notifications

  46. Progressive Responsive Connectivity independent App-like Fresh Safe Discoverable Re-engageable Installable

    Linkable Criteria
  47. Progressive Works for every user, regardless of browser choice because

    it's built with progressive enhancement as a core tenet.
  48. Responsive Fits any form factor: desktop, mobile, tablet, or whatever

    is next.
  49. Connectivity Independent Enhanced with service workers to work offline or

    on low-quality networks.
  50. App-like Feels like an app, because the app shell model

    separates the application functionality from application content .
  51. Fresh Upfront view for users on the state of the

    data they are looking at; taking into the offline ability
  52. Safe Served via HTTPS to prevent snooping and to ensure

    content hasn't been tampered with.
  53. Discoverable Is identifiable as an "application" thanks to W3C manifest

    and service worker registration scope, allowing search engines to find it.
  54. Re-engageable Makes re-engagement easy through features like push notifications.

  55. Installable Allows users to add apps they find most useful

    to their home screen without the hassle of an app store.
  56. Linkable Easily share the application via URL, does not require

    complex installation.

  58. None


  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. Installs your native code linked to the site from the

  76. So should you use a PWA for your next project?

  77. Everything starts as a PWA

  78. You go native when you have specific requirements that the

    browser would limit you from
  79. None
  80. 11.5mb

  81. 11.5mb 34mb


  83. None
  84. None
  85. None
  86. The Bad Things tm

  87. None
  88. 1 big one, in one word - Apple


  90. None
  91. None
  92. None
  93. None
  94. Making your choice TLDR; Does your app need to appear

    in the Apple App Store? Don’t go web Does your app need to do some very specific background action using hardware on the phone like configuring WIFI? Don’t go web Do you need the lowest latency a phone can possibly give you for high performance needs like live video or processing? Don’t go web
  95. FIN