> For the complete documentation index, see [llms.txt](https://flignats.gitbook.io/full-stack-typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flignats.gitbook.io/full-stack-typescript/workflows/pwa-workflow.md).

# PWA workflow

* [Add the service worker package](#add-the-service-worker-package)
* [Update the application Index](#update-the-application-index)
* [Add the web manifest file](#add-the-web-manifest-file)
* [Add the web ngsw-config file](#add-the-web-ngsw-config-file)
* [Update the application project.json](#update-the-application)
* [Update the application module](#update-the-application-module)
* [Add required icon assets](#add-required-icon-assets)
* [Angular service worker documenation](#angular-service-worker-documenation)

## Add the service worker package

In your app's package.json add the latest Angular service worker package:

```json
    "@angular/service-worker": "^15.2.0",
```

Run `npm i` to install the package.

## Update the application Index

path: `apps\{{project}}\src\index.html`

`Add` the following directly before the `head` closing tag

```html
    <link rel="manifest" href="manifest.webmanifest">
    <meta name="theme-color" content="#1976d2">
```

## Add the web manifest file

Create a `manifest.webmanifest` file at the following location:

`apps\{{project}}\src\manifest.webmanifest`

Add the following code:

```json
{
  "name": "{{project}}",
  "short_name": "{{project}}",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

```

## Add the web ngsw-config file

Create a `ngsw-config.json` file at the following location:

`apps\{{project}}\src\ngsw-config.json`

Add the following code:

```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)"
        ]
      }
    }
  ]
}

```

## Update the application project.json

* Add the `manifest.webmanifest` to the project assets
* Add the `"serviceWorker": true,` to the project options
* Add the `"ngswConfigPath": "apps/{{project}}/src/ngsw-config.json"` to the project options

```
        ...
        "assets": [
          ...
          "apps/{{project}}/src/manifest.webmanifest",
          ...
        ],
        ...
        "serviceWorker": true,
        "ngswConfigPath": "apps/full-stack-typescript/src/ngsw-config.json"
      },
```

## Update the application module

Update the `app.module` file to include the following:

```typescript
...
import { isDevMode, ... } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';

@NgModule({
  ...
  imports: [
    ...
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: !isDevMode(),
      // Register the ServiceWorker as soon as the application is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    }),
...

```

## Add required icon assets

Add the required icon assets to the following location:

`apps\{{project}}\src\assets\icons`

Required icons:

* icon-72x72.png
* icon-96x96.png
* icon-128x128.png
* icon-144x144.png
* icon-152x152.png
* icon-192x192.png
* icon-384x384.png
* icon-512x512.png

## Angular service worker documenation

Officical Angular documentation: <https://angular.io/guide/service-worker-intro>

The steps in this guide are provided for easy service worker implementation in a NX monorepo architecture. The Angular guide does not document the required considerations and as a result cannot be added automatically with the `ng add` command.