使用 Angular service worker 从所有 API 预取数据

Question

I would like to prefetch and cache data from all the APIs that are defined in the datagroup array. The data should be fetched and cached even if the user hasn't visited the relvant pages or performed the functions which make those calls. Having offline support without prefetching the data is no use in my case.

Is there a way to prefetch API data as Angular provides for assets or do I need to make some dummy API calls to all the APIs I have specified in the datagroups?

TIA

Answer 1

I deployed a sample service to explain you how to call the server just one time.

https://stackblitz.com/edit/stack-overflow-62018147

• You have to subscribe the api call in the constructor service in order to call it when this is injected in the component
• Then you have to save the response in a private variable inside the service and if this is null you can call the api rest. In the other case you can return the content of the private variable

    constructor(private http: HttpClient) {
      this.getNations().subscribe(); //The constructor is called when service is injected
    }

    public getNations(): Observable<INation []> {
        const url: string = this.backendURL + "places/nations";
        //this is the caching mechanism
        const nations$: Observable<INation []> = (!! this.nations) ? 
          of(this.nations.map((nation: INation) => cloneDeep(nation)))
            .pipe(
              tap((nations: INation []) => console.log("Returning cached response...", JSON.stringify(nations)))
            ) : 
          this.http.get<INation []>(url);
        //------------------------
        return nations$.pipe(
            tap((nations: INation []) => this.nations = nations),
            catchError(() => {
              console.error("Http Error, returning MOCK. If you see in network, this is called only one time.");
              this.nations = cloneDeep(this.nations_MOCK);
              return of(this.nations);
            })
        );
    }