可以通过在Angular Service Worker中配置新鲜度策略来解决此问题。新鲜度策略可以使缓存失效并强制重新获取最新的数据。例如,可以使用NetworkFirst
策略来强制首先从网络获取数据,然后仅当网络不可用时才从缓存获取数据。
以下是使用NetworkFirst
策略的示例代码:
// app.module.ts
import { ServiceWorkerModule, SwRegistrationOptions } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
imports: [
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production,
// 配置新鲜度策略
registrationStrategy: 'registerImmediately',
// 配置路由黑名单,以防止缓存不应缓存的请求
// 可以根据实际情况进行调整
blacklist: [/\/(?:sockjs|graphql)$/],
// 配置策略
// 在网络可用时首先尝试从网络获取数据
// 然后将网络响应缓存起来
cache: {
// 缓存只针对GET请求
strict: true,
// 将具有相同URL的响应视为可变的
// 这样当响应在后端更新时,应用程序将获取到新的响应
// 可以根据实际情况进行调整
immutable: true,
store: 'network-first'
}
} as SwRegistrationOptions)
],
// ...
})
export class AppModule {}
此示例中使用的是registerImmediately
策略,这意味着在Angular应用程序启动时将立即注册Service Worker。在实际应用程序中,您可以根据需要进行调整。
在Service Worker注册后,可以通过Cache API访问缓存来获取请求。
以下是Service Worker代码示例:
// worker-basic.js
self.addEventListener('fetch', (event) => {
// 使用cache.match()检查请求是否存在于缓存中
event.respondWith(
caches.match(event.request)
.then((cachedResponse) => {
// 如果找到缓存,则返回缓存的响应
if (cachedResponse) {
return cachedResponse;
}
// 如果未找到缓存,则从网络获取
return fetch(event.request)
.then((networkResponse) => {
// 将网络响应添加到缓存
// 可以根据实际情况进行调整
caches.open('network-first').then((cache) => {
cache.put(event.request, networkResponse);
});
return networkResponse;
})
.catch((error) => {
console.error('Error:', error);
// 如果网络不可用,返回离线页面
// 可以根据实际情况进行调整
return caches.match('/offline.html');
});
})
);
});