Angular PWA - Маршрут к пользовательской автономной странице, когда нет доступного соединения

Question

В Angular PWA я хотел бы перенаправить пользователя на пользовательскую автономную страницу (offline.html), если нет доступного подключения к Интернету.

Используя файл ng-sw.config.json, я настраиваю активы и APIчтобы быть кэшированным и какую стратегию использовать (производительность / свежесть), и я мог бы обслуживать приложение, даже когда в автономном режиме без каких-либо проблем.Теперь я хотел бы показать настраиваемую офлайн-страницу, но среди учебных пособий и руководств я не смог найти способ добиться этого с помощью Angular и его сервис-рабочего модуля.

Интересно, будет ли возможное решение длясоздайте службу, которая проверяет подключение (онлайн / офлайн) и, в автономном режиме, перенаправляет на страницу offline.html.Страница службы и html будет кэшироваться с помощью стратегии «предварительной выборки», чтобы обеспечить их доступность сразу после установки работника сервиса.

В противном случае я бы создал base service worker, который импортирует работника сервиса Angular по умолчанию и добавляетлогика перенаправления на автономную страницу при сбое вызова извлечения.

Есть ли другие возможности?

Answer 1

Сначала вам нужно создать автономную HTML-страницу и сохранить ее в папке активов.

Затем добавьте эту автономную страницу в свой файл ng-sw.config следующим образом:

  "resources": {
    "files": [
      "/assets/favicon.ico",
      "/*.css",
      "/*.js",
      "/assets/offline-page.html"  
    ],

Далее в вашемapp.component.html добавьте логику, подобную этой

ngOnInit() {
  self.addEventListener('fetch', function(event) {
    return event.respondWith(
      caches.match(event.request)
      .then(function(response) {
        let requestToCache = event.request.clone();

        return fetch(requestToCache).then().catch(error => {
          // Check if the user is offline first and is trying to navigate to a web page
          if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) {
            // Return the offline page
            return caches.match(offlineUrl);
          }
        });
      })
    );
  });
}

Поэтому, когда пользователь находится в автономном режиме, и пользователь пытается перейти к другому маршруту, он увидит автономную страницу