Индикация офлайн-состояния в интерфейсе

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

Библиотека позволяет задать набор правил кэширования, включая:

  • список файлов и каталогов для предкэширования (staticFileGlobs);
  • максимальный размер файлов для кэширования (maximumFileSizeToCacheInBytes);
  • правила маршрутизации запросов, не попавших в предкэш (runtimeCaching).

Эти возможности делают sw-precache базовым инструментом для реализации функционала офлайн-индикации.

Подключение и настройка сервис-воркера

Установка sw-precache производится через npm:

npm install --save-dev sw-precache

Генерация сервис-воркера обычно делается через Node.js скрипт:

const swPrecache = require('sw-precache');
const path = require('path');

swPrecache.write(path.join(__dirname, 'service-worker.js'), {
  staticFileGlobs: [
    'index.html',
    'styles/**/*.css',
    'scripts/**/*.js',
    'images/**/*.{png,jpg,gif,svg}'
  ],
  stripPrefix: __dirname,
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/api\.example\.com\//,
      handler: 'networkFirst'
    }
  ]
});

В этом примере:

  • staticFileGlobs указывает, какие файлы кэшируются при установке сервис-воркера;
  • runtimeCaching задаёт стратегию обработки сетевых запросов, если ресурс ещё не кэширован.

Индикация офлайн-состояния

Индикация офлайн-состояния основана на событиях браузера и возможностях сервис-воркера. Основные механизмы:

Проверка состояния сети

JavaScript предоставляет событие online и offline для окна:

window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

function updateOnlineStatus() {
  const statusElement = document.getElementById('network-status');
  if (navigator.onLine) {
    statusElement.textContent = 'Сеть восстановлена';
    statusElement.classList.remove('offline');
    statusElement.classList.add('online');
  } else {
    statusElement.textContent = 'Вы офлайн';
    statusElement.classList.remove('online');
    statusElement.classList.add('offline');
  }
}

Особенности работы:

  • navigator.onLine может возвращать true, даже если интернет нестабилен, поэтому рекомендуется комбинировать с тестовыми fetch-запросами.
  • События online и offline реагируют на изменения состояния подключения в реальном времени.

Связь с сервис-воркером

Сервис-воркер может перехватывать запросы и использовать кэшированные версии ресурсов. Это позволяет не только отображать офлайн-состояние, но и показывать полностью рабочий интерфейс при отсутствии сети.

Пример обработки запросов в сервис-воркере:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request)
          .catch(() => {
            // Возврат резервной страницы офлайн
            if (event.request.mode === 'navigate') {
              return caches.match('offline.html');
            }
          });
      })
  );
});
  • Кэширование offline.html позволяет показать пользователю информативную страницу при отсутствии сети.
  • Стратегия caches.match обеспечивает быстрый доступ к ресурсам без запроса к серверу.

Интеграция в интерфейс

Визуальные индикаторы

  • Баннеры или уведомления в верхней части страницы для оповещения о переходе в офлайн-режим.
  • Иконки или цветовые индикаторы в навигационной панели для постоянного отображения состояния сети.

Пример HTML и CSS:

<div id="network-status" class="online">Вы онлайн</div>
#network-status {
  padding: 8px 16px;
  position: fixed;
  top: 0;
  right: 0;
  font-weight: bold;
}
.online {
  background-color: #4CAF50;
  color: #fff;
}
.offline {
  background-color: #f44336;
  color: #fff;
}

Динамическое обновление контента

События online и offline можно использовать для:

  • блокировки действий, требующих сети;
  • автоматического повторного запроса данных при восстановлении соединения;
  • кэширования данных для последующего использования офлайн.

Стратегии кэширования для офлайн-индикации

  1. Precache (предварительное кэширование) Все основные ресурсы приложения кэшируются заранее. Позволяет показывать интерфейс даже при полном отсутствии сети.

  2. Runtime caching (кэширование при запросе) Используется для динамических данных, например API-запросов. Позволяет показывать свежие данные, если соединение доступно, и кэшированные версии — если офлайн.

  3. Fallback strategy (резервная стратегия) Для ресурсов, недоступных офлайн, можно показывать страницу-заглушку (offline.html) или локальные данные.

Обработка обновлений сервис-воркера

Для корректной работы офлайн-индикации важно отслеживать версии сервис-воркера:

navigator.serviceWorker.register('/service-worker.js')
  .then(registration => {
    registration.onupdatefo und = () => {
      const newWorker = registration.installing;
      newWorker.onstatecha nge = () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          alert('Доступна новая версия приложения. Перезагрузите страницу.');
        }
      };
    };
  });
  • Позволяет уведомлять пользователя о новой версии кэшированных ресурсов.
  • Снижает вероятность конфликтов старых и новых кэшированных данных.

Лучшие практики

  • Минимизировать размер кэша, чтобы избежать переполнения хранилища.
  • Регулярно обновлять кэш через сервис-воркер, чтобы пользователи видели актуальный контент.
  • Использовать отдельный кэш для API и статических файлов, чтобы не смешивать динамические данные с ресурсами интерфейса.
  • Тестировать офлайн-режим в разных браузерах, учитывая особенности поддержки сервис-воркеров и события online/offline.

Использование sw-precache в сочетании с событиями сети и визуальными индикаторами позволяет создавать интерактивные, надежные приложения, которые корректно реагируют на потерю соединения, поддерживают офлайн-доступ и предоставляют пользователю полную информацию о состоянии сети.

Оглавление