Я создал приложение на Angular 6 + PWA.Работает просто отлично.В автономном режиме сервисные работники регистрируются, и он отображает HTML, CSS, JS.Все хорошо.Но это предел работников службы.
Они не могут все кешировать.Я интегрировал Google Login в свое приложение, поэтому, когда я пытаюсь войти или выйти из системы в автономном режиме, он выдает ошибку «Нет подключения к Интернету» или иногда просто зависает.
Таким же образом у меня есть несколько вызовов API в моем угловом приложении.API размещен на нескольких облачных платформах.Я пытаюсь получить к ним доступ с помощью конечных точек.
Когда приложение собирается перейти в автономный режим, я использую следующий код для создания представления:
header.ts
@HostListener('window:offline')
onOffline() {
this.isOnline = false;
}
header.html
<div *ngIf="isOnline">
<p>Hello World</p>
</div>
<div *ngIf="!isOnline">
<p>Internet is off. Please try to connect to the network</p>
</div>
Поэтому, когда я перехожу в автономный режим, это представление активируется.
После этого, когда пользователь обновляется, в него входят работники сферы обслуживания ипредыдущий вид отображается.По сути, представление «Hello World».
Теперь у меня есть вызов службы:
this.service.getEmployeeDetail().subscribe((data) => {
console.log(data);
}, (error) => {
console.log(error);
});
Теперь, когда я нахожусь в автономном режиме, эта служба ничего не возвращает и переходит вцикл, или иногда он выдает: 504.
Итак, я попробовал следующее:
if (this.isOnline === false) {
// service call
} else {
// snackbar stating that internet is off
}
Но это не работает.Плюс я не могу проверить это на localhost: 4200, потому что, когда я выхожу в автономный режим, Google выдает ошибку.Представление отображается только тогда, когда я создаю приложение, а затем запускаю его.
Мне нужно обработать вызовы службы и отобразить удобное для пользователя сообщение в снэк-баре со словами «Пожалуйста, попробуйте, когда сеть работает».
Как мне достичь вышеуказанного?