Как сайт может работать без интернета?

Представьте, что вы открыли какой-либо интернет-магазин или блог. Но вдруг интернет отключился! Что происходит?

Обычный сайт: Ничего не загружается, просто белый экран.

Сайт с Service Worker: Всё работает, страницы открываются, как будто интернет есть!

Как так? Что такое Service Worker? Давайте разберёмся.

Как сайты работают без интернета?

Когда вы впервые заходите на сайт, браузер загружает все файлы:

✅ Страницы (HTML).

✅ Стили (CSS).

✅ Скрипты (JS).

✅ Картинки и шрифты.

Но если интернет пропадёт, обычный сайт уже не сможет получить эти файлы с сервера.

Решение – использовать Service Worker, который заранее сохраняет важные файлы в кэше.

Как Service Worker устроен внутри?

Service Worker – это JavaScript-файл, который работает в фоне и управляет кэшем.

"Жизненный цикл" Service Worker

Установка

• Загружает и сохраняет важные файлы в кэш.

Подготовка к работе

• Удаляет старый кэш, если есть обновления.

Работа

• Перехватывает запросы к серверу.
• Если интернета нет – загружает файлы из кэша.
• Может получать push-уведомления.

Пример простого Service Worker:

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("my-cache").then((cache) => {
      return cache.addAll(["/", "/index.html", "/styles.css", "/script.js"]);
    })
  );
});

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

Этот код кэширует файлы при первом посещении. А затем загружает их из кэша, если интернета нет.

Service Worker – это «фоновый помощник», который сохраняет сайт в кэше и позволяет ему работать даже без интернета.

Это основа для Progressive Web Apps (PWA) – технологий, которые делают веб-приложения похожими на нативные.

А как же работать с сайтом, если нет интернета?

Если сайт загружается из кэша, это значит, что пользователь может видеть интерфейс, но вот с динамическими данными (например, обновлениями с сервера) всё не так просто.

Чтобы сайт не просто загружался, но и оставался функциональным без интернета, используют несколько техник:

1. Использование IndexedDB (локальная база данных)

Что это?

IndexedDB — это хранилище в браузере, куда можно записывать данные и использовать их без интернета.

Как это работает?

• При наличии интернета сайт загружает данные с сервера и сохраняет их в IndexedDB.
• Когда интернета нет — сайт берет данные из IndexedDB вместо сервера.

Пример

Представьте, что вы заходите в TODO-приложение.

1. Вы добавляете задачу, и она сохраняется в IndexedDB.
2. Когда интернет появится — данные отправятся на сервер.

2. Background Sync (сохранение изменений и отправка их при появлении сети)

Что это?

Функция позволяет записывать изменения в очередь и отправлять их на сервер, когда интернет появится.

Как это работает?

• Пользователь делает действие (например, отправляет комментарий).
• Если интернета нет, запрос ставится в очередь и хранится в браузере.
• Когда интернет появляется — запрос автоматически уходит на сервер.

Пример

Вы пишете сообщение в чате без интернета.

1. Оно сохраняется в локальной базе.
2. Как только сеть восстановится, оно автоматически отправится собеседнику.

3. Push-уведомления (информирование пользователя)

Что это?

Даже если сайт закрыт, сервер может отправить уведомление, когда появится интернет.

Пример

Вы офлайн, когда появится интернет, сервер отправит push уведомление:

🔔 «Данные обновились, зайдите в приложение!»

4. WebSockets с повторными попытками отправки данных

Что это?

Если сайт использует WebSockets для обмена данными, можно реализовать механизм повторной отправки сообщений, когда сеть появится.

Как это работает?

1. Если соединение пропадает — данные временно сохраняются.
2. Как только интернет появляется — отправляются на сервер.

Пример

Чат-приложение без интернета записывает сообщение в локальное хранилище и отправляет его при восстановлении связи.

Вывод

Просто загрузить сайт из кэша — мало! Чтобы сайт работал полноценно без интернета, можно:

✔ Хранить данные в IndexedDB и загружать их при отсутствии сети.

✔ Использовать Background Sync, чтобы отправлять данные позже.

✔ Настроить push-уведомления, чтобы пользователь знал об обновлениях.

✔ Реализовать механизм повторных попыток при нестабильной сети.

Обсудить статью, узнать больше можно в телеграм канале «Тестировщики нужны».