добавить на главный экран не отображается PWA

Я создал прогрессивное веб-приложение. Это просто указатель.html, папка "изображения" с favicon и т. д., sw.в JS и стили.в CSS

мой код из манифеста.в JSON

{
"lang" : "en",
"name" : "Test",
"short_name" : "Test",
"icons" :   [
  {
  "src": "images/android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
},
{
  "src": "images/android-chrome-144x144.png",
  "sizes": "144x144",
  "type": "image/png"
}
],
"theme_color" : "#116b20",
"background_color" : "#1a1a1a",
"scope" : "1",
"start_url" : "/test",
"display" : "standalone",
"orientation" : "natural"
   }

и sw.js

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
caches.open('static').then(function(cache) {
 cache.addAll(['/test/', '/test/index.html', '/test/manifest.json']);
  })
  );
});
self.addEventListener('activate', function(event) {
 console.log('[Service Worker] Activating Service Worker ....', event);
});
self.addEventListener('fetch', function(event) {
  event.respondWith(
caches.match(event.request).then(function(response) {
  if (response) {
    return response;
  } else {
    return fetch(event.request).then(function(res) {
      return caches.open('dynamic').then(function(cache) {
        cache.put(event.request.url, res.clone());
        return res;
      });
    });
  }
})
  );
});

Так... на данный момент, когда я иду на сайт со своего смартфона с chrome, все отображается правильно, цвет вкладки хорош, все выглядит хорошо и т. д. Но у меня нет баннера "добавить на главный экран". К минусам when I go в настройках chrome, и я нажимаю "добавить на главный экран", и я проверяю, а затем я иду к добавленному ярлыку, сайт запускается как приложение, с" заставкой " и т. д.

и когда я иду на сайт с моего компьютера, и я смотрю отладчик в "приложении" и манифесте, у меня есть небольшая ссылка " добавить на главный экран" Ты знаешь, откуда это может взяться ?

Спасибо за помощь !

Edit:

Я немного продвинулся Я немного изменил свой организация, я создал поддомен, теперь у меня есть URL-адрес:https://subdomain.example.com. Все находится в корне поддомена, в коде ссылки находятся в относительном (например: "img / name.формат PNG.)" У меня нет никаких ошибок в сервисном работнике, когда я иду на Chrome с моего ПК, я иду на вкладку dev tools -> Application -> Manifest, и я нажимаю "добавить на главный экран", баннер для добавления сайта в приложения появляется хорошо и когда я проверяю, это работает хорошо. Вот что я есть, когда я иду на Chrome dev tools - > Application - > Service worker tab

sw.js

но на моем смартфоне у меня все еще нет баннера, предлагающего добавить на главный экран, если у кого-то есть идея...

3 ответов


ваш сайт должен быть в https с сертификатом, действительным манифестом вместе с действительным работником службы, показывающим на вкладке Приложения chromes, все это делает ваш сайт квалифицированным как базовый PWA, чтобы добавить его в качестве устанавливаемого сайта (он создается с подписью google на лету .APK файл)

когда есть проблема с https, сертификатом или работником службы (в большинстве случаев это причина), значок будет добавлен на главный экран и откроется как приложение без адресной строки. Разница, это просто закладка типа ссылки. Это не .apk файл, созданный WebApk в chrome. В таких случаях chrome не показывает баннер установки.

другой случай может быть, он мог прийти и ушел один раз, не заметив его, или он перезагрузил страницу при прерывании ur. Один первый спад пользователя, chrome не отображается снова. Вы можете попробовать с другого устройства, и все же tho g происходит, это один из компонентов ur PWA не настроен правильно, как указано в первом параграфе.

здесь и здесь некоторые официальные критерии от Google по установке баннеров.


вы проверили все критерии на сайтах разработчиков Google?

https://developers.google.com/web/fundamentals/app-install-banners/

прямо сейчас я не вижу ничего в вашем посте, что упоминает HTTPS-это может быть виновником.


хорошо, так что после большой перезагрузки, это, наконец, работает ! Спасибо :)