在Angular 6中显示离线模式的错误html

Question

我有一个可以进入离线模式的应用程序。为此，我实现了一个侦听应用程序事件的HostListener。

@HostListener('window:offline', ['$event']) onOffline() {
   this.isOnline = false;
}

这工作正常，我显示一条错误消息：

<div *ngIf="!isOnline"> 
  <div class="network-div">
    <mat-icon class="network-icon">cloud_off</mat-icon>
  </div>
  <p class="network-text">Network error - unable to connect. 
    Please try again or contact support if error persists, contact the NCR 
    support desk.</p>
</div>

当我离线时，我得到了所需的消息，但现在互联网已关闭，当我刷新时，我得到了通常的谷歌错误消息与dinasour。

由于它在离线模式下运行，我无法在我的角度组件中呈现错误HTML。我刷新时需要渲染上面的HTML。

当我点击开发者工具的“离线”时，我会渲染一个HTML，下面是截图：

当我刷新同一页面（仍处于离线模式）时，我收到以下内容：

我该怎么处理？

Answer 1

如果您正在注册服务人员，您可以尝试：

ngOnInit() {
    if (!navigator.onLine) {
      this.isOnline = false;
    }
  }

请注意，您应该在构建项目后进行检查并提供服务。

Answer 2

关于浏览器的缓存访问：How to Enable Offline Browsing in Firefox如果您在浏览器上将事件监听器附加到document.body，则Chrome无法运行。您可以为这些事件注册监听器：

1. 在窗口，文档或document.body上使用addEventListener
2. 通过将document或document.body上的.onoffline属性设置为JavaScript Function对象。
3. 通过在HTML标记中的标记上指定onoffline =“...”属性。

一个javascript

window.addEventListener('load', function() {
  var status = document.getElementById("status");
  var log = document.getElementById("log");

  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";

    status.className = condition;
    status.innerHTML = condition.toUpperCase();

    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

Answer 3

转到开发人员工具中的“网络”选项卡，通过运行“审核”查看SW是否已注册并脱机工作。