Angular вид обновления работника сервиса, когда кеш обновляется после ответа API

Question

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

Я использую следующую конфигурацию для кэширования API: -

"dataGroups":[
    {
        "name":"services",
        "urls":[
                   "apiUrl"
               ],
        "cacheConfig": {
                           "maxSize": 1,
                           "maxAge": "1d",
                           "timeout": "0s",
                           "strategy": "freshness"
                       }
        }
]

Впервые это кэширование ответ на вызов службы и во второй раз - отображение данных из кэша и параллельный вызов API. После ответа API обновляется только кеш. Но я хочу обновить свое представление также при обновлении кэша. Сейчас я должен перезагрузить свою страницу, чтобы увидеть обновленные данные. Есть ли способ обновить данные в представлении, когда вызовы API возвращают ответ без перезагрузки страницы (Cache, а затем сетевая стратегия с angular сервисным работником).

Answer 1

Сделайте данные кеша в вашем сервисе объектом типа BehaviorSubject. Подпишитесь на него в вашем компоненте, где находится представление. Обновите свой вид внутри обратного вызова подписки. Например, приложение

import { HttpClient} from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { tap } from 'rxjs/operators';

// apiService.service.ts
cacheData = new BehaviorSubject<your_cache_object>(/*initial_value*/)

constructor(private http: HttpClient) {
}

cache() {
    return cacheData.asObservable();
}

api_request() {
    // I expect that yor GET request returns exactly object of type your_cache_object
    // otherwise, please parse your response as your_cache_object
    return this.http.get<your_cache_object>("address").
         pipe(
             tap(response => {
                 this.cacheData.next(data); // cacheData now holds data as the last emitted object
             }));
}

// app.component.ts
ngOnInit() {
    // update view after API call returned a response
    this.apiService.cache.subscribe(data => {
        // update your properties used in the view
    });

    this.apiService.api_request().subscribe();
}

Stackblitz. https://stackblitz.com/edit/angular-6iujsm