Let's think for a moment about the offline mode of room application.

Do we really need it? And the answer is yes.
The app will be displayed on screens next to conference room doors all the time.
It's hard to provide 100% network stability in such cases.

We can quickly secure our application by creating an offline mode using 

 and service workers.
In this lesson, we'll check how it works.

Angular has a really nice service worker integration provided by two additional packages.

yarn add @angular/pwa @angular/service-worker

The content of this file should meet the requirements from the documentation, which you can find 

.
To make it easier during the course, please use the example code presented below.

The next configuration step is the declaration of 

import {isDevMode, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {appRoutes} from './app.routes';
import {RoomsStateModule} from "state/rooms";
import {MeetingsStateModule} from "state/meetings";
import {ServiceWorkerModule} from "@angular/service-worker";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes, {
      initialNavigation: 'enabledBlocking',
      useHash: true
    }),
    RoomsStateModule.forBackendUrl('http://localhost:3000'),
    MeetingsStateModule.forBackendUrl('http://localhost:3000'),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
}

Service workers will work only in production mode, so you can develop without problems with caches.
There shouldn't be any situation when you would be forced to unregister the service worker manually.

---
title: Preparing the Room applications to work offline
description: How to prepare the application to work offline
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.13-pwa?ref_type=heads
privateVideoUrl: https://stream.mux.com/FlXlv5EZd1gMX26eT1aK01VH21wyqSYTx4llKfBD601ms.m3u8
---

Let's think for a moment about the offline mode of room application.

Do we really need it? And the answer is yes.
The app will be displayed on screens next to conference room doors all the time.
It's hard to provide 100% network stability in such cases.

We can quickly secure our application by creating an offline mode using `@angular/pwa` and service workers.
In this lesson, we'll check how it works.

## Installation and configuration

Angular has a really nice service worker integration provided by two additional packages.

```bash
yarn add @angular/pwa @angular/service-worker
```

The next step is to create a new file, `ngsw-config.json` inside of the `src/` directory or our `room-frontend` application.

The content of this file should meet the requirements from the documentation, which you can find [here](https://angular.io/guide/service-worker-config).
To make it easier during the course, please use the example code presented below.

```json
{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}
```

The next configuration step is the declaration of `ServiceWorkerModule` in the application.
Open file `apps/room-frontend/src/app/app.module.ts`,
import `ServiceWorkerModule` from `@angular/service-worker`, and use it as one of the imports of `AppModule`.

```typescript { actualFilename=../../../manuscript/code/04.13-pwa/apps/room-frontend/src/app/app.module.ts endChar=936 endLine=30 startChar=0 startLine=1 statedFilename=apps/room-frontend/src/app/app.module.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-angular-applications-with-nx/module_05/lesson_05.13/.../../manuscript/code/04.13-pwa/apps/room-frontend/src/app/app.module.ts }
import {isDevMode, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {appRoutes} from './app.routes';
import {RoomsStateModule} from "state/rooms";
import {MeetingsStateModule} from "state/meetings";
import {ServiceWorkerModule} from "@angular/service-worker";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes, {
      initialNavigation: 'enabledBlocking',
      useHash: true
    }),
    RoomsStateModule.forBackendUrl('http://localhost:3000'),
    MeetingsStateModule.forBackendUrl('http://localhost:3000'),
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
}
```

Service workers will work only in production mode, so you can develop without problems with caches.
There shouldn't be any situation when you would be forced to unregister the service worker manually.

:::note

In Angular 17, the configuration has changed. Instead of importing a module to `AppModule` you'll need to add configuration in `app.config.ts` file. You can pass the same configuration as in `AppModule`. Example below.

```typescript
export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(appRoutes),
        provideServiceWorker('ngsw-worker.js', {
            enabled: !isDevMode(),
            registrationStrategy: 'registerWhenStable:30000'
        })
    ],
};
```

galczo5

How to prepare the application to work offline

Preparing the Room applications to work offline

In this lesson we're going to implement an offline mode of our room front-end

First of all, you have to ask yourself, do you really need offline mode?

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

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

is a really good thing to have. And fortunate for us, PWA progressive web apps

are quite simple to implement. So let's start. First of all, we need to add

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

for our service worker. In Angular, we call it ngswconfigjson. So you need to

front-end SRC directory. And I'm going to call my file ngsw-config.json.

To initialize that file, please copy the initial content of the file from the

video. And as you can see, it's a JSON file. We have a few interesting things.

important one here is that asset group. So we have some groups of assets that

Each group has its own name, install mode, in my case its prefetch. And then

which assets exactly you want to cache. So in the first group is the default

I'm caching index HTML, manifest, all the CSS files and all JavaScript files.

The second group called assets is very similar to the previous one. So install

And basically, we are caching all the assets, all images, fonts, and so on.

So next, we need to configure our service worker module. And this configuration

version of Angular. By the time of writing this course, I was using Angular 16.

has changed in Angular 17. At the moment, my monorepo is in Angular 17. So I

app config. And I will add a new provider using building Angular function

worker. And if you're using Angular 16 and below, no worries, everything is in

this video. So all you need to do is to import in your main app module, module

worker module, and call static method called register. Configuration is the

pass the name of your configuration file and then some options. I decided to

options. So first of all, it's enabled only when we are not in the dev mode. So

when I run the build with production flag, and then registration strategy set

stable with 30,000. Now we need to add necessary configuration to our project.

file is an exversion of Angular.json. So you can find it in apps, room front-

And I have to add two lines. I have to set service worker to true, and I have

ngswconfig path. Like this. So I have service worker set to true, and my path

One important thing here, please remember to use paths relative to the root of

All other paths in this config are the same. So it's quite intuitive what you

And the last step. Now it's time to go to ngswconfig.json and add configuration

endpoint data. Because not only we want to cache assets, but I want to cache

as well. And to do this, you can follow the official guide from Angular webpage

to add data groups. And I have two data groups. First one is called rooms API,

URLs. And I have a simple cache config. So first of all, strategy is

200 kilobytes, and so on. And similar configuration for meetings API. This is

real-world case. You probably would use different caching config. You probably

about it, what to set here. In our case, application is small. We don't expect

configuration is fine. And it was the last step to achieve an offline mode in

application. So let's test it. To test it locally, I need to change one more

appconfig.ts and I will reconfigure my router to use hash location. It will

locally with HTTP server. And there will be no need to focus on routing on web

holo infrastructure behind. So I'm providing a feature to my router called hash

that's it. So let's build our front-end application in production mode. To do

command yarn and X build name or your application. So in our case, it's room-

need to pass additional parameters. In my case, it's minus minus configuration

And after a few seconds, we have everything ready to test. So let's change

list apps roomfrontend. This is where we can find the result of our build

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript