В конце совета — ссылка на код из примера и инструкция, как поэкспериментировать с ним самостоятельно
Техническая возможность сделать сайт доступным без интернета существует много лет, но в быту встречается редко. У обычных сайтов просто нет сценариев, ради которых рационально было бы добавлять и поддерживать функцию работы в оффлайне.
В конце совета — ссылка на код из примера и инструкция, как поэкспериментировать с ним самостоятельно
Но в условиях замедления или отключения интернета, ценность оффлайн‑режима серьёзно повышается.
Разберём общую модель работы оффлайна на простом примере. Моя цель сегодня — показать саму возможность, а не дать готовый код для внедрения на ваш сайт. Код примера упрощённый и потребует доработки при использовании в серьёзных проектах. В конце совета будут ссылки для углублённого изучения темы.
Теория
Чтобы сайт работал в оффлайне, читателю всё‑таки придётся разок зайти туда со включённым интернетом. При первом заходе сохраним в память браузера — кэш — файлы сайта: страницы, стили, медиафайлы. При повторном заходе — возьмём эти файлы из кэша и покажем сохранённую версию страницы.
Для всего этого понадобится сервис‑воркер — особый Яваскрипт, который работает не внутри страницы, а фоном в браузере. Сервис‑воркер может хранить кэш, даже когда вы закрыли страницу, а главное — умеет перехватывать запросы страницы в сеть. Этим мы и воспользуемся, чтобы возвращать файлы из кэша.
Практика, страница билета в кино
Сверстаем страницу билета в кино, которая будет открываться без интернета. Не буду останавливаться подробно на вёрстке, вы можете скачать пример и изучить код самостоятельно. Получилось что‑то такое:
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- … -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="ticket">
<div class="ticket-label">…</div>
<h1 class="ticket-title">…</h1>
<div class="ticket-info">
…
</div>
<img class="ticket-qr" src="./qr.svg">
</div>
</body>
</html>
Сервис‑воркеры поддерживаются всеми браузерами, кроме совсем древних. Если воркер не поддерживается, ничего не взорвётся, но и без интернета сайт работать не будет
Напишем парочку заклинаний код воркера в файле offline-worker.js и подключим его к странице. Воркер подключается не как обычный Яваскрипт‑файл тегом script, а особой конструкцией navigator.
Сервис‑воркеры поддерживаются всеми браузерами, кроме совсем древних. Если воркер не поддерживается, ничего не взорвётся, но и без интернета сайт работать не будет
offline-worker.js// Уникальное имя кэша const CACHE_NAME = 'my-ticket-page' // Обработчик соединения страницы с воркером self.addEventListener('install', e => { e.waitUntil( // Создаём кэш с уникальным именем и кэшируем нужные файлы (пути относительно корня сайта!) caches .open(CACHE_NAME) .then(cache => cache.addAll([ '/index.html', '/style.css', '/qr.svg' ])) .then(() => self.skipWaiting()) ) }) // Обработчик запросов ресурсов со страницы self.addEventListener('fetch', e => { e.respondWith( // Проверяем, есть ли запрашиваемый ресурс в кэше caches.match(e.request).then(cachedResponse => { // Если ресурс есть в кэше, берём оттуда if (cachedResponse) return cachedResponse // Если ресурс не в кэше, остаётся пробовать получить его по сети return fetch(e.request).then(netResponse => { if (netResponse.ok) { caches.open(CACHE_NAME).then(cache => cache.put(e.request, netResponse.clone()) ) } return netResponse }) }) ) })
index.html<!DOCTYPE html> <html lang="ru"> <head> <!-- … --> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- … --> <script> // Если браузер поддерживает сервис-воркеры, подключаем наш воркер if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./offline-worker.js'); } </script> </body> </html>
Минимальный вариант оффлайн‑страницы готов. Если разместить этот код на сервере и один раз открыть страницу, в будущем она будет открываться без интернета, пока вы не почистите кэш браузера.
Я разместил пример на своём сайте, попробуйте открыть ссылку, выключить интернет, затем снова перейти по ссылке: petrowww.ru/lab/offline/.
Попробовать самостоятельно
Код примера можно скачать по ссылке, но воркер будет работать только на хостинге с установленным ССЛ‑сертификатом. Как разместить страницу на таком хостинге — в моём прошлом совете.
Ограничения и нюансы
Очевидны технические ограничения таких оффлайн‑страниц:
на страницу придётся сначала зайти с интернетом;
если очистить кэш браузера, страница перестанет работать оффлайн;
кэш может устареть.
При добавлении оффлайн‑страниц в свой проект, продумайте все сценарии их использования, механизмы актуализации кэша и краевые ситуации, чтобы не запутать пользователей и не создать уязвимости: например, когда покупатель кэширует билет и возвращает за него деньги.
Для углублённого изучения темы, дополнительные материалы в порядке повышения сложности:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.