Offline-страница как fallback для навигации

Offline-страница в контексте сервис-воркеров выполняет функцию резервного контента, который отображается пользователю при отсутствии сетевого подключения или недоступности запрашиваемого ресурса. Основная цель — сохранить навигацию и пользовательский опыт, даже когда сервер не отвечает.

Для этого Sw-precache предоставляет возможность указать страницу fallback, которая будет использоваться для всех навигационных запросов.

Настройка fallback-страницы в Sw-precache

В Sw-precache это реализуется через опцию navigateFallback. Пример конфигурации:

module.exports = {
  staticFileGlobs: [
    'dist/**.html',
    'dist/**.js',
    'dist/**.css',
    'dist/images/*.*'
  ],
  stripPrefix: 'dist/',
  navigateFallback: '/offline.html',
  runtimeCaching: [{
    urlPattern: /\/api\//,
    handler: 'networkFirst'
  }]
};

Ключевые моменты:

  • navigateFallback: '/offline.html' указывает путь к странице, которая будет показываться при навигационных запросах, если сеть недоступна.
  • Важно, чтобы offline-страница была закеширована в статических файлах через staticFileGlobs.
  • Страница должна быть полностью автономной: не полагаться на внешние ресурсы, которые могут быть недоступны при оффлайне.

Различие между navigateFallback и runtimeCaching

Sw-precache обрабатывает статические файлы и динамические запросы отдельно:

  • navigateFallback предназначен только для навигации (например, переход по URL внутри приложения).
  • runtimeCaching используется для динамических ресурсов (API-запросы, данные JSON, изображения).

Если навигационный запрос не попадает под кешированные статические файлы, сервис-воркер автоматически возвращает страницу, указанную в navigateFallback.

Принципы построения offline-страницы

  1. Минимальная зависимость от сети: все CSS, JS и изображения должны быть предварительно закешированы.
  2. Информативность: offline-страница должна содержать сообщение о недоступности сети и возможность повторной попытки загрузки.
  3. Поддержка SPA (Single Page Application): offline-страница может содержать базовую разметку и скрипт для перехвата внутренних маршрутов, чтобы переходы внутри SPA не приводили к ошибкам.

Пример минимальной offline-страницы:




  
  Нет подключения
  


  

    
Соединение отсутствует

    
Пожалуйста, проверьте интернет и попробуйте снова.

Проблемы и нюансы

  • Кэширование navigateFallback: Если offline-страница не закеширована, сервис-воркер не сможет её отдать при оффлайне.
  • Конфликты с push-state SPA: navigateFallback может перехватывать все запросы, включая статические файлы. Чтобы этого избежать, используют navigateFallbackWhitelist для указания URL-паттернов, на которые распространяется fallback.

Пример использования whitelist:

navigateFallback: '/offline.html',
navigateFallbackWhitelist: [/^\/app\//]

Только запросы, начинающиеся с /app/, будут перенаправлены на offline-страницу, остальные — обрабатываются как обычно.

Интеграция с runtimeCaching для улучшенного опыта

Для полноценного оффлайн-режима рекомендуется комбинировать navigateFallback с стратегиями кеширования динамических данных:

runtimeCaching: [
  {
    urlPattern: /\/api\//,
    handler: 'networkFirst'
  },
  {
    urlPattern: /\/images\//,
    handler: 'cacheFirst'
  }
]
  • networkFirst — сначала пробует сеть, затем кеш.
  • cacheFirst — сначала использует кеш, сеть только если нет данных. Эта комбинация позволяет offline-странице отображаться корректно, а динамические данные обновляться при доступе к сети.

Практические рекомендации

  • Всегда проверять, что offline-страница корректно загружается при отсутствии сети.
  • Минимизировать размер страницы для ускорения кеширования.
  • Проверять работу offline-страницы на SPA с pushState, чтобы избежать непредвиденных редиректов.
  • Использовать сервис-воркер DevTools для отладки: вкладки Application → Service Workers позволяют имитировать оффлайн и просматривать кешированные файлы.
Оглавление