AngularPWA离线时始终出现'Failedtofetch”的问题。
创始人
2024-10-29 02:00:21
0

可以通过使用 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 就可以在离线时正常运行了!

相关内容

热门资讯

黑科技辅助挂!wPK透视辅助,... 黑科技辅助挂!wPK透视辅助,(wpK)都是真的是有挂,2025新版(有挂透明挂)1、wpK系统规律...
重大通报“哥哥游戏辅助神器”h... 重大通报“哥哥游戏辅助神器”hhpoker德州牛仔视频(素来真的有挂)1、许多玩家不知道哥哥游戏辅助...
黑科技辅助挂!智星菠萝德州辅助... 黑科技辅助挂!智星菠萝德州辅助器工具,智星德州辅助器免费下载,攻略方法(有挂透明挂)1、智星菠萝德州...
关于“潮友潮汕木虱辅助”wep... 关于“潮友潮汕木虱辅助”wepoker可以免费玩吗(真是是有挂)1、点击下载安装,微扑克wpk插件透...
黑科技辅助挂!(wePoKe)... 黑科技辅助挂!(wePoKe)都是真的有挂,(wepoKe)总是真的是有挂,德州论坛(有挂透视)德州...
实测发现“闲逸辅助软件下载”竞... 实测发现“闲逸辅助软件下载”竞技联盟透视插件(起初真的是有挂);人气非常高,ai更新快且高清可以动的...
黑科技辅助挂!(we-poke... 黑科技辅助挂!(we-poker)总是真的有挂,(WEpoke)确实是有挂,AI教程(有挂辅助器);...
技术分享“决战13水辅助”哈糖... 技术分享“决战13水辅助”哈糖大菠萝挂法(先前是有挂);大神普及一款德州ai内幕,确定了哈糖大菠萝挂...
黑科技辅助挂!智星德州辅助器工... 黑科技辅助挂!智星德州辅助器工具,智星德州辅助器推荐,攻略方法(有挂辅助挂)黑科技辅助挂!智星德州辅...
我来教大家“胡乐辅助脚本有哪些... 我来教大家“胡乐辅助脚本有哪些常见功能”aa poker辅助包(其实有挂);致您一封信;亲爱胡乐辅助...