Build progressive web apps with Angular
summary
An existing Angular app becomes installable and offline-capable by adding a Web App Manifest JSON, registering a service worker and configuring caching in ngsw-config.json, serving over HTTPS and building for production with the CLI --service-worker flag so the app shell is prefetched. Lighthouse moves a sample app from 55% to 100% progressive after adding a manifest and theme color, though performance still needs work. Real results cited: Pinterest sees ~40% more time spent and Flipkart reports ~70% higher conversion from home‑screen installs.
AI-written summary · about
chapters (39)
- 0:00Introduction
- 0:20About me
- 1:24Internet connectivity
- 2:25What is a progressive web app
- 2:44Theyre not web
- 3:22Progressive web apps
- 5:57Baseline
- 7:36Service Worker
- 9:11Register Service Worker
- 9:40Service Worker Scope
- 9:52Current Folder
- 10:39Service Worker Context
- 12:07Cache
- 13:29Service Workers
- 14:23Web Manifest
- 15:28Web Manifest JSON
- 15:59Web Manifest Standalone
- 16:50Service Worker Angular CLI
- 17:32Import Service Worker
- 20:19Build for Production
- 20:38Generate NGSW Worker
- 20:49Use Lighthouse
- 21:26Accessibility
- 21:51Failed Audit
- 22:01No fallback content
- 22:30HTTPS only
- 23:10Manifest file
- 23:53Meta tag
- 24:09Theme color
- 24:26Service Worker support
- 25:09Continuous testing
- 25:40PWA Builder
- 25:50Workbox
- 26:17Pinterest
- 26:27Service Worker Mark
- 26:44Hacker NewsPWA
- 27:15Success stories
- 28:00Flipcard example
- 28:31Summary
related talks
24mBuild progressive web apps with Angular
33mProgressive Web Apps - the Angular way
17mProgressive Angular 2 apps
25mCreating an Angular Progressive Web App: which option will work better for you?
01h 04mProgressive Web Apps: Cross-Plattform Applications with Angular
35mProgressive Web Apps with Angular 2
43mAutomatic Progressive Web Apps using the Angular Mobile Toolkit
53mWeb goes Native: Progressive Web Apps with Angular