Офлайн функциональность

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

Service Workers и их роль

Service Worker — это скрипт, работающий в фоновом режиме браузера, позволяющий перехватывать сетевые запросы, управлять кешем и обеспечивать функциональность приложения офлайн. Основные возможности:

  • Перехват запросов: Service Worker может возвращать кешированные версии ресурсов, если сеть недоступна.
  • Фоновая синхронизация: позволяет отправлять данные на сервер при восстановлении подключения.
  • Push-уведомления: работа даже при закрытой вкладке браузера.

Пример регистрации Service Worker:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker зарегистрирован с областью:', registration.scope);
    })
    .catch(error => {
      console.error('Регистрация Service Worker не удалась:', error);
    });
}

Кеширование ресурсов

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

  1. Cache API используется для хранения статических ресурсов (HTML, CSS, JS, изображения).
  2. Стратегии кеширования:
  • Cache First — сначала проверяется кеш, затем сеть. Эффективно для статичных ресурсов.
  • Network First — сначала запрос к сети, если не доступно — кеш. Полезно для динамического контента.
  • Stale While Revalidate — возвращает кеш сразу, обновляя его параллельно через сеть. Баланс между скоростью и актуальностью данных.

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

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('static-v1').then(cache => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/main.js',
        '/images/logo.png'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Оценка офлайн-функциональности с помощью Lighthouse

Lighthouse оценивает офлайн-доступность через аудит “Service Worker” и “Offline availability”:

  • Проверяется наличие Service Worker на странице.
  • Анализируется кеширование критически важных ресурсов.
  • Проверяется корректная работа при отключенном интернете.

Основные показатели:

  • Покрытие кешем — процент ресурсов, доступных офлайн.
  • Срабатывание Service Worker — корректная обработка сетевых запросов.
  • Функциональность страниц — минимальная возможность взаимодействия с приложением без сети.

Расширенные техники

  1. Prefetching и Precache Загружает ресурсы заранее, чтобы ускорить доступ при офлайн-режиме. Например, можно кешировать страницы, которые пользователь с высокой вероятностью откроет.

  2. IndexedDB для динамических данных Позволяет хранить сложные структуры данных, например результаты API-запросов, обеспечивая доступ к ним без сети.

let db;
const request = indexedDB.open('app-db', 1);

request.onupgradenee ded = event => {
  db = event.target.result;
  db.createObjectStore('posts', { keyPath: 'id' });
};

request.onsucc ess = event => {
  db = event.target.result;
};
  1. Offline-first приложения Приоритет отдаётся локальным данным и кешу, сеть используется только для обновления информации.

Общие рекомендации

  • Все критически важные ресурсы должны быть закешированы.
  • Стратегии кеширования должны соответствовать типу ресурса: статичные — Cache First, динамичные — Network First.
  • Проверять функциональность офлайн через Lighthouse, включая эмуляцию отсутствия сети.
  • Service Worker должен быть устойчив к ошибкам и корректно обрабатывать промисы, чтобы не нарушать работу приложения.

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

Оглавление