Увімкніть підтримку офлайн у веб-додатках за допомогою Service Workers

Service Worker. Service Worker діє як скриптований посередник, що знаходиться між вашим веб-додатком та мережею. Він може перехоплювати запити ще до того, як вони дістануться до сервера, та самостійно на них відповідати за допомогою файлів, збережених локально, що дозволяє вашому сайту продовжувати працювати навіть без жодного з’єднання.

Цей трюк не лише забезпечує корисний запасний варіант — він також може значно прискорити час завантаження та зробити ваш додаток набагато стійкішим до проблем з мережею. І хоча це звучить складно, насправді налаштування досить прості.

Що робить цей трюк ефективним: Service Workers у поєднанні з Cache API

Для цього разом працюють дві функції браузера:

1. Service Worker: фоновий скрипт, який працює незалежно від основного потоку вашої сторінки та виступає як альтернативний шар мережі.
2. Cache API: вбудований інтерфейс браузера, який дозволяє програмно зберігати та отримувати ресурси, схоже на сховище типу «ключ-значення». Саме тут ви будете зберігати HTML, CSS, JavaScript, зображення та інші ресурси, від яких залежить ваш сайт.

Ось загальний алгоритм: коли хтось уперше відвідує ваш сайт під підключенням до Інтернету, Service Worker встановлюється та завантажує важливі файли у свою кеш-пам’ять. Після цього кожен мережевий запит вашої сторінки спочатку проходить через Service Worker. Коли відвідувач втрачає з’єднання, Worker відповідає, використовуючи те, що вже зберігається у кеші, замість того, щоб намагатися — і зазнавати невдачі — отримати дані з сервера, тож сторінка все одно відображається майже миттєво.

Крок 1: Написати скрипт Service Worker

Почніть з створення файлу під назвою sw.js у корені вашого проекту. Це скрипт, відповідальний за створення кешу та перехоплення майбутніх запитів.

// sw.js

const CACHE_NAME = 'my-website-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/images/logo.png'
];

// The 'install' event is fired when the service worker is first installed.
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// The 'fetch' event is fired for every network request.
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // If the request is in the cache, serve the cached version.
        if (response) {
          console.log('Serving from cache:', event.request.url);
          return response;
        }

        // Otherwise, fetch from the network.
        console.log('Fetching from network:', event.request.url);
        return fetch(event.request);
      })
  );
});

Цей файл переважно слухає дві події життєвого циклу:

• install: тут ви відкриваєте кеш із певною назвою та заповнюєте його списком файлів, які потрібно мати у доступі навіть без мережевого з’єднання.
• fetch: ця подія виникає за кожним запитом, який надсилає сторінка. Робочий процес перевіряє, чи існує у кеші відповідна відповідь; якщо так, повертається ця кешована копія, а якщо ні — запит надсилається у мережу як зазвичай.

Крок 2: Зареєструйте робочий процес у вашому додатку

Як тільки скрипт робочого процесу створений, браузеру все одно потрібно сказати використовувати його. Додайте наступний фрагмент до вашого основного файлу скриптів або вставте його безпосередньо всередину тега <script> у вашому HTML.

// Register the service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered successfully:', registration);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

Цей блок спочатку перевіряє, чи підтримує поточний браузер API Service Worker, і якщо так, реєструє ваш файл sw.js. Зверніть увагу на шлях, який використовується для його реєстрації: файл /sw.js має знаходитися у корені вашого сайту, оскільки Service Worker може керувати лише тими сторінками, які знаходяться в межах директорії, з якої він був зареєстрований.

Перевірка роботи

Щоб побачити, як це працює на практиці, завантажте свій сайт у браузер, який підтримує Service Workers — Chrome, Firefox та Edge підходять для цього.

• Відкрийте інструменти розробника браузера (F12 або Ctrl+Shift+I).
• Перейдіть до панелі Application.
• У бічній панелі знайдіть Service Workers. Ваш файл sw.js має відображатися там як активний.

Клацніть у розділі Cache Storage, щоб підтвердити, що ваш кеш існує та містить вказані файли.

Позначте галочкою поле "Offline" у верхній частині розділу Service Worker.

Перезавантажте сторінку.

Якщо все налаштовано правильно, сторінка завантажуватиметься миттєво, навіть без підключення до мережі. Вивід у консолі інструментів розробки підтвердить, що запити перехоплюються та обробляються безпосередньо з кешу, а не через мережу.

Розвиток цього підходу: альтернативні стратегії кешування

Описаний вище підхід відомий як спочатку кеш, потім мережа — він ідеально підходить для ресурсів, які рідко змінюються, таких як статичні зображення чи об’єднані скрипти. Однак Service Workers не обмежуються лише цим підходом; існує ще кілька поширених стратегій:

• Мережа на першому місці, кеш як резерв: підходить для контенту, який часто змінюється та має залишатися актуальним. Процесор спочатку намагається отримати дані з мережі, і лише у разі невдачі цього запиту, наприклад через погане з’єднання, переходить на використання даних з кешу.
• Старі дані поки перевіряються: процесор негайно відповідає за рахунок даних, які вже збережені в кешу, для прискорення роботи, водночас у фоновому режимі надсилаючи запит до мережі для оновлення кешу під час наступного завантаження сторінки. Це забезпечує швидку відповідь прямо зараз та оновлений контент незабаром після цього.

Оволодіння цим базовим патерном роботи в офлайн-режимі також допомагає створювати повноцінні прогресивні веб-додатки, де підтримка офлайн-режиму поєднується з такими функціями, як сповіщення та можливість встановлення сайту на головний екран пристрою як нативного додатку.

Додавання цього шаблону до вашого проекту — це відносно невеликі зусилля заради значного ефекту: замість того, щоб неробоче підключення повністю зруйнувало користувацький досвід, ваші користувачі ледве помічають переривання.