Web goes Native: Progressive Web Apps with Angular

on YouTube ↗53m

" summary

A small Songbook PWA built with Angular CLI and Angular Material uses service worker caching plus an app shell and manifest, deployed to Firebase (hosting, auth, cloud functions). Build optimizer and a manual app shell cut perceived load time; Lighthouse moves from poor to 92% and finally shows 100 for progressive features and best practices. Offline works for cached songs (cache capped at 40 entries); real‑time Firebase RTDB bypasses service workers so REST or Cloud Firestore is used for offline sync.

AI-written summary · about

" chapters (11)

1. 0:00Introduction and welcome
2. 3:59What are Progressive Web Apps
3. 16:15Demo app and tools overview
4. 20:16Initial Lighthouse audit
5. 28:03Flex layout for responsive design
6. 29:28Build optimizer for performance
7. 33:55Adding an app shell
8. 37:44App manifest for installability
9. 40:43Service worker for offline support
10. 48:31Final Lighthouse results
11. 50:19Firebase and real-time data caching

" related talks

• 01h 04mProgressive Web Apps: Cross-Plattform Applications with AngularShmuela Jacobs · iJS 2018
• 01h 04mProgressive Web Apps: Cross-Plattform Applications with AngularShmuela Jacobs · iJS 2018 Spring
• 23mProgressive Web Apps with Angular and FirebaseErik Haddad · ng-europe 2018
• 35mProgressive Web Apps with Angular 2Manfred Steyer · Angular Camp 2016
• 26mProgressive Web Apps with Angular and FirebaseErik Haddad · ngVikings 2018
• 33mProgressive Web Apps - the Angular waySimona Cotin · Uphill Conf 2018
• 31mProgressive Web Apps with Angular and FirebaseErik Haddad · JSPoland Conf 2017
• 29mAwesome Progressive Web Apps with AngularMike Hartington · ngAtlanta 2019