Building the PWA project

Question

I added PWA to the application in Angular

I built a project for production

When I run the application (on server), PWA does not work

Cache Storage is empty

What could be wrong?

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

dist/ (production)

Answer 1

I created a step by step article about creating a PWA project with Angular. You can follow it to see what is missing in your case. The article also features an Angular project in Github that you can use as starting point.

You need to have a service worker installed and running in order to be able to cache anything.