Сделать на сайте кнопку Добавить на главный экран?
В мобильном хроме (андроид) есть стандартная опция в меню Добавить на гл. экран. Ярлык-ссылку любого сайта или страницы таким образом можно добавить на рабочий стол смартфона. Подскажите, как это реализовать на сайте (wordpress) через кнопку/ссылку?
Т.е. по сути нужно продублировать стандартную функцию хрома, типа что-то вроде кнопки Поделиться. Интересует именно простой ярлык-ссылка сайта, при нажатии на которую открывается хром и загружается сайт. Видел информацию по PWA, а вот как простой ярлык реализовать - ничего в сети не нашел.
Дополнительно
Ты про это, что-ли?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Обычной ссылкой или кнопкой создать ярлык сайта на рабочем столе Android нельзя. Это ограничение браузера: сайт не получает прямого доступа к домашнему экрану пользователя. Пункт Chrome «Добавить на главный экран» можно только инициировать через механизм установки PWA, когда сам браузер считает сайт подходящим для установки. Поэтому простой вариант без PWA технически не реализуется.
Минимальные условия для Android Chrome: сайт открывается по HTTPS, есть
manifest.jsonс названием и иконками, подключен service worker, а кнопка вызывает сохраненное событиеbeforeinstallprompt. Manifest подключается в<head>:<link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#ffffff">
{ "name": "Мой сайт", "short_name": "Сайт", "start_url": "/", "display": "standalone", "icons": [ {"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}, {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"} ] }{ "name": "Мой сайт", "short_name": "Сайт", "start_url": "/", "display": "standalone", "icons": [ {"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}, {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"} ] }
let installPrompt = null; window.addEventListener('beforeinstallprompt', function (event) { event.preventDefault(); installPrompt = event; document.querySelector('.install-app-button').hidden = false; }); document.querySelector('.install-app-button').addEventListener('click', async function () { if (! installPrompt) return; installPrompt.prompt(); await installPrompt.userChoice; installPrompt = null; });let installPrompt = null; window.addEventListener('beforeinstallprompt', function (event) { event.preventDefault(); installPrompt = event; document.querySelector('.install-app-button').hidden = false; }); document.querySelector('.install-app-button').addEventListener('click', async function () { if (! installPrompt) return; installPrompt.prompt(); await installPrompt.userChoice; installPrompt = null; });
Кнопку надо скрывать по умолчанию, потому что событие появляется не всегда: например, если сайт уже установлен, не проходит требования PWA или браузер не поддерживает prompt. На iPhone программно открыть установку нельзя, там обычно показывают подсказку «Поделиться → На экран Домой». В WordPress это можно сделать вручную в теме или через PWA-плагин, но итог тот же: браузер сам решает, показывать установку или нет.