Question

我有一个能够通过离线模式执行某些功能的应用程序。这方面的几个例子是：

当应用离线时，用户个人资料旁边的绿灯变为黄色。
如果没有为脱机视图下载项目，某些列表项文档会变灰，因此只有为脱机视图下载的文档才会显示为灰色并且可以查看。

最简单，最直接的似乎只是有某种功能可以检查navigator.onLine

export class OfflineService {
  public isOffline : boolean = false;

  constructor() {}

  checkOffline() {
    if (!navigator.onLine) {
      this.isOffline = true;
    } else {
      thus.isOffline = false;
    }
  }

}

在执行某些操作（例如下载文档）时检查它，可能是在页面之间的状态更改时，或者在每次通过服务发出正常HTTP请求以命中API之前检查。

在整个应用中检查和维护此状态的最佳方式是什么，以便在设备确实脱机时，我的页面会发生变化以反映出来（就像上面的两个点带有状态指示灯，或者灰色某些行离线时无法访问的项目

Answer 1

您可以安装网络插件并订阅断开连接和连接事件，如下所示：

import { Network } from 'ionic-native';
import { Platform } from 'ionic-angular';

export class SomeClass {
  constructor(public platform: Platform){
    platform.ready().then(() => {
      // IN CASE THE USER DISCONNECT
      Network.onDisconnect().subscribe(() => {
        //DO YOUR CODE, SAVE SOMETHING ON LOCALDATABASE, CALL FUNCTION, ETC.
      }

      // IN CASE USER RECONECCT BACK
      Network.onConnect().subscribe(() => {
       // DO CODE
      });
    }
  }
}

当我想检查用户是否连接时，每次或每页都要检查，而不是在每个页面上重复此代码，我只需在app.components上使用它，在连接或断开连接时我保存{{ 1}} localStorage中的变量conn，所以当我正在进行连接敏感工作时，如果boolean是localStorage，我会检查conn }或true。

对我来说，这种方式运行得很好，也可能对你很好。

希望有所帮助

在离子2应用程序中检查应用程序何时脱机的最佳方式

1 个答案: