Плагин для WordPress
WP PWA Generator — плагин для WordPress, который превращает сайт в устанавливаемое приложение и собирает его в отдельную папку на этом же сайте. Без composer, без npm, без чужих библиотек и без внешних сервисов.
zip, 515,7 КБ · GPL-2.0-or-later · PHP 7.4+ · WordPress 5.8+
Зачем он нужен
Ваш сайт на WordPress уже есть. Приложения у него нет — а посетитель хочет поставить иконку на домашний экран, открывать её без адресной строки и читать вас в метро.
Сделать это руками — значит написать манифест, написать service worker, нарезать полтора десятка иконок под все платформы и собрать оболочку приложения. Владелец сайта этого не умеет и не должен уметь.
Плагин делает это сам. После активации в админке появляется раздел PWA с девятью вкладками настроек. Плагин создаёт на сайте папку — по умолчанию ваш-сайт.ru/app/, а если в корень писать нельзя, wp-content/uploads/pwa-app/ — и кладёт туда самостоятельное приложение: index.html, service worker, manifest.webmanifest, полный набор иконок и splash-экранов, стили и скрипты. Содержимое приложение берёт с этого же сайта через WP REST API.
Посетитель заходит на ваш-сайт.ru/app/, браузер предлагает установить, иконка появляется на домашнем экране.
Первое приложение появляется само
Сразу после активации плагин собирает приложение на умолчаниях: имя и описание — из настроек сайта, иконка — из логотипа сайта или нарисованная из первой буквы названия. Вы открываете админку и обнаруживаете работающее приложение, а не пустой экран с кнопкой. Кнопка «Собрать приложение» нужна для пересборки после правок.
Что получает посетитель
- Лента материалов сайта с подгрузкой по мере прокрутки.
- Экран материала: заголовок, картинка, текст, автор, дата, рубрики.
- Выбранные вами страницы сайта в меню приложения.
- Поиск по сайту, рубрики и метки как фильтр ленты.
- Чтение офлайн: то, что уже открывалось, открывается без сети.
- Понятный экран «Нет сети» вместо белого пятна.
- Приглашение установить приложение — кнопка на Android и на компьютере, подсказка «Поделиться → На экран „Домой“» на iPhone и iPad.
- Приватный и парольный контент посетителю не показывается: приложение берёт только то, что REST отдаёт неавторизованному гостю.
Шесть возможностей, которые включаются галочкой
Все выключены по умолчанию. Выключенная возможность не грузит в приложение ни байта своего кода.
-
Уведомления
Web Push на ваших собственных ключах VAPID. Без Firebase, без посредников, без чужого аккаунта. Форма отправки, автоотправка при выходе новой записи, отчёт «доставлено / отказано / протухло», очередь партиями, центр уведомлений внутри приложения.
-
Расширенный офлайн
Стратегия и срок хранения на каждый вид ресурса, лимиты по числу файлов и по объёму, список адресов для предзагрузки, кнопка «Сохранить для чтения» у материала и раздел «Сохранённое» в приложении.
-
Биометрия
Две разные вещи, включаются раздельно: замок приложения (открыть отпечатком или лицом) и вход в аккаунт сайта по passkey, без пароля. Вход паролем остаётся всегда.
-
Геолокация и карты
Раздел «Рядом» — материалы, отсортированные по расстоянию; карта на тайлах OpenStreetMap, без ключей и платных сервисов; поля широты и долготы в редакторе записи.
-
Отложенные действия
Действие, сделанное без сети, кладётся в очередь на устройстве и уезжает, когда сеть появится. Один раз, а не дважды.
-
Иконка нейросетью свой ключ
Опишите иконку словами — её нарисуют. Нужен свой ключ, платный; всё остальное в плагине работает без него.
Как рассказать посетителям, что приложение есть
Раздел «Продвижение» — пять способов, и все выключены по умолчанию. Плагин ничего не создаёт и не публикует сам: страница и запись появляются по вашей кнопке и остаются черновиками, пока вы их не опубликуете.
- Блок в любое место сайта — кнопка установки и инструкции для iPhone, Android и компьютера. Шорткодом
Приложение этого сайта
Поставьте его на домашний экран: материалы открываются быстрее и читаются даже без интернета.
Наведите камеру телефона на этот код. Как поставить приложение на своё устройство
iPhone и iPad
- Откройте приложение в Safari по кнопке выше.
- Нажмите «Поделиться» — квадрат со стрелкой вверх, внизу экрана.
- Пролистайте список вниз и выберите «На экран „Домой“».
- Нажмите «Добавить» справа вверху — значок появится рядом с остальными.
На iPhone это умеет только Safari: в других браузерах пункта «На экран „Домой“» не будет.
Android
- Откройте приложение в Chrome по кнопке выше.
- Нажмите кнопку с тремя точками справа вверху.
- Выберите «Установить приложение» или «Добавить на главный экран».
- Подтвердите «Установить».
Часто Chrome предлагает установку сам — полоской внизу экрана. Нажать её достаточно, остальные шаги тогда не нужны.
Компьютер и ноутбук
- Откройте приложение в Chrome или Edge по кнопке выше.
- Справа в адресной строке появится значок установки — монитор со стрелкой вниз.
- Нажмите его и подтвердите «Установить».
- Приложение откроется своим окном, без адресной строки и вкладок.
Значка не видно — откройте меню браузера и найдите там пункт «Установить». В Safari на Mac это меню «Файл» → «Добавить в Dock».
- Готовая страница «Как установить приложение» — создаётся по кнопке, черновиком.
- Черновик новости-анонса с готовым текстом: публикуете вы, а не плагин.
- QR-код на приложение — для случая «читаю с компьютера, а ставить надо на телефон». Рисуется на вашем же сайте, без обращения к чужим сервисам.
- Пункт меню, ведущий на приложение.
Созданные страница и запись остаются на сайте после удаления плагина: это содержимое вашего сайта, а не плагина.
Иконки
Загрузите свою картинку — из неё сами нарежутся все размеры, которых требуют платформы:
- 48
- 72
- 96
- 128
- 144
- 152
- 167
- 180
- 192
- 256
- 384
- 512
- maskable
- apple-touch
- favicon
И девять splash-экранов под актуальные экраны iPhone и iPad.
Картинки нет — плагин нарисует иконку сам: из логотипа сайта, а если и его нет — из первой буквы названия на фоне вашего фирменного цвета. Предпросмотр показывает, как иконка будет выглядеть круглой, квадратной и maskable с безопасной зоной, — до сборки, а не после.
Ни одной зависимости
В плагине нет composer, нет npm, нет vendor/, нет node_modules/, нет ни одного обращения к CDN и ни одной чужой JavaScript-библиотеки в собранном приложении. Всё построено на функциях самого PHP и API WordPress.
Это не экономия, а решение. Composer есть далеко не на всяком хостинге, а плагин должен работать на любом. Сборщик нельзя запустить на вашем хостинге — значит его не должно быть вообще: файлы, которые лежат в архиве, это ровно те файлы, которые поедут на сайт. И каждая внешняя библиотека — это чужой код, который поехал бы в приложение на вашем сайте.
Что нужно от сервера
Таблица прокручивается вбок.
| Требование | Зачем | Если нет |
|---|---|---|
| PHP 7.4 и новее | сам плагин | плагин не активируется |
| WordPress 5.8 и новее | WP_Filesystem, редактор изображений, REST | плагин не активируется |
| HTTPS | без него браузер не установит приложение и не включит service worker | сборка заблокирована, на вкладке «Состояние» красная строка |
| GD или Imagick | нарезка иконок и splash-экранов | иконки не нарежутся, сборка останавливается |
| openssl | уведомления и вход по ключу | недоступны эти две возможности, остальное приложение работает |
право записи в корень сайта или в wp-content/uploads/ |
папка приложения | собрать некуда, об этом сказано на вкладке «Состояние» |
Ничего из этого плагин не проверяет «на глазок»: все шесть проверок — отдельные строки на вкладке «Состояние», словами, а не кодами ошибок.
Ваши данные остаются вашими
Плагин не отправляет никуда ни статистику, ни содержимое сайта. Единственный внешний сервис за весь проект — рисование иконки нейросетью, и оно выключено по умолчанию, работает по вашему ключу и только по нажатию кнопки.
Ключ и приватный ключ уведомлений хранятся в базе вашего сайта, не грузятся на каждом запросе, в интерфейсе замаскированы, в экспорт настроек не попадают и в собранное приложение не попадают: сборка останавливается, если ключ вдруг оказался в файле, который вот-вот запишется в открытую папку.
Установка
- Скачайте архив — кнопка в начале страницы и внизу.
- В админке своего сайта: Плагины → Добавить новый → Загрузить плагин, выберите скачанный zip, нажмите Установить.
- Нажмите Активировать. Ничего больше делать не нужно: ни
composer install, ниnpm install, ни сборки. - Плагин соберёт первое приложение сам. Откройте PWA → Состояние — там ссылка на него.
- Пройдите вкладки Основное, Внешний вид, Иконка и Контент, поправьте что хотите и нажмите Собрать приложение.
Если сборка не удалась, на вкладке «Состояние» написано, на каком из семи шагов и почему.
Обновления
Новые версии выкладываются здесь же, на этой странице. Плагин узнаёт о них сам и показывает обычное «Доступно обновление» на экране Плагины вашего сайта — обновление ставится вашей кнопкой, обычным механизмом WordPress. Никакого своего установщика в плагине нет.
Что при этом происходит и чего не происходит:
- раз в двенадцать часов плагин скачивает с этого сайта маленький файл с номером последней версии. Это обычное скачивание файла: ни адреса вашего сайта, ни статистики, ни ключей в запросе нет;
- файл и архив принимаются только по https. По http обновление не скачивается вовсе — это исполняемый код, и подменить его по дороге не должно быть возможно;
- ответ проверяется: не тот формат, чужой плагин, версия не выше вашей — обновление не предлагается;
- проверку можно выключить: PWA → Дополнительно → «Проверять обновления плагина». Тогда плагин не спрашивает ни о чём и никого.
Адрес, откуда берутся обновления, виден на вкладке PWA → Состояние, вместе с датой последней проверки и тем, что ответил сервер. По умолчанию это https://cmediatech.ru/PWA/wp-pwa-generator.json. Если вы держите свою копию раздачи, адрес задаётся строкой в wp-config.php:
define( 'WPPWA_UPDATE_URL', 'https://ваш-сайт.ru/plugin/wp-pwa-generator.json' );Константа сильнее настройки, настройка сильнее умолчания.
Удаление
По умолчанию удаление плагина ничего не уносит: ни настройки, ни подписки, ни собранную папку. Если хотите, чтобы уносило, включите Дополнительно → «Удалить все данные при удалении плагина» до того, как удалите плагин.
Чего плагин не делает
- не превращает сам сайт в PWA — приложение живёт в отдельной папке, тема сайта не трогается;
- не заменяет магазин приложений: это web-приложение, а не сборка для App Store или Google Play;
- не пишет ничего в чужие плагины и не требует ни одного внешнего сервиса для работы.
Лицензия и поддержка
Автор — Александр Холодов. GPL-2.0-or-later: исходный код открыт, зависимостей нет, весь код в архиве — тот же, что работает у вас на сайте.
Другой плагин автора — Cookie Consent Mascot: согласие на cookie с персонажем, который не пускает счётчики до нажатия «Разрешаю». Весь список — на странице Плагины.
