Ошибка отображения HTML для автономного режима в Angular 6

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>

Когда я выхожу в автономный режим, я получаю нужное сообщение, но теперь, когда интернет отключен, когда я обновляюсь, я получаю обычное сообщение об ошибке Google с этим dinasour.

Я больше не могу рендерить ошибку HTML в моем угловом компоненте, поскольку он работает в автономном режиме. Мне нужно визуализировать приведенный выше HTML при обновлении.

Когда я нажимаю «Офлайн» в инструменте разработчика, я отображаю HTML, и ниже скриншот:

Когда я обновляю ту же страницу (все еще в автономном режиме), я получаю следующее:

Как мне справиться с этим?

Answer 1

О посещении кэша браузера: Как включить автономный просмотр в Firefox Если вы прикрепите прослушиватель событий к document.body в браузере, Chrome не сможет работать.Вы можете зарегистрировать прослушиватели для этих событий:

1. , используя addEventListener в окне, документе или document.body

2. , установив свойства .onoffline вdocument или document.body для объекта функции JavaScript.

3. путем указания атрибутов onoffline = "..." для тега в разметке HTML.

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 2

Перейдите на вкладку сети в инструментах разработчика и посмотрите, зарегистрирован ли SW и работает ли он в автономном режиме, запустив Audit.

Answer 3

если вы регистрируете сервисного работника, вы можете попробовать:

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

обратите внимание, что вы должны проверить его после сборки проекта и обслуживать его.