檢查應用程序何時在ionic 2應用程序中脫機的最佳方法

Question

我有一個能夠通過離線模式執行某些功能的應用程序。 以下是幾個示例：

1. 當應用程序離線時，用戶個人資料旁邊的綠燈變為黃色。

2. 如果未下載項目列表文件以供脫機查看，則某些列表項目文檔將顯示為灰色，因此僅下載為離線視圖的文檔不會顯示為灰色，並且可以查看。

最簡單，最直接的方法似乎只是具有某種檢查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上使用它，然后在連接或斷開連接時將conn變量保存在localStorage中boolean ，所以當我做連接敏感的工作時，我會檢查conn是true還是false的localStorage 。

這樣對我來說既好又快，並且可能對您也很好。

希望能有所幫助