angular pwa возвращает 504, хотя он может работать в оффлайн-режиме корректно

Вопрос или проблема

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "navigationRequestStrategy": "freshness",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api"],
      "cacheConfig": {
        "maxSize": 1000,
        "maxAge": "30d"
      }
    }
  ]
}

Ответ или решение

Проблема, с которой вы столкнулись, связана с получением ошибки 504 (Gateway Timeout) при обновлении страницы вашего Angular PWA, несмотря на то что приложение работает корректно в офлайн-режиме. Давайте разберём основные моменты, которые могут быть причиной возникновения данной проблемы.

Общее Описание

Ваше Angular приложение настроено с использованием @angular/pwa, что гарантирует его работу в офлайн-режиме благодаря использованию Service Worker. Ваша конфигурация ngsw-config.json выглядит вполне стандартно, включая группы ресурсов и групп данных. Однако, ошибка 504 возникает при попытке обновления страницы, когда интернет-соединение отсутствует.

Причины Ошибки 504

1. Работа Service Worker:
   Service Worker кеширует запросы к API. Когда вы работаете в офлайн-режиме, запросы могут быть успешными благодаря кешированию. Но при обновлении страницы происходит повторный запрос к серверу, и если он недоступен, вы получаете 504 ошибку. Ваша конфигурация не содержит задания для обработки кэша в случае отсутствия соединения.

2. Настройка Navigation Request Strategy:
   Вы используете стратегию freshness, которая подразумевает, что каждый раз, когда пользователь запрашивает страницу, Service Worker сначала пытается получить свежую версию из сети. Если нет соединения, он не сможет получить её и выдаст ошибку.

3. Кеширование API Запросов:
   Ваша dataGroups часть настроена на кэширование URL /api. Если запросы к этому URL не проходят, и сеть отсутствует, это также ведёт к ошибкам при обновлении страниц, так как Service Worker попытается сначала обратиться за новыми данными к серверу.

4. Необработанные Статические Страницы:
   Даже если статические страницы предоставляются из кэша, при первой попытке обновления они всё равно могут выдавать запрос, и если этот запрос не завершается, вы снова сталкиваетесь с ошибкой.

Рекомендации по Решению Проблемы

1. Изменение Стратегии Кеширования:
   Рассмотрите возможность изменения настройки для navigationRequestStrategy на performance или prefer-cache, что позволит вашим страницам больше полагаться на кэшированный контент в момент отсутствия интернет-соединения.

   "navigationRequestStrategy": "performance"

2. Логика Обработки Запросов:
   Убедитесь, что запросы к вашему API имеют варианты обработки, если сервис недоступен. Используйте механизм исключений и отображайте сообщения об ошибках пользователю.

3. Кэширование статических ресурсов:
   Убедитесь, что, даже если у вас есть серверный рендеринг (SSR), ваши статические ресурсы корректно кешируются, чтобы их всегда можно было предоставить пользователю из Service Worker.

4. Проверка и Мониторинг:
   Запустите тестирование вашего приложения с инструментами разработки, такими как Chrome DevTools, чтобы понять поведение вашего Service Worker в различных сетевых условиях. Убедитесь, что ваши статические страницы и API корректно кэшируются и доступны в офлайн-режиме.

5. Документация Angular Service Worker:
   Ознакомьтесь с документацией Angular Service Worker, чтобы лучше понять механизмы, доступные для обработки кеша и офлайн-запросов.

Заключение

Ваше приложение может работать в офлайн-режиме, но ошибки типа 504 возникают из-за попыток запроса к серверу при обновлении страниц. Обновление конфигурации Service Worker и логики обработки запросов может помочь устранить эту проблему и улучшить пользовательский опыт. Постоянно наблюдайте за сетью и настройками кеша для обеспечения максимально эффективной работы вашего PWA.