Почему не добавляется ярлык Web App сайта на экран Android телефона?

Требуется сделать web-приложение для моего wordpress сайта https://transscreen.ru , а именно чтоб при открытии сайта пользователю отображалось предложение сохранить ярлык сайта на рабочий стол (что-то вроде PWA без офлайна).

Сразу обращаем внимание что:
- Мой сайт не работает в OFFлайне.
- Сайт по https://developers.google.com/speed/pagespeed/insights/ показывает 45\93 балла для МОБ/ПК

Как я пытался это уже реализовать:
Я попробовал реализовать предложение пользователю добавить ярлык сайта на рабочий стол/экран по инструкции (которую мне уже тут в "Хабр Q&A" скидывали) для Web App Manifest :

- Я создал файл манифеста manifest.json и положил файл манифеста сюда: transscreen.ru/public_html

5e332eca21e42180886000.jpeg




- В файле header.php который лежит в моей wordpress теме "notepad-chaos" я добавил в head вот это:

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




5e332ee33e2d5628127046.jpeg




- Содержимое файла манифеста такое:
5e332f1664572316529888.jpeg




{
    "name": "Компас Инвестиций",
    "short_name": "Компас Инвестиций",
    "description": "Зарабатываю $2000 в неделю! Дам план как стать богатым",
    "icons": [
        {
            "src": "icons/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "icons/icon-64.png",
            "sizes": "64x64",
            "type": "image/png"
        },
        {
            "src": "icons/icon-96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "icons/icon-128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "icons/icon-168.png",
            "sizes": "168x168",
            "type": "image/png"
        },
        {
            "src": "icons/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icons/icon-256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/index.html",
    "display": "fullscreen",
    "theme_color": "#102f45",
    "background_color": "#102f45"
}





Вопрос:
Почему при открытии с ПК/МОБ моего сайта https://transscreen.ru не отображается на экране устройства предложение (которое я хочу видеть) пользователю добавить ярлык сайта на рабочий стол/экран ?

В чём моя ошибка в реализации создания запроса у пользователя добавить ярлык сайта ?
  • Вопрос задан
  • 1233 просмотра
Пригласить эксперта
Ответы на вопрос 4
OAPrilepa
@OAPrilepa
Frontend developer
https://developers.google.com/web/fundamentals/web...

Кажется, нужно еще disaplay: standalone добавить в manifest.json
Ответ написан
@AlKrok
Установите плагин, как пример Progressive WordPress (PWA) . Недостаточно только файла manifest.jason всё чуть сложнее, а плагин самый простой вариант. Сам его пользую, возможно он не самый лучший. Про ваш сайт. Не увидел мобильной версии, что устанавливать люди должны (субъективно). И да, не каждый браузер предлагает добавить приложение, точно только chrome.
Ответ написан
AlexanderYudakov
@AlexanderYudakov
C#, 1С, Android, TypeScript
Если смотреть через Chrome Dev Tools, ваш сервер вместо manifest.json отдает какой-то мусор.
Ответ написан
@kawabanga12
У тебя нету файла sw.js (service worker)
там так и написано
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы