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

Transcript

1. PWA
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
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
18. https://www.bloomberg.com/news/articles/2019-11-30/online-sales-break-black-friday-record-as-clicks-beat-queues
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
34. Service Worker
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
45. Cache API
46. caches.
47. caches.open(‘name’)
48. caches.put(...)
49. caches.match(...)
50. caches.delete(...)
56. Sync API
59. Indexed DB
65. Freshness performance
66. ng new pwaDemo
67. cd pwaDemo
68. ng add @angular/pwa
69. ng build --prod
70. DEmo
71. Workbox
73. Alternative
74. Fabian Gosebrink http://offering.solutions http://github.com/FabianGosebrink http://fabian-gosebrink.com @FabianGosebrink
75. Thank you!