Question

我已经用Angular 6 + PWA创建了一个应用程序。它工作正常。在脱机模式下，将注册服务工作者，并呈现HTML，CSS，JS。都好。但这就是服务人员的极限。

他们无法缓存所有内容。我已将Google登录名集成到我的应用程序中，因此当我尝试以离线模式登录或注销时，它会引发错误“无Internet连接”，有时甚至会冻结。

以同样的方式，我的角度应用程序中有多个API调用。 API托管在多个云平台上。我尝试使用端点访问它们。

当应用程序即将进入离线模式时，我使用以下代码引发视图：

header.ts

@HostListener('window:offline') 
  onOffline() {
    this.isOnline = false;
  }

header.html

 <div *ngIf="isOnline">
   <p>Hello World</p>
 </div>
 <div *ngIf="!isOnline">
   <p>Internet is off. Please try to connect to the network</p>
 </div>

所以当我离线时，此视图被激活。

此后，当用户刷新时，服务人员会进入图片并呈现以前的视图。基本上说“ Hello World”的观点。

现在我有如下服务电话：

this.service.getEmployeeDetail().subscribe((data) => {
  console.log(data);
}, (error) => {
  console.log(error);
});

现在，当我处于脱机模式时，此服务不返回任何内容并进入循环，或者有时它抛出：504。

所以我尝试了以下方法：

if (this.isOnline === false) {
  // service call
} else {
 // snackbar stating that internet is off
 }

但这不起作用。另外，我无法在localhost：4200上对此进行测试，因为当我脱机时，google会引发错误。仅当我构建应用程序然后运行它时，视图才会呈现。

我需要处理服务电话并在小吃栏中显示一条用户友好的消息，说“请在网络启动时尝试”。

我应该如何实现以上目标？

离线时如何处理Angular PWA应用程序中的服务呼叫

0 个答案: