Preparing the Room applications to work offline

[00:00 - 00:08] In this lesson we're going to implement an offline mode of our room front-end application. First of all, you have to ask yourself, do you really need offline mode?

[00:09 - 00:17] And in case of our room front-end application, the answer is yes. The app will be displayed on screens next to conference room doors, all the time.

[00:18 - 00:44] So it's very hard to provide 100% of network stability in such case. So having an online mode that will at least display the last known state from the back-end is a really good thing to have. And fortunate for us, PWA progressive web apps in Angular are quite simple to implement. So let's start. First of all, we need to add necessary dependencies.

[00:45 - 01:17] So I'm adding two new packages. Add angular/pwa and add angular/service worker. It will take some time. All right, so the next step is to add a special configuration for our service worker. In Angular, we call it ngswconfigjson. So you need to create a new file in a room front-end SRC directory. And I'm going to call my file ngsw-config.json.

[01:18 - 01:36] To initialize that file, please copy the initial content of the file from the description to this video. And as you can see, it's a JSON file. We have a few interesting things. I think the most important one here is that asset group. So we have some groups of assets that we are going to cache.

[01:37 - 01:55] Each group has its own name, install mode, in my case its prefetch. And then you need to specify which assets exactly you want to cache. So in the first group is the default configuration. I'm caching index HTML, manifest, all the CSS files and all JavaScript files.

[01:56 - 02:07] The second group called assets is very similar to the previous one. So install mode is lazy. And basically, we are caching all the assets, all images, fonts, and so on.

[02:08 - 03:24] So next, we need to configure our service worker module. And this configuration depends on the version of Angular. By the time of writing this course, I was using Angular 16. And this configuration has changed in Angular 17. At the moment, my monorepo is in Angular 17. So I will go to app, app config. And I will add a new provider using building Angular function called provide service worker. And if you're using Angular 16 and below, no worries, everything is in the description to this video. So all you need to do is to import in your main app module, module called service worker module, and call static method called register. Configuration is the same. So we have to pass the name of your configuration file and then some options. I decided to use the default options. So first of all, it's enabled only when we are not in the dev mode. So basically, when I run the build with production flag, and then registration strategy set to register when stable with 30,000. Now we need to add necessary configuration to our project.

[03:25 - 03:50] json file. Project.json file is an exversion of Angular.json. So you can find it in apps, room front- end project.json. And I have to add two lines. I have to set service worker to true, and I have to provide ngswconfig path. Like this. So I have service worker set to true, and my path set to ngswconfig.json.

[03:51 - 04:02] One important thing here, please remember to use paths relative to the root of the whole monorepo. All other paths in this config are the same. So it's quite intuitive what you should do.

[04:03 - 06:11] And the last step. Now it's time to go to ngswconfig.json and add configuration to cache endpoint data. Because not only we want to cache assets, but I want to cache some API responses as well. And to do this, you can follow the official guide from Angular webpage . All I need to do is to add data groups. And I have two data groups. First one is called rooms API, and it maps rooms URLs. And I have a simple cache config. So first of all, strategy is performance, max size, 200 kilobytes, and so on. And similar configuration for meetings API. This is only an example in real-world case. You probably would use different caching config. You probably would like to think about it, what to set here. In our case, application is small. We don't expect a lot of data. So this configuration is fine. And it was the last step to achieve an offline mode in our roomfrontal application. So let's test it. To test it locally, I need to change one more thing. So I will go to appconfig.ts and I will reconfigure my router to use hash location. It will help me to host it locally with HTTP server. And there will be no need to focus on routing on web server on the holo infrastructure behind. So I'm providing a feature to my router called hash location and that's it. So let's build our front-end application in production mode. To do this, you need to call command yarn and X build name or your application. So in our case, it's room- frontend. And then you need to pass additional parameters. In my case, it's minus minus configuration space production. And after a few seconds, we have everything ready to test. So let's change directory to list apps roomfrontend. This is where we can find the result of our build production command.

[06:12 - 07:04] So let's list all the files. As you can see, we have a bunch of them. We have our safety worker and worker basic and everything that is necessary to work with service workers. environment, I'm going to use command called HTTP server with additional parameter, minus p, which means that I want to specify port and it's 8080. I'm using HTTP server for many years. It's a very simple package that you can install from npm. If you want to install it globally, just call npm install minus minus global HTTP server. And it's a very simple web server. It's nothing fancy. It just works. So let's call it. And as you can see, we can access our web page on local host 8080. So as you can see, I switched to the browser. Let's start with admin application.

[07:05 - 07:17] We need to set some data to display it in roomfrontend application. So let's add a room. And then let's add a meeting to that room.

[07:18 - 07:55] Okay. So we have one room, one meeting. And as you can see, I'm on local host 8080. And I have my room. I have a meeting that is currently on everything works. So let's open the DevTools in browser. And as you can see, we have service workers under application. And it's suggesting that there is a service worker that is activated and running. Okay.

[07:56 - 08:48] So to test if it works offline, you can click offline, and then refresh the page. And as you can see, everything works. We have our meeting that is currently on. We have all the data. Of course, at the moment, we are caching everything, which might not be the perfect case. But from this point, you can find a lot of information about caching strategies about angular slash PWA. And you can learn how to configure caching requests. So our example is quite simple, but it works. And it shows the reason why you want to have an offline mode in your applications. When you start to read about angular slash PWA, you will notice how popular it is right now to implement such features. And it was the last lesson during our building a real life application with an X module.