Automatic Progressive Web Apps using the Angular Mobile Toolkit

on YouTube ↗43m

" summary

A single CLI command flips an Angular app into an installable, offline-capable PWA using @angular/service-worker and Angular CLI; the build emits a service-worker bundle plus an ngsw manifest that lists hashed files and plugins. Plugins provide static content caching, route resurrection, external-resource caching and flexible dynamic content strategies (freshness vs performance). A companion library exposes update events and registers push notifications; demos show the app working offline and receiving pushes, but service worker only runs in production builds.

AI-written summary · about

" chapters (22)

1. 0:00Start
2. 3:37Milestones of the web
3. 5:3710 characteristics
4. 7:402 packages
5. 8:584 main parts
6. 10:39NGSW installation
7. 11:18App build
8. 14:28Static content caching
9. 15:00Route redirection
10. 16:34Extending NGSW manifest
11. 17:24External content caching
12. 19:04Dynamic content caching
13. 25:37ngu-app-shell
14. 27:19Companion
15. 28:05Gentle app update flow
16. 29:52Push notifications
17. 32:42Push settings
18. 33:05Push subscription
19. 34:58Basic Service Worker
20. 35:40Extending functionality
21. 36:06Automatic PWA
22. 36:45Roadmap

" related talks

• 30mAutomatic Progressive Web Apps using the Angular Mobile ToolkitMaxim Salnikov · ng-conf 2017
• 22mAutomatic Progressive Web Apps using Angular Service WorkerMaxim Salnikov · AngularConnect 2017
• 37mAngular PWA: crafting apps that adapt anywhereSoumaya Erradi · angularday 2024
• 24mBuild progressive web apps with AngularSimona Cotin · Frontend Developer Love 2018
• 41mOffline Web Apps don't exist anymore!Francesco Leardini · Conf42 JavaScript 2020
• 41mPerformant and Accessible Angular Apps as PWAsPatricio Vargas · Connect.Tech 2021
• 35mProgressive Web Apps with Angular 2Manfred Steyer · Angular Camp 2016
• 25mCreating an Angular Progressive Web App: which option will work better for you?Maxim Salnikov · NG-BE 2017