Use the new @angular/service-worker module and the Angular cli to register a service worker and to create an automatic app shell caching mechanism.
- [Instructor] So now it's time to go back to our project and add a service worker. Well, we can create a service worker manually and register that manually with trial script. We're using Angular CLI. And fortunately for us, we have support for service workers known as NGSW, Angular service worker. So, to add service workers support, we need to open the angular-cli.json file in the root folder, and inside apps, like here, inside the array, we have a lot of blaggings here and properties.
We need to add one property. That property is going to be serviceWorker, uppercase W, and we're going to say true. My default is full, at least, in the current version of Angular. That might change in the future. So, that means that now, when we are building our project for production, then it's going to create the service worker. In development mode, the service worker is off.
Why? Because we don't want to mess with the service worker any cache when we are testing and debugging, because we don't know what's happening there, if it's the old version, if it's a cache version, so that's why by default, if you are serving using development mode, you're not going to see the service worker. So, let's open the terminal now. I'm going to start my server now. And let's make a build for production.
I'm going to say ng build -- prod, production. So, at this point you say, okay, we have an error. So, what's wrong here? At the time of shooting this video, angular/service-worker, and that's the model you are going to use, it's embedded, and that means we need to install it as a separate package. But, at one point in the future, it was already announced that it would be part of the core of the Angular framework.
So, we won't need this step in the future, but now we need it. So we need to run mpm install -- save-dev @angular/service-worker. So I can just copy that line, and I can clear this, and I can execute that line based in my app folder. Okay, now it was already installed. So, now we can run again, ng build -- prod.
So, now it's done, and the other thing that you can see here, is that the reason you find it was in there, sw-register. That's basically the trial script that's going to register the service worker. So, now if you go back to basic studio code, and we look into the dist folder, we're going to see some new files here. So, we have our manifest.json file, but also we have an ngsw-manifest.json file.
We don't need to think it's the same json file, okay, this is Angular Service Worker file, and if you look inside, it looks like this. You can see it's the web of manifest.json file. So, this is the least of all the resources that are needed from an Angular point of view to run there what is known as the app shell. That means that NGSW will cache all these resources for us.
The icons, the HTML, the CSS style, and all the trial script files that are needed for our present web app. What is this second argument that we have here? That's a hash that is being generated automatically by the Angular CLI tools. They reveal that if, for example, we change the png with a different file, a different icon, the hash will change. So, if the file is not changing, the hash is not changing.
So, that means that this is useful for updating those resources later in the future. The Angular CLI, the Angular framework, will do that for us, so we don't need to worry about this. But that's a new file. It wasn't there before. Also, we have the sw-register file. This is the one that is going to register the service worker, and we also have the worker-basic.min.js, and that's the service worker. Okay, it's a long meaning file, service worker.
So this is the thread. This trial script wasn't there before. And if you look at our index.html, let's format this, we're going to see here that we have the sw-register.js, and that's the trial script file that is registering the service worker. That also wasn't there before. So, how can we test this in the browser, because this is a dist folder, it's not being served.
If I go back to our terminal, we can serve, but we must serve production version. Because if not, we're not going to see the service worker. We will see a warning here, because this is just a server for development purposes, but that's okay, because we know well we are requesting production. Okay, compiled successfully. So, we are ready to try this.
First, you can see that, do you want to install this app? Now what is this, it wasn't there before. Well, that is the web banner mechanism that we have created before in a previous video, but because we didn't have a service worker, we were not seeing our banner, so that means, okay, the service worker seems to be up and running. Let's increase a little bit the size and open developer tools. Let's analyze what's happening here. So, I will dock this to the right there.
So, if we go to the application tab. We can also rearrange that tab, it's a good idea. Now, we can try the actual home screen, so every time I'm clicking there, it's forcing our message up here, so the user can install this, and now when I'm clicking in fact, you can see it's asking me if I want to install this in my shelf. On Android, it's going to be in the home screen, so if I add this in the shelf, you can see that it's going to add this in this case to my Mac applications folder.
It's going to all my PWA. Remember, this is just experimental for Mac, Windows, and Linux. It's a flag you need to enable. But that means that our flow of seeing that banner, it's working. Also, because we are here inside the application, we have a panel for service worker. So, here we can check that the service worker is activated and running. So, that means our localhost 4200 URL, that's the scope, has now with service worker.
When we are developing, even if we are in production from an Angular point of view, we are developing, so it's a good idea to select the option update and reload. So, that means that every time we reload the page, it will also update the service worker, so it will force an update of everything, as if we were in developer mode, okay? So, it's a good idea to enable that option. So, from here, we can stop the service worker, we can start it. And what's the deal here? So, yeah, we have a service worker, and besides that now we have the web banner, what's the advantage? Well, now, our app shell, the app shell is basically the HTML, the CSS, the icons, and all the trial script files needed to run their, our PWA, are cached.
Can we check that? Yes. In the same application section, we have cache storage. In that cache storage, let's get out of the console for now, I can open this, and you can see, that we have a couple of storages here. And here in that one, we have all the files, the index.html, the manifest.json, the service worker registration, and many other files, that are currently cached.
They are in my computer, which means that now we are offline capable. So the next step is to see the offline operation in action.
Instructor Maximiliano Firtman takes you through the steps of upgrading an enterprise-style application to a PWA. First, he discusses the preparation steps involved. Then, he explains how to lay out and create the user interface. Next, he demonstrates how to get your application to connect to web services. Maximiliano also show how to make sure your PWA is installable, followed by how to leverage service workers for going offline.
- Progressive web app architecture
- Creating business logic classes
- Geolocation and data services
- Adding routes to a project
- Creating a RESTful API
- Connecting Angular with HTTP module
- Connecting the form with the service
- The web app manifest
- Using service workers
- Pre-caching an app's shell with ngsw
- Serving an app while offline
- Updating an interface on network status change