Automatic Progressive Web Apps using Angular Service Worker

on YouTube ↗22m

" summary

Automatic setup uses Angular CLI flags to add an Angular Service Worker and drops ngsw-worker.js and ngsw.json into the dist on production builds, or can be retrofitted to CLI 1.5 by generating the manifest, copying files and adding npm scripts. Configuration file declares asset groups and data groups with installMode/updateMode and caching policies (e.g. network-first or cache-first). Push uses SwPush subscription and a backend payload with a notification property, and updates surface through the available observable so the app can prompt to reload.

AI-written summary · about

" chapters (15)

1. 0:00Start
2. 1:48Progressive Web App
3. 2:0810 characteristics
4. 2:34Service Worker API
5. 4:36Frameworks
6. 5:33Generate a new Angular PWA
7. 7:51Registering NGSW
8. 8:38NCSW configuration file
9. 10:52App shell / on-demand
10. 13:45Manual build support for Angular CLI 1.5
11. 17:36App version updates
12. 18:51Check for updates
13. 19:52Main available features
14. 20:09Angular Service Worker advantages
15. 20:58On the roadmap

" related talks

• 43mAutomatic Progressive Web Apps using the Angular Mobile ToolkitMaxim Salnikov · JSHeroes 2017
• 25mCreating an Angular Progressive Web App: which option will work better for you?Maxim Salnikov · NG-BE 2017
• 30mAutomatic Progressive Web Apps using the Angular Mobile ToolkitMaxim Salnikov · ng-conf 2017
• 24mBuild progressive web apps with AngularSimona Cotin · Frontend Developer Love 2018
• 35mProgressive Web Apps with Angular 2Manfred Steyer · Angular Camp 2016
• 54mBuilding an Angular PWA: Angular Service Worker or Workbox?Maxim Salnikov · iJS 2018 Spring
• 39mPWA & Front-end FrameworksMajid Hajian · Mobile Era 2017
• 29mBuild progressive web apps with AngularSimona Cotin · ngVikings 2018