Все уроки | Уровень
ПРОФИ
0%
0 / 19

Видео урока скоро будет доступно

Бонусный модуль · ПРОФИ

Урок 10

PWA — превращаем сайт
в мобильное приложение

Добавите манифест, service worker и иконки. Сделаете сайт устанавливаемым и работающим офлайн.

2 часа ПРОФИ

Цели урока

После этого урока вы:

  • Поймёте, что такое PWA (Progressive Web App) и зачем оно нужно.
  • Научитесь создавать манифест (manifest.json) для вашего сайта.
  • Добавите иконки для разных устройств.
  • Напишете service worker для кэширования и работы офлайн.
  • Сделаете свой сайт устанавливаемым на телефон.
  • Настроите автообновление приложения.

Что нам понадобится

  • Ваш сайт (лендинг или любой другой), опубликованный на GitHub Pages.
  • Генератор иконок (онлайн-сервис, например, favicon.io).
  • Доступ к DeepSeek (или другому AI) для генерации кода.
  • Телефон (Android или iOS) для проверки установки.

Важно: PWA работает только по HTTPS. GitHub Pages даёт HTTPS автоматически — ничего настраивать не нужно.

Что такое PWA?

PWA (Progressive Web App) — это сайт, который ведёт себя как нативное приложение. Его можно установить на телефон, он работает офлайн, отправляет уведомления и выглядит как обычное приложение в меню.

Аналогия: представьте, что вы создали сайт, а потом «обернули» его в обёртку приложения, и теперь пользователь может его установить как приложение — без App Store и Google Play.

Преимущества PWA:

  • Устанавливается на телефон без магазина.
  • Работает офлайн (или показывает кэшированную версию).
  • Быстро загружается (кэширование).
  • Занимает мало места.
  • Отправляет push-уведомления (как в приложении).

Из чего состоит PWA?

КомпонентНазначение
Manifest.jsonФайл с настройками приложения (название, иконки, цвета, стартовый URL).
Service WorkerJavaScript-файл, который работает в фоне. Кэширует файлы, обрабатывает офлайн-режим, уведомления.
ИконкиРазные размеры для разных экранов (iOS, Android, десктоп).
HTTPSОбязательное условие для PWA (GitHub Pages даёт HTTPS автоматически).

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

  1. Пользователь заходит на сайт.
  2. Браузер видит, что есть манифест и service worker.
  3. Браузер предлагает установить приложение.
  4. После установки приложение появляется в меню телефона.
  5. При открытии оно работает как отдельное приложение (без адресной строки).

Главное: все компоненты (манифест, service worker, иконки) — это просто файлы в вашем проекте. Вы добавите их за один урок.

Шаг 1.1–1.2. Создание манифеста

Manifest.json — это JSON-файл, который описывает ваше приложение: его имя, иконки, цвета, стартовую страницу.

Не нужно писать его вручную — попросите DeepSeek:

«Создай manifest.json для моего сайта [название сайта]. Название: "Моя Школа". Стартовый URL: /index.html. Цвет темы: #0a0c0f. Цвет фона: #0a0c0f. Добавь иконки размером 192x192 и 512x512 (ссылки на них добавлю позже).»

AI сгенерирует готовый файл — вы проверите его и сохраните в корень проекта.

Шаг 1.3. Проверка манифеста

Попросите DeepSeek показать пример manifest.json и объяснить, что означает каждый параметр:

«Покажи пример manifest.json для моего сайта [название сайта]. Объясни, что означает каждый параметр: name, short_name, description, start_url, display, theme_color, background_color, icons.»

Сравните с тем, что AI сгенерировал на предыдущем шаге, и убедитесь, что все ключевые параметры на месте.

Шаг 1.4–1.5. Подключение и иконки

1.4. Попросите DeepSeek добавить ссылку на манифест в <head> вашего index.html:

«Добавь в мой index.html в раздел head ссылку на файл manifest.json, который лежит в корне сайта.»

1.5. Создание иконок:

  • Перейдите на favicon.io или другой генератор.
  • Создайте иконки размеров 192x192 и 512x512.
  • Сохраните их в папку images вашего сайта.
  • Обновите пути в манифесте.

Шаг 2.1–2.2. Service Worker

Что такое Service Worker?

  • Это JavaScript-файл, который работает в фоне (независимо от страницы).
  • Он может кэшировать файлы, обрабатывать офлайн-запросы, отправлять уведомления.

Попросите DeepSeek сгенерировать service worker:

«Напиши service worker для моего сайта. Кэшируй все файлы (HTML, CSS, JS, изображения). При отсутствии сети показывай кэшированную версию. Используй Cache API. Название кэша: "my-site-v1". Добавь обработку ошибок и обновление кэша.»

Шаг 2.3. Проверка service worker

Попросите DeepSeek показать пример service worker и объяснить, что делает каждая часть кода:

«Покажи пример service worker (sw.js) для статического сайта. Объясни, что делает каждая часть: install, activate, fetch. Добавь комментарии в коде.»

Создайте файл sw.js в корне сайта и сохраните в него то, что сгенерировал AI.

Важно: пути в массиве urlsToCache должны точно совпадать с путями ваших файлов (регистр важен!).

Шаг 2.4. Регистрация Service Worker

Попросите DeepSeek добавить регистрацию service worker в конец index.html:

«Добавь в конец моего index.html (перед закрывающим тегом body) код регистрации service worker. Проверь, что браузер поддерживает service worker, и зарегистрируй файл /sw.js.»

Сохраните файл, обновите сайт и проверьте консоль браузера (F12 → Console).

Шаг 3.1. Проверка PWA в браузере

  1. Откройте ваш сайт в Chrome.
  2. Нажмите F12 → вкладка Application.
  3. Слева выберите Manifest — проверьте, что манифест загружается (название, иконки).
  4. Выберите Service Workers — проверьте, что SW зарегистрирован и активен.
  5. В разделе Cache Storage вы увидите кэшированные файлы.

Если не работает: убедитесь, что сайт открыт по https:// (или localhost), а sw.js лежит в корне сайта.

Шаг 3.2–3.3. Офлайн-режим и установка

Тест офлайн-режима:

  1. В Chrome откройте вкладку Network.
  2. Включите Offline (галочка).
  3. Обновите страницу — она должна загрузиться из кэша.

Проверка установки:

  1. В Chrome в адресной строке справа появится иконка установки (телефон с плюсом).
  2. Нажмите на неё и установите приложение.
  3. Приложение появится в меню вашего телефона (или на рабочем столе на десктопе).

Шаг 4. Настройка автообновления

Обновление кэша. Когда вы меняете сайт, нужно обновить кэш:

  • Измените CACHE_NAME в sw.js (например, с my-site-v1 на my-site-v2).
  • При следующем запуске новый SW активируется и удалит старый кэш (за это отвечает обработчик activate).

Автоматическое обновление. Можно добавить в sw.js обработчик для автоматического обновления — или просто перезагружать страницу после обновления кэша.

Практическое правило: каждый раз после изменений сайта меняйте версию в CACHE_NAME — тогда пользователи всегда получат свежую версию.

Шаг 5. Push-уведомления (опционально)

PWA может отправлять push-уведомления, как нативное приложение.

Для этого нужно настроить Firebase Cloud Messaging или Web Push API.

Это сложная тема, выходящая за рамки урока, но можно попробовать с AI:

«Напиши код для push-уведомлений в PWA. Используй Web Push API. Отправляй уведомление при новой заявке.»

Совет: не тратьте на это много времени сейчас — с этим заданием вы разберётесь в уроке 11 (Telegram-бот).

Домашнее задание

  1. Создайте manifest.json для вашего сайта.
  2. Сгенерируйте иконки (192x192, 512x512) и добавьте их.
  3. Напишите service worker (sw.js) и зарегистрируйте его.
  4. Проверьте, что PWA работает офлайн (отключите интернет и обновите страницу).
  5. Установите ваше PWA на телефон или десктоп.
  6. Обновите кэш (измените версию) и проверьте, что приложение обновляется.
  7. Закоммитьте и запушьте все изменения.

Что мы узнали за урок

  • Что такое PWA и зачем оно нужно.
  • Как создать манифест и иконки.
  • Как написать и зарегистрировать service worker.
  • Как сделать сайт устанавливаемым и работающим офлайн.
  • Как обновлять кэш и управлять версиями.

Главный итог: теперь ваш сайт превратился в полноценное приложение, которое можно установить на телефон и использовать даже без интернета!

Все уроки Поделиться результатом Следующий урок

Дополнительные материалы: prompts-bonus.md, checklists-bonus.md