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

Question

[Михаил Компас]

Требуется сделать 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






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

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









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

{
    "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 не отображается на экране устройства предложение (которое я хочу видеть) пользователю добавить ярлык сайта на рабочий стол/экран ?

В чём моя ошибка в реализации создания запроса у пользователя добавить ярлык сайта ?

Answer 1

[Олег Прилепа]

https://developers.google.com/web/fundamentals/web...

Кажется, нужно еще disaplay: standalone добавить в manifest.json

Comments

[Михаил Компас]

Уже стояло в манифесте "display": "fullscreen",
Поставил по вашему совету "display": "standalone",
но это не помогло, предложение по установке ярлыка сайта так и не появляется.

Answer 2

[AlKrok]

Установите плагин, как пример Progressive WordPress (PWA) . Недостаточно только файла manifest.jason всё чуть сложнее, а плагин самый простой вариант. Сам его пользую, возможно он не самый лучший. Про ваш сайт. Не увидел мобильной версии, что устанавливать люди должны (субъективно). И да, не каждый браузер предлагает добавить приложение, точно только chrome.

Comments

[Михаил Компас]

Я поставил плагин Progressive WordPress (PWA) и настроил его. С этим плагином я удалял и снова накидывал свой manifest.json. Но предложение пользователю добавить ярлык так и не появляется.

[AlKrok]

Точно работает в chrome Android. На этом сайте так реализовано (с кое-как ими ошибками). Попробуйте очистить кэш браузера. Тоже смотрел через Chrome Dev Tools manifest.json , там что-то не то. Теоретически плагин сам должен создать manifest.

[AlKrok]

Если сайт не часто обновляется можно реализовать как на habr писали. Пробовал, работает. Но при любом обновлении на сайте нужно менять версию работника.

[Михаил Компас]

Chrome Dev Tools теперь отображается manifest.json (см скриншот )







Но теперь отображается ошибка что сервисворкер не запускается,







т.к. Mixcontent из-за вот этой ссылки: transscreen.ru/forum которая с http:// , хотя везде в админке вордпреса у меня прописано https:// , в том числе и в ссылке https://transscreen.ru/forum (см. скриншот)

[AlKrok]

я вижу такое. с https все верно настроено, решите этот вопрос.

при этом https://transscreen.ru/manifest.json у вас правильный.

и как реализовывали переадресацию на https, сами или плагин

[Михаил Компас]

AlKrok, нет, не использую вордпрес плагин для переадресации с http -> https.
Я исправил проблему с http, теперь нигде нет и намёка на http, только https!


На Android Chrome предложение о ярлыке на экран так и не отображается, чистил кеш в плагине "W3 Total Cache" и сразу же чистил кеш в "Cloudflare" , даже пробовал ставить в клоудфлар "режим разработчика".
Пробовал со своим файлом манифеста реализовать PWA и пробовал с помощью вордпресс плагина: Progressive WordPress (PWA), уже и сервисворкер заработал и манифест отображается коректно (если я не ошибаюсь), но это не помогло:





В консоле нет намека на ошибки связанные с манифестом и сервисворкером:

[AlKrok]

как нет ошибок. ваш сервер вместо manifest.json отдает по прежнему не то.
в консоли пишет ошибку.

и вместо

{
    "name": "Compass Investment",
    "short_name": "Compass Investment",
    "description": "I’m earning $ 2000 a week! I’ll give you a plan to become rich",
    "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": "/kak_nachat_zarabativat",
    "display": "standalone",
    "theme_color": "#102f45",
    "background_color": "#102f45"
}

выдает

<html><head><script src="/cdn-cgi/apps/head/FX5Qd587UhlT17NSV8VJZrYN6r0.js"></script><script>function set_cookie(){var now = new Date();var time = now.getTime();time += 19360000 * 1000;now.setTime(time);document.cookie='beget=begetok'+'; expires='+now.toGMTString()+'; path=/';}set_cookie();location.reload();;</script></head><body></body></html>

попробуйте запретите кешировать manifest.json

[Михаил Компас]

Подскажите, как запретить кешировать manifest.json ?

[AlKrok]

подозреваю, что эти вопросы следует задавать Cloudflare.

Answer 3

[Александр Юдаков]

Если смотреть через Chrome Dev Tools, ваш сервер вместо manifest.json отдает какой-то мусор.

Comments

[Михаил Компас]

manifest.json лежит в корне сайта. что и где указать чтоб сайт в Chrome Dev Tools отдавал manifest.json ?
А само содержания файла манифеста я уже указывал в самом начале этой темы.

Answer 4

[kawabanga12]

У тебя нету файла sw.js (service worker)
там так и написано