javascript - 网络状态的全局监听器

Question

我可以通过哪种方式做一个global 监听器(或其他)来检查我们在whole app 中是否有可见的互联网连接，无论我在哪个 Controller 里面它使用在每个应用程序 View 中显示简单 Angular Material 警报的功能。

因此，如果我需要在任何 Controller 中调用它，我想还有另一种方法可以做到这一点，但我不知道该怎么做。

监听器是我用addEventListener的方式写的。

Answer 1

您可以在 run 部分订阅该事件

.run(['$rootScope', '$window', function($rootScope, $window) {
  $rootScope.online = $window.navigator.onLine;
  if (!$rootScope.online) {
    //do actions here
    //for example go to special state, $state.go('offline')
    alert('Offline!');
  }

  $window.addEventListener("offline", function() {
    //do actions here
    //for example set $rootScope.online = false;
    alert('Offline!');
  }, false);

  $window.addEventListener("online", function() {
    //do actions here, 
    //for example set $rootScope.online = true;
    alert('Online!');
  }, false);
}])

1) 因为它在 run block 中，所以它位于层次结构的顶部；应用程序启动时执行；我在几个项目中使用了这种方法，并且它适用于所有 Controller ；

2)第一个if检查是针对首次初始应用启动阶段；因为那可能就是你

• 使用service worker，即使在离线状态下也可以使用应用 UI；
• 用户使用“添加到主屏幕”在移动设备上保存了快捷方式