Как реализовать кнопку add to home screen?

Question

[colorkid]

Всем привет. Пытался реализовать кнопку add to home screen, что-бы на мобильных когда пользователь заходил на сайт, выскакивал баннер с кнопкой add to home screen и по нажатию на которую, ярлык сайта оставался на домашнем экране телефона. Ярлык сайта просто ссылка на него.

Смотрел несколько материалов как это сделать, шел по ним, но ничего не получалось, попапа с кнопкой так и не всплывало. Почитывал, что там какие то изменения были внесены в 2018 и прежние мануалы не актуальны.

Скажите, кто реализовывал подобное? Какой мануал взять? Может опишите шаг за шагом, вроде там работы то на 5 минут.

Comments

[evgendev]

1 минимальный набор полей в манифесте
2 https
3 сервис воркер с fallback на офлайн страницу
Только при условии этих трех пунктов, хром выплбнет промпт на добавление сайта на рабочий стол, который вы сможете перехватить и подавить автоматическое всплытие, навешав вызов его на свой юай

Answer 1

[Андрей]

Приложение должно быть PWA - для это необходим файл site.webmanifest

В случае с моим сайтом, PWA вышел вообще случайно. Я генерил favicons и он выдал мне этот самый файл, который я до кучи залил. Кнопка появилась)

Comments

[colorkid]

толи site.manifest толи site.webmanifest, везде разная инфа

[Андрей]

colorkid, site.webmanifest

[Андрей]

colorkid, мой файл выглядит таким образом:

{
    "name": "Рýсинас, wtf?",
    "short_name": "Рýсинас, wtf?",
    "icons": [
        {
            "src": "/favicon/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/favicon/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "https://rusinas.wtf",
    "display": "standalone"
}

[colorkid]

вау, спасибо

[colorkid]

Очень странно, но сейчас затестил сайт https://rusinas.wtf на андроде chrome и на ios chrome, к сожалению попапа небыло... Может это какие-то настройки браузеров, или лавочку прикрыли.

Answer 2

[danil_gazizov]

Когда пользователь откажется от установки, просто закрыв уведомление, начнутся мучения. Потому что на моем Android, для моего сайта уведомление перестало появляться, что я только не сбрасывал - и кеш и данные для сайта. Причем, примеры с других сайтов работали, а мой сайт - нет.
А все дело было в "эвристике".
Оказывается, нужно слушать beforeinstallpromp, и не надеяться только на автоматику. Именно через него нужно реализовывать установку. Примеры найдете.

Answer 3

[Also_known_as]

Создай файл manifest.json заполни его необходимой инфой. Если твой сайт использует ssl или tsl сертификаты и соединение защищено и зашифрованно используется https протокол, то браузер автоматически будет предлогать установить твоё pwa приложение в противном случае если хоть один из этих факторов не учтены, функция не будет доступна.

Comments

[colorkid]

Можно пример на подобный сайт?

[Александр Калинин]

https://2410.ru/minicalc/