Установить приложение на сайт: как добавить кнопку PWA за 30 минут

Хотите установить приложение на сайт без разработки отдельного мобильного приложения? Добавьте PWA: manifest, HTTPS и кнопку установки. Ниже покажем код и пошаговую настройку.

Что такое PWA и зачем устанавливать приложение на сайт

PWA (Progressive Web App) — это сайт с функциями приложения.

Пользователь открывает страницу в браузере. Затем он может установить сайт на устройство. После установки появляется отдельная иконка.

Приложение запускается почти как обычная программа. Браузер при этом остаётся основой веб-приложения.

PWA подходит для:

• интернет-магазинов;
• каталогов услуг;
• личных кабинетов;
• сервисов бронирования;
• корпоративных порталов;
• новостных проектов;
• образовательных платформ;
• SaaS-сервисов.

Главное преимущество — не нужно создавать отдельное приложение для каждой платформы.

При этом PWA не превращает любой сайт в полноценное мобильное приложение. Возможности зависят от браузера и операционной системы. Поддержка установки также различается по платформам.

Что получает пользователь

После установки сайт может:

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

Последний пункт требует отдельной настройки service worker. Сам manifest не создаёт полноценный офлайн-режим.

Поэтому задача «установить приложение на сайт» состоит из нескольких частей.

Что нужно для установки PWA

Перед добавлением кнопки проверьте базовую инфраструктуру.

Вам понадобятся:

1. HTTPS.
2. Web App Manifest.
3. Иконки приложения.
4. JavaScript для кнопки установки.
5. Service worker — если нужен кеш и офлайн-режим.
6. Корректная настройка сайта и WordPress.

Для Chromium-браузеров manifest должен содержать как минимум название, иконки, start_url и параметры отображения. В частности, используются иконки 192×192 и 512×512 пикселей. Сайт должен работать через HTTPS. Для разработки подходит localhost.

Важно: наличие manifest само по себе не гарантирует появление кнопки. Браузер сам определяет, можно ли предложить установку.

Установить приложение на сайт: создаём manifest

Начнём с файла manifest.json.

Создайте его в корне сайта:

/manifest.json

Пример простого manifest:

{
  "name": "Компьюти",
  "short_name": "Компьюти",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Здесь важны несколько параметров.

name

Полное название приложения.

Именно его браузер может показывать пользователю при установке.

short_name

Короткое название для интерфейса устройства.

Оно пригодится, если полное имя слишком длинное.

start_url

Страница, которая открывается после запуска приложения.

Обычно используют /.

display

Параметр standalone убирает стандартный интерфейс браузера.

В результате сайт больше похож на отдельное приложение.

icons

Иконки нужны для отображения приложения на устройстве.

Подготовьте минимум два размера:

• 192×192;
• 512×512.

Браузеры используют manifest и его данные при установке PWA.

Подключаем manifest к WordPress

Теперь браузер должен увидеть созданный файл.

В <head> сайта добавьте:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">

В WordPress это можно сделать несколькими способами.

Например, через файл темы header.php.

Но такой способ требует осторожности. При обновлении темы изменения могут потеряться.

Лучше использовать:

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

Для кастомной темы можно добавить код через wp_head:

add_action('wp_head', function () {
    echo '<link rel="manifest" href="/manifest.json">';
    echo '<meta name="theme-color" content="#ffffff">';
});

Так WordPress будет добавлять необходимые теги в <head>.

Добавляем кнопку «Установить приложение»

Теперь создадим интерфейс.

Добавьте кнопку в нужное место сайта:

<button id="install-app" hidden>
  Установить приложение
</button>

Изначально кнопка скрыта.

Это важно.

Не каждый браузер поддерживает одинаковый сценарий установки. Поэтому не стоит показывать пользователю кнопку, которая не работает.

Дальше нужен JavaScript.

let deferredPrompt = null;

const installButton = document.querySelector('#install-app');

window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();

  deferredPrompt = event;

  installButton.hidden = false;
});

installButton.addEventListener('click', async () => {
  if (!deferredPrompt) {
    return;
  }

  deferredPrompt.prompt();

  const { outcome } = await deferredPrompt.userChoice;

  console.log(`Результат установки: ${outcome}`);

  deferredPrompt = null;
  installButton.hidden = true;
});

window.addEventListener('appinstalled', () => {
  deferredPrompt = null;
  installButton.hidden = true;
});

Логика здесь простая.

Браузер сообщает сайту о возможности установки через beforeinstallprompt.

Мы сохраняем событие.

Затем показываем кнопку.

После клика вызываем системное окно установки.

После этого кнопку скрываем.

Почему нельзя сразу показать кнопку

Событие beforeinstallprompt появляется только при выполнении условий установки.

Кроме того, событие поддерживается не всеми браузерами.

Поэтому правильный сценарий выглядит так:

Пользователь открывает сайт → браузер определяет возможность установки → появляется кнопка → пользователь нажимает её → открывается системный prompt.

Событие beforeinstallprompt сейчас имеет ограниченную поддержку и особенно важно для Chromium-браузеров. На iOS такой способ вызвать собственный install prompt не работает.

Нужен ли service worker для установки PWA

Это частый вопрос.

Короткий ответ: не всегда.

Современные требования к устанавливаемой PWA не сводятся к обязательному наличию service worker. Manifest и HTTPS имеют ключевое значение для установки. Service worker нужен прежде всего для дополнительных возможностей.

Например, он позволяет организовать:

• кеширование страниц;
• загрузку ресурсов из кеша;
• работу при временном отсутствии сети;
• ускорение повторных посещений;
• отдельную стратегию обработки запросов.

Простейший service worker:

const CACHE_NAME = 'site-cache-v1';

const FILES_TO_CACHE = [
  '/',
  '/offline.html',
  '/wp-content/themes/theme/style.css'
];

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

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

Затем зарегистрируйте его:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

Для коммерческого сайта мы рекомендуем не копировать этот пример без проверки.

Кеширование WordPress требует отдельной стратегии. Особенно если сайт использует корзину, авторизацию или динамические страницы.

Как добавить PWA на WordPress без поломки сайта

Если сайт уже работает, не нужно сразу менять архитектуру.

Разделите задачу на этапы:

Шаг 1. Проверяем HTTPS

Адрес должен открываться через:

https://example.ru

Если сайт доступен только по HTTP, сначала настройте SSL-сертификат.

Шаг 2. Создаём manifest

Добавляем:

/manifest.json

Проверяем пути к иконкам.

Шаг 3. Подключаем manifest

Добавляем ссылку в <head>.

Шаг 4. Создаём кнопку

Используем скрытую кнопку:

<button id="install-app" hidden>
  Установить приложение
</button>

Шаг 5. Подключаем JavaScript

Обрабатываем:

beforeinstallprompt

Затем вызываем:

deferredPrompt.prompt();

Шаг 6. Проверяем установку

Тестируем сайт на разных устройствах.

Не ограничивайтесь одним компьютером.

Почему кнопка может не появиться

Ситуация распространённая.

Разработчик добавил код. Но кнопки нет.

Это не обязательно ошибка JavaScript.

Причина может быть в условиях установки.

Проверьте:

• сайт работает через HTTPS;
• manifest доступен;
• JSON не содержит ошибок;
• указаны корректные иконки;
• start_url доступен;
• display настроен;
• manifest подключён в HTML;
• сайт ещё не установлен;
• текущий браузер поддерживает нужный сценарий;
• браузер считает сайт устанавливаемым.

Если приложение уже установлено, beforeinstallprompt может не появиться. То же происходит, если сайт не проходит условия установки.

Частая ошибка №1: неправильный путь к иконке

В manifest написано:

"src": "/icons/icon-512.png"

Но файл лежит здесь:

/images/icon-512.png

Браузер не найдёт изображение.

Частая ошибка №2: manifest открывается с ошибкой

Проверьте:

https://example.ru/manifest.json

Файл должен возвращаться без ошибки сервера.

Частая ошибка №3: кнопка всегда видна

Не делайте так:

#install-app {
  display: block;
}

Кнопка должна появляться только тогда, когда установка доступна.

Иначе посетитель может увидеть неработающий элемент.

Сколько времени занимает настройка PWA

Для простого сайта базовая реализация действительно может занять около 30 минут.

Условный план работ:

Задача	Время
Проверка HTTPS	2–5 минут
Создание manifest	5 минут
Подготовка иконок	5 минут
Добавление кнопки	3 минуты
JavaScript	5 минут
Проверка	5–10 минут

Итого — примерно 25–35 минут для подготовленного проекта.

Но это только базовая установка.

Если нужен полноценный PWA-функционал, времени потребуется больше.

Отдельно настраиваются кеширование, офлайн-режим, обновление service worker, аналитика и сценарии для разных платформ.

Что меняется на iPhone

Здесь есть важное ограничение.

Собственная кнопка через beforeinstallprompt не является универсальным решением для iOS. На iPhone и iPad пользовательский сценарий установки отличается.

Поэтому для iOS лучше предусмотреть отдельную подсказку.

Например:

Чтобы установить приложение, откройте меню браузера и выберите добавление сайта на экран «Домой».

Не показывайте такую подсказку всем посетителям.

Определяйте платформу и показывайте инструкцию только в подходящем сценарии.

Кейсовый сценарий: интернет-магазин

Представим интернет-магазин на WordPress и WooCommerce.

Проблема: пользователь часто возвращается на сайт с телефона. Но каждый раз открывает браузер и вводит адрес.

Решение: добавляем PWA и кнопку «Установить приложение».

Пользователь устанавливает сайт.

На экране появляется иконка магазина.

После запуска открывается мобильная версия сайта.

Если дополнительно настроить service worker, можно ускорить повторную загрузку отдельных ресурсов и создать офлайн-сценарии.

Результат: пользователю проще возвращаться к магазину. При этом студии не приходится создавать отдельное нативное приложение с нуля.

Но конкретный эффект зависит от аудитории, интерфейса и сценариев использования.

Как проверить PWA перед публикацией

Перед запуском пройдите чек-лист.

Чек-лист разработчика

• Сайт работает через HTTPS.
• manifest.json доступен.
• Manifest подключён в <head>.
• Указан name.
• Указан short_name.
• Указан start_url.
• Настроен display.
• Есть иконка 192×192.
• Есть иконка 512×512.
• Кнопка скрыта по умолчанию.
• Обрабатывается beforeinstallprompt.
• После установки кнопка исчезает.
• Проверен мобильный браузер.
• Проверен десктопный браузер.
• Отдельно проверен сценарий iOS.
• Service worker проверен, если он используется.

Стоит ли добавлять PWA на сайт

PWA имеет смысл там, где пользователи регулярно возвращаются на сайт.

Особенно полезен такой подход для:

• интернет-магазинов;
• онлайн-сервисов;
• личных кабинетов;
• каталогов;
• систем бронирования;
• образовательных проектов.

Для обычного сайта-визитки PWA может не дать заметной пользы.

Здесь важно оценить поведение аудитории до разработки.

Что может сделать веб-студия «Компьюти»

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

Но PWA — это не только одна кнопка.

Если сайт уже работает на WordPress, важно сохранить его стабильность.

Мы можем:

• провести технический аудит сайта;
• подготовить manifest;
• создать интерфейс установки;
• настроить JavaScript;
• подключить service worker;
• настроить кеширование;
• проверить мобильные сценарии;
• адаптировать решение под WordPress;
• протестировать PWA на разных браузерах;
• устранить конфликты с темой и плагинами.

Сценарий работы простой.

Вы сталкиваетесь с проблемой: пользователям неудобно возвращаться на сайт с мобильного устройства.

Мы решаем её: добавляем PWA и корректный сценарий установки.

Результат: сайт можно установить на устройство и запускать через отдельную иконку.

Заключение

Установить приложение на сайт можно без создания отдельного мобильного приложения. Для базового сценария достаточно HTTPS, manifest, корректных иконок и JavaScript для кнопки установки.

При этом PWA требует проверки браузеров и платформ. Для полноценного решения стоит отдельно настроить service worker, кеширование и мобильные сценарии.

Если ваш WordPress-сайт уже работает и вы хотите установить приложение на сайт, специалисты «Компьюти» помогут оценить проект и подобрать подходящую реализацию PWA.