PWAs: как сделать веб-приложение установляемым для джуниора

Вы когда-нибудь заходили на сайт с телефона, и он внезапно спросил: «Хотите добавить это приложение на экран?» - и вы нажали «Да», а потом открыли его, как будто это обычное нативное приложение? Это не магия. Это PWA. И да, вы можете сделать такое же, даже если только начали учить фронтенд.

PWA - это Progressive Web Application. Простыми словами: это обычный веб-сайт, который ведёт себя как приложение. Он работает офлайн, добавляется на экран телефона или рабочего стола, и не требует скачивания из App Store или Google Play. Для вас, как для джуниора, это отличная возможность создать что-то реальное, без необходимости учить Kotlin, Swift или React Native. Достаточно HTML, CSS и JavaScript - то, что вы уже знаете.

Что нужно, чтобы сайт стал PWA?

Для того чтобы ваш сайт стал установляемым, нужно выполнить всего три условия. Они не сложные, но обязательные.

1. Сайт должен работать по HTTPS. Без шифрования - никакого PWA. Это не вопрос удобства, а требование браузеров. Даже если вы разрабатываете локально, в продакшене HTTPS обязателен. Для тестирования можно использовать localhost - браузеры его разрешают.
2. Должен быть файл манифеста. Это JSON-файл, который говорит браузеру: «Это не просто сайт, это приложение». Он содержит название, иконку, цвет фона и даже то, как приложение должно открываться - полноэкранно или в окне.
3. Должен быть Service Worker. Это скрипт, который работает в фоне и кэширует ресурсы. Благодаря ему приложение работает без интернета, загружается мгновенно и не падает, если сеть пропала.

Всё. Больше ничего не нужно. Ни SDK, ни платформы, ни сложных инструментов. Только три файла: манифест, Service Worker и правильный HTML.

Как создать файл манифеста?

Файл манифеста - это простой JSON. Назовите его manifest.webmanifest и положите в корень проекта. Вот минимальный пример:

{
  "name": "Мой PWA-сайт",
  "short_name": "Мой PWA",
  "description": "Простое веб-приложение, которое работает без интернета",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3498db",
  "background_color": "#ecf0f1",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Обратите внимание на display: "standalone". Это значит: приложение запустится без адресной строки браузера - как настоящий апп. Без этого пользователь увидит браузерный интерфейс и не поверит, что это «приложение».

Иконки - важная часть. Браузер использует их для ярлыка. Лучше сделать две: 192×192 и 512×512 пикселей. Положите их в папку /icons/. Не забудьте: иконка должна быть PNG, без прозрачности - иначе на некоторых устройствах она будет выглядеть странно.

Подключите манифест в вашего index.html:

<link rel="manifest" href="/manifest.webmanifest" />

Всё. Браузер теперь знает, что ваш сайт - PWA. Но пока он не будет предлагать установку. Потому что ещё нет Service Worker.

Как написать Service Worker?

Service Worker - это JavaScript-файл, который работает в отдельном потоке. Он не имеет доступа к DOM, но может перехватывать запросы и кэшировать файлы. Создайте файл sw.js в корне проекта.

Вот простой рабочий пример:

// sw.js
const CACHE_NAME = 'pwa-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png',
  '/icons/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

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

Что здесь происходит?

• При установке (событие install) Service Worker открывает кэш с именем pwa-v1 и сохраняет туда все файлы, которые вы перечислили.
• Когда пользователь переходит на страницу (событие fetch), Service Worker сначала проверяет: есть ли этот файл в кэше? Если есть - отдаёт его. Если нет - идёт в сеть.

Это называется offline-first: сначала кэш, потом сеть. Пользователь не заметит разницы, даже если интернет пропал.

Теперь нужно зарегистрировать этот Service Worker в index.html:

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js');
    });
  }
</script>

Этот код проверяет, поддерживает ли браузер Service Worker, и регистрирует ваш скрипт. Просто. Без лишних библиотек.

Как проверить, что всё работает?

Откройте сайт в Chrome, нажмите F12, перейдите на вкладку Application.

Там вы увидите три секции:

• Manifest - проверьте, все ли поля заполнены, иконки загружены.
• Service Workers - убедитесь, что ваш sw.js зарегистрирован и активен.
• Caches - посмотрите, какие файлы лежат в кэше. Если вы видите там /index.html и иконки - значит, всё работает.

Если вы видите надпись «No matching service worker», значит, вы забыли зарегистрировать скрипт или он не лежит по правильному пути. Проверьте путь к sw.js и убедитесь, что он доступен по адресу https://ваш-сайт.com/sw.js.

Как пользователь устанавливает PWA?

После того как вы всё настроили, браузер сам начнёт предлагать установку. В Chrome это происходит, если:

• Пользователь посещает сайт минимум дважды с интервалом в 5 минут;
• Сайт отвечает по HTTPS;
• Есть манифест и Service Worker;
• Сайт показывает хотя бы одну страницу без интернета (через кэш).

Потом появится баннер: «Добавить на рабочий стол». Пользователь нажимает «Добавить» - и у него на экране появляется ярлык с вашей иконкой и названием. Он открывает его - и видит ваше приложение, без браузера, без адресной строки, без кнопки «Обновить».

На iOS в Safari всё немного иначе: пользователь нажимает «Поделиться» → «Добавить в Dock». Там тоже появится ярлык. Это не идеально, но работает.

Что делать, если не работает?

Вот самые частые ошибки, которые делают джуниоры:

• HTTPS не работает. Если вы тестируете на localhost - всё ок. Но если вы загрузили сайт на GitHub Pages, Netlify или Firebase - убедитесь, что он действительно по HTTPS. Проверьте адрес в браузере: должно быть https://, а не http://.
• Неправильный путь к файлам. Если манифест лежит в /public/manifest.webmanifest, а вы подключаете его как /manifest.webmanifest - он не найдётся. Проверьте путь в DevTools.
• Service Worker не регистрируется. Иногда браузер кэширует старый скрипт. Нажмите в DevTools на «Unregister» и «Update» в разделе Service Workers - и перезагрузите страницу.
• Иконки не загружаются. Убедитесь, что файлы PNG существуют и доступны. Попробуйте открыть их в новой вкладке: https://ваш-сайт.com/icons/icon-192x192.png. Если 404 - значит, вы их не загрузили на сервер.

Почему PWA - это идеально для джуниора?

Потому что вы не должны быть экспертом, чтобы сделать что-то полезное. Вы не пишете на Java или Swift. Вы используете то, что уже знаете: HTML, CSS, JavaScript. Вы не разбираетесь в API iOS или Android. Вы просто делаете сайт лучше.

Вы можете взять свой личный сайт, портфолио, блог или даже простой калькулятор и превратить его в приложение. Добавить ярлык на телефон - и люди начнут его использовать. Это реальный эффект. Без рекламы. Без маркетинга. Просто потому что оно удобно.

Вот реальный пример: разработчик из Казани сделал PWA для заметок. Он просто добавил манифест и Service Worker к своему старому сайту. Через неделю у него было 120 установок. Люди просто открывали его с экрана - и писали заметки без интернета. Он не продавал ничего. Не запускал рекламу. Просто сделал удобно - и люди сами пришли.

Что дальше?

Сейчас вы можете сделать PWA за пару часов. Но есть куда расти:

• Добавьте push-уведомления через Push API - чтобы напоминать пользователям о новостях.
• Используйте Background Sync - чтобы синхронизировать данные, когда сеть вернётся.
• Сделайте кастомную офлайн-страницу - вместо «ошибка сети» покажите красивую страницу с вашим логотипом и кнопкой «Попробовать снова».

Но начните с малого. Сделайте один PWA. Протестируйте его на телефоне. Покажите другу. Убедитесь, что он работает. И потом - сделайте второй. Потретий. Каждый раз вы будете понимать фронтенд глубже. Потому что PWA - это не фича. Это способ мышления: «Как сделать так, чтобы пользователь не заметил, что это веб-приложение?»