可以通过使用 service worker 提供的缓存机制来解决此问题。以下是一些代码示例:
首先,在 app.module.ts 中添加以下代码以启用 service worker:
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
imports: [
BrowserModule,
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],
// ...
})
export class AppModule {}
然后,在 service worker 中添加以下代码以缓存所有 GET 请求:
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response;
}
return fetch(event.request).then(response => {
if (!response || response.status !== 200) {
return response;
}
const clonedResponse = response.clone();
caches.open('my-cache').then(cache => {
cache.put(event.request, clonedResponse);
});
return response;
});
})
);
});
最后,在你的 Angular 应用中使用 HttpClient 替换所有的 Http 请求。这将自动使用缓存版本,如果没有缓存则将请求发送到服务器:
import { HttpClient } from '@angular/common/http';
export class MyComponent {
constructor(private http: HttpClient) {}
getData() {
this.http.get('/api/data').subscribe(result => {
// ...
});
}
}
这样你的 Angular PWA 就可以在离线时正常运行了!