HTML Academy · Урок

Резервная страница для офлайн-режима

Показывайте кэшированную резервную страницу, когда пользователь не подключён к сети

Урок 4 из 414 шагов

«Резервная страница для офлайн-режима» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Зачем нужна офлайн-страница

Когда сеть недоступна, сервис-воркер может показать специально оформленную резервную офлайн-страницу вместо стандартной ошибки браузера «нет подключения к интернету». Пользователь видит бренд, полезную информацию и доступное в кэше содержимое — это гораздо лучше динозавра Chromium или грустной вкладки Firefox.

Кэширование резервной страницы

В событии установки сервис-воркера предварительно закэшируйте страницу offline.html, чтобы она всегда была доступна, даже если пользователь ещё никуда не переходил в автономном режиме. Браузер сохраняет кэш до следующего изменения sw.js.

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

Выдача при сбое

В событии получения запроса сначала попробуйте обратиться к сети, а при сбое верните закэшированную страницу offline.html. Этот шаблон, то есть обращение к сети с резервным вариантом при отсутствии подключения, — самый простой рецепт для PWA, подходящий для большинства информационных сайтов.

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

Проверка режима навигации

Используйте резервную страницу offline.html только для запросов навигации, то есть загрузки страницы верхнего уровня. Для изображений, скриптов и других вложенных ресурсов позвольте запросам завершиться с ошибкой или используйте закэшированные копии соответствующих ресурсов — выдача HTML-страницы вместо отсутствующего изображения нарушит отображение страницы ещё сильнее.

Проектирование офлайн-страницы

Сделайте офлайн-страницу лёгкой: используйте минимум CSS и не добавляйте внешние ресурсы, если они тоже не закэшированы. Покажите логотип бренда, дружелюбное сообщение («Вы не подключены к сети — содержимое загрузится после восстановления соединения») и кнопку «Повторить», вызывающую location.reload().

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
  <h1>You&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

Кэширование посещённых страниц

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

Обновление версий кэша

При обновлении offline.html измените константу CACHE в sw.js (CACHE = "v2"). В событии активации удалите старые кэши: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Устаревшие офлайн-страницы сбивают с толку.

Проверка офлайн-режима

Панель Network в Chrome DevTools с ограничением «Офлайн» имитирует отсутствие сети. Переходите по приложению и проверьте, что для непосещённых маршрутов появляется офлайн-страница, а ранее посещённые страницы по-прежнему загружаются из кэша.

Сбой вложенных ресурсов

Если офлайн-страница ссылается на незакэшированный файл CSS, этот файл не загрузится без подключения к сети, и страница отобразится без стилей. Предварительно закэшируйте все ресурсы, необходимые офлайн-странице (CSS, логотип и шрифты), в обработчике установки.

За пределами статического офлайн-режима

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

Восстановление соединения

Чтобы обнаружить восстановление соединения на офлайн-странице, отслеживайте событие подключения к сети: window.addEventListener("online", () => location.reload()). Страница перезагрузится сразу после восстановления соединения — пользователю не придётся нажимать кнопку «Повторить».

Не вводите в заблуждение

Кнопки «Попробовать снова» должны действительно повторять попытку — вызывайте location.reload(), а не показывайте фиктивный индикатор, который ничего не делает. Честный интерфейс поддерживает доверие пользователя, а обманчивые офлайн-страницы быстро подрывают его, когда обман становится заметен.

Проверка знаний

Почему резервную страницу offline.html следует возвращать только для запросов навигации (e.request.mode === "navigate"), а не для всех запросов, завершившихся с ошибкой?

Ответь в интерактивном уроке

Итоги

Сервис-воркеры могут показывать специально оформленную резервную офлайн-страницу вместо стандартной ошибки браузера. Предварительно закэшируйте offline.html при установке и выдавайте её при сбое сети для запроса навигации. Сделайте страницу самодостаточной, меняйте версию кэша при обновлениях и отслеживайте событие подключения к сети для автоматической перезагрузки. Проверьте работу с помощью офлайн-ограничения в DevTools.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Резервная страница для офлайн-режима» бесплатный?

Да — полный текст урока «Резервная страница для офлайн-режима» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Резервная страница для офлайн-режима»?

Показывайте кэшированную резервную страницу, когда пользователь не подключён к сети Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Резервная страница для офлайн-режима»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy