This article is part of my “Angular Performance Week” series, where I publish a new video each day based on the performance articles on web.dev/angular. Today we’re diving into the service worker API, in specific by leveraging Angular’s integrated service worker package.

Note: this article and attached Egghead video lesson are based on the articles on web.dev/angular by Minko Gechev and Stephen Fluin. Full credit goes to them :thumbsup:

Angular Performance Series

1. Route Level Code Splitting
2. Preload Lazy Routes in Angular
3. Performance budgets with the Angular CLI
4. Optimize Angular’s Change Detection
5. Virtual Scrolling for large lists with the CDK
6. Precaching with the Angular Service Worker

Don’t miss the other videos by subscribing to my newsletter.

Caching with Angular’s Service Worker Package

To further speed up our app and to provide a more pleasant experience in flaky network conditions, we may want to use a service worker that allows us to apply precaching mechanisms. Luckily the Angular team already offers a service worker module that is well integrated with the framework. Let’s have a look at how to apply that to our application.

Youtube

Original web.dev article

Wanna read the original web.dev article? Check it out here!.