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.

PWAs, are we there yet?!

602 views

Published on

Progressive web applications are the new hip and all the cool kids are on board. They are slowly becoming an industry standard for building web applications. With reliability, speed and immersive user experience in mind, PWAs help you reach a broader audience. But what are the gotchas? Let's explore some of the limitations we might encounter compared to native applications. Which traditionally native features are now available for PWAs to use and which are in development? All browsers are on the same page, supporting features like Service Workers is key but which are differences in API implementation and what bugs should we be aware of? After this session you'll walk away with a clear idea on which is the current state of PWAs, its limitations as well as its strengths.

Published in: Technology
  • Be the first to comment

PWAs, are we there yet?!

  1. 1. @simona_cotin
  2. 2. @simona_cotin
  3. 3. @simona_cotin
  4. 4. @simona_cotin
  5. 5. @simona_cotin Simona Cotin Dev Advocate @ Microsoft @simona_cotin
  6. 6. @simona_cotin Intro to PWA Dive into main concepts Angular <3 Pwa PWA vs Native Gotchas Tools
  7. 7. @simona_cotin What?
  8. 8. @simona_cotin –Wikipedia “Progressive web apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.”
  9. 9. @simona_cotin –Alex Russell “..they’re just websites that took all the right vitamins”
  10. 10. @simona_cotin
  11. 11. @simona_cotin
  12. 12. @simona_cotin Connectivity Independent
  13. 13. @simona_cotin
  14. 14. @simona_cotin
  15. 15. @simona_cotin
  16. 16. @simona_cotin Discoverable
  17. 17. @simona_cotin Re-engageable
  18. 18. @simona_cotin
  19. 19. @simona_cotin
  20. 20. @simona_cotin How?
  21. 21. @simona_cotin Baseline “Appyness”
  22. 22. @simona_cotin Baseline “Appyness” •Service workers •Web manifest •Delivered over HTTPS
  23. 23. @simona_cotin –Netlify “Service workers are proxies that sit between the web page and the network, providing cached versions of the site when no network connectivity is available.” Service Workers 🏋🏋♀️
  24. 24. @simona_cotin –Dean Alan Hume, https://www.amazon.com/Progressive-Apps-Dean-Alan- Hume/dp/1617294586 “Think of your web requests as planes taking off. Service Worker is the air traffic controller that routes the requests. It can load from the network or even off the cache” Service Workers 🏋🏋♀️
  25. 25. @simona_cotin https://jakearchibald.github.io/isserviceworkerready/
  26. 26. @simona_cotin Web Page Service worker Cache Backend
  27. 27. @simona_cotin Web Page Service worker Cache Backend 🏋🏋🏋♀️ 🏋
  28. 28. @simona_cotin Web Page Service worker Cache Backend 🏋🏋🏋♀️ 🏋
  29. 29. @simona_cotin Scope Lifecycle
  30. 30. @simona_cotin Scope Default ./ xyz.sw/work/sw.js xyz.sw/work
  31. 31. @simona_cotin Lifecycle Installing Activated Error Idle Terminated Fetch No SW
  32. 32. @simona_cotin Register 🏋🏋♀️
  33. 33. @simona_cotin service-worker.js
  34. 34. @simona_cotin Testing
  35. 35. @simona_cotin Debugging
  36. 36. @simona_cotin Uninstalling
  37. 37. @simona_cotin ✓Connectivity independent ✓Fresh ✓Discoverable
  38. 38. @simona_cotin
  39. 39. @simona_cotin –Mozilla “The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience. ”
  40. 40. @simona_cotin
  41. 41. @simona_cotin ✓Connectivity independent ✓Fresh ✓Discoverable ✓Installable
  42. 42. @simona_cotin Service workers need to be served over HTTPS
  43. 43. @simona_cotin ✓Connectivity independent ✓Fresh ✓Discoverable ✓Installable ✓Safe
  44. 44. @simona_cotin
  45. 45. @simona_cotin Create service workers using the angular cli
  46. 46. @simona_cotin
  47. 47. @simona_cotin
  48. 48. @simona_cotin
  49. 49. @simona_cotin
  50. 50. @simona_cotin
  51. 51. @simona_cotin
  52. 52. @simona_cotin
  53. 53. @simona_cotin
  54. 54. @simona_cotin
  55. 55. @simona_cotin
  56. 56. @simona_cotin
  57. 57. @simona_cotin
  58. 58. @simona_cotin 🏋
  59. 59. @simona_cotin
  60. 60. @simona_cotin PWA vs Native
  61. 61. @simona_cotin State of the Web
  62. 62. @simona_cotin State of the Web
  63. 63. @simona_cotin Hardware ✓Geolocation ✓Camera and microphone ✓Bluetooth
  64. 64. @simona_cotin Hardware ✓NFC ✓Ambient light sensor ✓Proximity
  65. 65. @simona_cotin Software ✓Push notification ✓Save to home screen ✓Fullscreen ✓Offline ✓Clipboard 👎 👎 👎
  66. 66. @simona_cotin Not supported ✋ ๏Contacts, calendar ๏Alarms ๏Calls, sms
  67. 67. @simona_cotin App Stores
  68. 68. @simona_cotin App Stores
  69. 69. @simona_cotin Push Notifications
  70. 70. @simona_cotin Gotchas 🏋🏋♀️
  71. 71. @simona_cotin Gotchas 🏋🏋♀️ App install Banner
  72. 72. @simona_cotin Gotchas 🏋🏋♀️ 😭
  73. 73. @simona_cotin Gotchas 🏋🏋♀️ Homescreen Icon
  74. 74. @simona_cotin Gotchas 🏋🏋♀️ 😭😭😭
  75. 75. @simona_cotin Gotchas 🏋🏋♀️
  76. 76. @simona_cotin Gotchas 🏋🏋♀️
  77. 77. @simona_cotin Gotchas 🏋🏋♀️ Storage
  78. 78. @simona_cotin Gotchas 🏋🏋♀️ Safari will delete cache after a couple of weeks
  79. 79. @simona_cotin Gotchas 🏋🏋♀️ Packaging
  80. 80. @simona_cotin Gotchas 🏋🏋♀️
  81. 81. @simona_cotin Gotchas 🏋🏋♀️ State Safari doesn’t keep state when app goes in background
  82. 82. @simona_cotin Tools
  83. 83. @simona_cotin
  84. 84. @simona_cotin
  85. 85. @simona_cotin
  86. 86. @simona_cotin
  87. 87. @simona_cotin
  88. 88. @simona_cotin
  89. 89. @simona_cotin –https://developers.google.com/web/progressive-web-apps/ “A new way to deliver amazing user experiences on the web”
  90. 90. @simona_cotin Thank you
  91. 91. @simona_cotin Github Azure App Service https://github.com/simonaco/ad vanced-pwa https://aka.ms/azure-paas

×