Apply Precaching with the Angular Service Worker
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.
Instructor: [0:00] This is a very simple application, but still we already try to optimize it quite a lot. Meaning, for instance, if we refresh here, we see that we do some preloading techniques. We download the Nyan model only when it is actually needed.
[0:12] Also we use Ajax quicklink, for instance, that preloads assets once we navigate to them such that they're already there when user clicks on the corresponding link. We have applied quite some optimizations already.
[0:26] However, if we are in very bad network conditions or even if the user is offline, we still have performance issues of course. One way to optimize that is to actually add some service worker and some precaching mechanism to serve the assets the JavaScript files and even images from the local storage router and over the network.
[0:45] Let's see how we can do that in Angular. Angular has a very nice package, which is called NGPWA. We can use the ng add command @angular/pwa to install it from NPM to automatically configure our local application with the Angular service worker.
[1:05] Once it's installed, let's inspect here our app module. The app module we see here we get that service worker module registered in our import section, it registered here that JavaScript file, and it enables that service work only for production.
[1:20] Before diving into that, let's quickly create a production build to actually see that service work connection. Now let's fire up an HTTP server on a port on the dist folder. If you go to localhost:1234 and refresh, we see here our service worker being installed. We even see the install command here popping up in Chrome.
[1:51] If we go here to application, we can also inspect here that our service worker has been registered and being received. If you go to the network panel and refresh, we see that the service worker is actually serving our files.
[2:06] The boot up time has really increased even if you go offline and we refresh, our application is still served and still works.
[2:17] There's only one issue however. If you go to the Nyan, we see that image here doesn't get actually precached. We can even optimize that. Let's see how. With that installation of the service worker, we got actually a configuration file in our project.
[2:32] We scroll down here. We see that ngsv-config. If we open that, we see the configuration which Angular by default generates to precache our application.
[2:43] Now, if you take a look at that prefetch section up here, you can see that the favicon gets precached in XHTML, the CSS files, the JS files. However, in our assets folder up here of our application, we don't precache that image.
[2:55] What we want to do here is add another entry, which will also precache that PNG file in our assets folder.
[3:03] Now, again, let's create here a production build. Again, let's fire up here our static server. Let's go online and refresh.
[3:16] Let's go to our home part here, refresh again. Now, let's go offline, refresh. Now, if we even click here on that button, also our image gets properly precached by our service worker.