Angular PWA не кеширует запросы к серверу - PullRequest
Новая
       36

Angular PWA не кеширует запросы к серверу

0 голосов
/ 19 июня 2019

Я создал сайт, который должен работать также как PWA с Angular 8. Я также использовал Angular Universal для SSR.Работает, тоже в автономном режиме.Проблема в том, что кешируется только сайт, а не запросы сервера.Я добавил dataGroups в настройки ngsw.

Это мой ngsw-config.json 

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

Это мой http сервис: 

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<ProvideExerciseResponse> {
    return this.http.post<ProvideExerciseResponse>(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);
  }

}

И я уверен, что серверный вызов правильный 

app.post('/api/provide-exercise', (req, res) => { ... }

Я не понимаю, почему мои почтовые запросы к серверу не кэшируются.

1 Ответ

3 голосов
/ 19 июня 2019

Я думаю, что проблема, с которой вы сталкиваетесь, заключается в том, что POST-запросы не кэшируются сервисным работником Angular, независимо от того, как он был настроен. Причина в том, что запрос POST обычно предназначен для изменения ресурса на сервере. Поэтому не очень полезно кэшировать этот запрос.

Это соответствующая часть кода, которая исключает любые изменяющиеся запросы: https://github.com/angular/angular/blob/master/packages/service-worker/worker/src/data.ts#L283

Возможно, у вас есть контроль над сервером, и выдаваемый вами запрос ничего не меняет. Тогда может быть хорошим решением использовать вместо этого запрос GET.

Но если запрос действительно что-то мутирует, но вы все еще хотите кэшировать ответ, тогда может быть решением использовать другую стратегию кэширования, такую ​​как localStorage или IndexedDB.

...