Как веб-игра работает без интернета

Ты собрал свою Змейку, выложил на GitHub Pages и дал ссылку другу. Потом сел в метро, связь пропала, и ты случайно открыл игру снова — ожидая белую страницу с ошибкой. А она запустилась. Управление работает, рекорд на месте, даже звук есть. Как сайт может работать без интернета?

Разберёмся, почему веб-игра открывается офлайн, что такое PWA, как устроено кеширование, что происходит при установке на экран и как повторить это в своём проекте. Всё простыми словами и на примере Змейки.

Обычный сайт без сети не работает

Привычный сайт живёт на сервере — удалённом компьютере где-то в дата-центре. Когда ты вводишь адрес в браузере, происходит цепочка действий. Сначала браузер узнаёт IP-адрес сервера через систему DNS — это как посмотреть номер телефона по фамилии в справочнике. Потом он посылает запрос: «Пришли мне страницу, картинки и код». Сервер отвечает, браузер собирает всё воедино, и ты видишь игру.

Пока интернет есть, этот обмен происходит при каждом открытии. Если запустить Змейку во второй раз, браузер снова идёт за файлами — пусть и быстро, потому что часть из них уже временно лежит в оперативной памяти. Но если вырубить Wi-Fi или зайти в зону без связи, запрос не доходит до сервера. Браузер не получает HTML, CSS и JavaScript — и показывает ошибку. Игра не загружается, потому что её просто неоткуда взять.

Это как библиотека, где каждую книгу тебе приносит библиотекарь. Пока он на месте — читаешь. Ушёл на обед — сиди и жди. Обычный сайт не может работать без связи, потому что у него нет собственной копии книги.

PWA: сайт, который берёт файлы с собой

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

За это отвечают два ключевых файла. Первый — service worker. Это небольшой сценарий на JavaScript, который браузер запускает в фоне. Он сидит между страницей и интернетом и перехватывает запросы. Если связь есть — service worker может обновить файлы. Если связи нет — он отдаёт сохранённые копии из кеша. Браузеру всё равно, откуда пришли HTML, CSS и JavaScript, лишь бы они пришли.

Второй файл — manifest.json. В нём записаны название приложения, иконки, цвета и настройки отображения. Именно он говорит браузеру: «Этот сайт можно установить как приложение, вот ему имя и иконка». Без манифеста кнопка «Установить» просто не появится.

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

Установка на экран — это не магазин приложений

Когда сайт стал PWA, браузер показывает кнопку «Установить» или предлагает «Добавить на главный экран». Это не то же самое, что скачивание из App Store или Google Play. Ты не ставишь отдельную программу. Ты просто создаёшь ярлык, который открывает игру в собственном окне без адресной строки.

После установки Змейка выглядит как обычное приложение: иконка на рабочем столе или в меню, запуск по тапу, возможность работы офлайн. Но под капотом это всё ещё твой сайт. Если ты обновишь код на GitHub Pages, а пользователь потом откроет игру с интернетом, service worker подтянет новую версию. Без интернета он покажет ту, что сохранил в прошлый раз.

Установка доступна в современных Chrome, Edge, Safari и других браузерах. На компьютере обычно это пункт меню с изображением монитора и стрелкой. На телефоне — кнопка «Поделиться» → «На экран „Домой“» в iOS или «Установить приложение» в Android. Если ярлык больше не нужен, его можно удалить как любую другую иконку: игра при этом не пропадёт, её по-прежнему можно открыть по ссылке в браузере.

Что конкретно кешируется

Не весь сайт сохраняется одинаково. Есть два типа содержимого, и важно понимать разницу.

Статические файлы — это то, что меняется редко: HTML-разметка, CSS-стили, JavaScript-код, картинки, звуки, шрифты. Именно их обычно кеширует service worker. Они занимают немного места и позволяют игре выглядеть и работать одинаково каждый раз.

Динамические данные — это то, что создаёт пользователь во время игры: текущий счёт, рекорд, настройки сложности, выбранный скин. В Змейке такие данные обычно хранятся в localStorage — встроенном хранилище браузера. Оно работает независимо от интернета, поэтому офлайн-режим не сбросит твой рекорд. Но localStorage хранится только на одном устройстве. Если захочешь видеть общий рекорд на телефоне и компьютере, понадобится серверная база данных, например Supabase.

Как проверить офлайн-режим на своей Змейке

Лучший способ понять PWA — попробовать самому. Вот простой тест, который займёт две минуты:

1. Открой свою Змейку в браузере при включённом интернете. Дождись, пока игра полностью загрузится.
2. Включи на устройстве режим полёта или отключи Wi-Fi и мобильный интернет.
3. Закрой вкладку и снова открой ссылку на игру. Или тапни по иконке, если уже установил.
4. Если игра запустилась — поздравляю, у тебя работает офлайн-кеширование.

Если вместо игры белый экран или ошибка, значит service worker ещё не настроен. В Claude Code можно попросить: «Добавь PWA для моей Змейки: manifest.json, service worker, иконки и возможность установки на экран». ИИ сгенерирует нужные файлы, а тебе останется только проверить, что игра кешируется.

Ещё один способ проверить — инструменты разработчика в Chrome. Нажми F12, перейди во вкладку Application, открой раздел Service Workers. Там видно, зарегистрирован ли worker, какие файлы попали в кеш и включена ли возможность работы офлайн. Это полезно, когда игра ведёт себя странно: например, показывает старую версию после обновления кода.

Что PWA умеет, а чего не делает

Полезно знать границы технологии, чтобы не ждать от неё чуда.

PWA умеет:

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

PWA не делает:

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

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

Заключение

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

Для твоей Змейки это означает: метро, самолёт, дача или плохой мобильный интернет — не помеха. Игра откроется, рекорд сохранится, а ты сможешь показать друзьям результат без слов «подожди, у меня сеть пропала». Если ещё не добавлял PWA в проект — попробуй. Это одна из тех функций, которые сразу заметны и приятны пользователю, а для разработчика требуют минимума кода.