title: Angular PWA not caching server requests
body: <p>I made a site which should work also as a PWA with Angular 8. I used Angular Universal for SSR, too. It works, also offline. The problem is that only the site is cached, but not the server requests. I added the <code>dataGroups</code> to the ngsw settings.</p>
  
  <p>These are my <strong>ngsw-config.json</strong></p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "dataGroups": [
      {
        "name": "exercises-requests",
        "urls": [
          "/api/provide-exercise"
        ],
        "cacheConfig": {
          "strategy": "performance",
          "maxSize": 100,
          "maxAge": "3d"
        }
      }
    ],
    "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)"
          ]
        }
      }
    ]
  }
  </code></pre>
  
  <p>This is my <strong>http service:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable, isDevMode } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
  import { throwError, Observable } from 'rxjs';
  import { catchError } from 'rxjs/operators';
  import { Input } from '../exercise/exercise.service';
  
  export interface UserInfo {
    // ...
  }
  export interface ProvideExerciseBody {
    // ...
  }
  export interface ProvideExerciseResponse {
    // ...
  }
  
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };
  
  @Injectable({
    providedIn: 'root',
  })
  export class HttpService {
  
    get
    serverDomain(): string {
      return isDevMode() ? 'https://unitn-statistica.herokuapp.com' : '';
    }
  
    constructor(private http: HttpClient) { }
  
    provideExercise(body: ProvideExerciseBody): Observable&lt;ProvideExerciseResponse&gt; {
      return this.http.post&lt;ProvideExerciseResponse&gt;(this.serverDomain + '/api/provide-exercise', body, httpOptions)
        .pipe(
          catchError(this.handleError)
        );
    }
  
    private handleError(err: HttpErrorResponse) {
      const error = err.error;
      if (error instanceof ErrorEvent) {
        // A client-side or network error occurred. Handle it accordingly.
        console.error('An error occurred:', error.message);
        console.error(error.message);
      } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        console.error(
          `Backend returned code ${err.status}, ` +
          `body was: ${error}`);
        console.log(error);
      }
      // return an observable with a user-facing error message
      return throwError(error.message);
    }
  
  }
  </code></pre>
  
  <p>And I am sure that the server call is right </p>
  
  <pre><code>app.post('/api/provide-exercise', (req, res) =&gt; { ... }
  </code></pre>
  
  <p>I do not understand why my post requests to the server are not cached.</p>