Taking your Angular app to the next level with Progressive Web Apps

Taking your Angular app to the next level with Progressive Web Apps

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

February 04, 2020
Tweet

Transcript

  1. PWA

  2. None
  3. “The full Safari engine is inside of iPhone. And so,

    you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone.”
  4. “And guess what? There’s no SDK that you need! You’ve

    got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. So developers, we think we’ve got a very sweet story for you. You can begin building your iPhone apps today.”
  5. Web App

  6. App Like

  7. Reliable

  8. None
  9. Downasour

  10. Fast

  11. Engaging

  12. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  13. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  14. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  15. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  16. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  17. None
  18. https://www.bloomberg.com/news/articles/2019-11-30/online-sales-break-black-friday-record-as-clicks-beat-queues

  19. None
  20. “Mobile remains the preferred shopping channel this year for online

    commerce, with 69% of sales made on phones or tablets, while just 31% occurred on desktop.” https://news.shopify.com/shopify-merchants-break-records-with-29-billion-in-worldwide-sales-over-black- fridaycyber-monday-weekend
  21. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  22. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  23. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  24. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  25. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  26. ProgressiveResponsiveCon nectivityIndependentAppF reshSafeDiscoverableRee ngageableinstallablelink able

  27. Offline First

  28. Challenge

  29. Challenge Lie-Fi

  30. Challenge Lie-Fi App works offline

  31. None
  32. None
  33. None
  34. Service Worker

  35. None
  36. None
  37. “[…] a service worker is a script that runs in

    the web browser and manages caching for an application.”
  38. HTTPS

  39. HTTPS !!!

  40. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! HTTPS

  41. None
  42. None
  43. None
  44. None
  45. Cache API

  46. caches.

  47. caches.open(‘name’)

  48. caches.put(...)

  49. caches.match(...)

  50. caches.delete(...)

  51. None
  52. None
  53. None
  54. None
  55. None
  56. Sync API

  57. None
  58. None
  59. Indexed DB

  60. None
  61. None
  62. None
  63. None
  64. None
  65. Freshness performance

  66. ng new pwaDemo

  67. cd pwaDemo

  68. ng add @angular/pwa

  69. ng build --prod

  70. DEmo

  71. Workbox

  72. None
  73. Alternative

  74. Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com @FabianGosebrink

  75. Thank you!

  76. None