web-dev-qa-db-fra.com

ajouter à l'écran d'accueil ne pas afficher PWA

J'ai créé une application Web progressive ... C'est simple, juste un index.html, un dossier "images" avec favicon, un sw.js et un styles.css

Mon code de manifest.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"
   }

et 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;
      });
    });
  }
})
  );
});

Donc ... pour l'instant, quand je vais sur le site avec mon smartphone avec chrome, tout est affiché correctement, la couleur de l'onglet est bonne, tout est beau, etc. Mais je n'ai pas la bannière "ajouter à l'écran d'accueil". Par contre quand je vais dans les réglages de chrome, et que je clique sur "Ajouter à l'écran d'accueil" et que je valide puis que je passe au raccourci ajouté, le site est lancé sous forme d'application, avec le "splash screen" " etc.

Et quand je vais sur le site depuis mon ordinateur et que je regarde le débogueur dans "Application" et le manifeste, j'ai le petit lien "Ajouter à l'écran d'accueil" Savez-vous d'où cela peut provenir?

Merci pour l'aide !

Modifier :

J'ai un peu avancé J'ai légèrement modifié mon organisation, j'ai créé un sous-domaine, j'ai maintenant une URL comme celle-ci: https://subdomain.example.com . Tout est à la racine du sous-domaine, dans le code, les liens sont en relatif (par exemple: "img/name.png") . Je n'ai aucune erreur dans le service worker, quand je vais sur Chrome à partir de mon pc, je vais dans outils de développement -> Application -> onglet Manifeste, et je clique sur "Ajouter à l'écran d'accueil", la bannière permettant d'ajouter le site aux applications apparaît bien et lorsque je valide, cela fonctionne bien . C'est ce que j'ai quand je vais sur Outils de développement Chrome -> Application -> onglet Employé de service. 

 sw.js

Mais sur mon smartphone, je n'ai toujours pas l'ajout de bannière à l'écran d'accueil, si quelqu'un a une idée ...

service-workerprogressive-web-appsmanifest.json
8
Cohchi

Votre site doit figurer dans https avec un certificat, un manifeste valide et un agent de service valide affiché dans l'onglet de l'application chromes. Tout cela rend votre site qualifié de PWA de base pour l'ajouter en tant que site installable (il est créé avec un google signé à la volée Fichier .APK) 

En cas de problème avec https, un agent de certification ou de service (dans la plupart des cas, c'est la raison), une icône sera quand même ajoutée à l'écran d'accueil et s'ouvrira comme application sans barre d'adresse. La différence est qu’il s’agit simplement d’un lien de type signet. Ce n'est pas un fichier .apk généré par WebApk en chrome. Dans de tels scénarios, chrome n’affiche pas la bannière d’installation.

Un autre cas pourrait être, il pourrait aller et venir une fois sans que vous le noticin ou il recharger la page sur votre interruption. Une première baisse par utilisateur, chrome ne s'affiche plus. Vous pouvez essayer à partir d’un autre appareil, mais c’est la même chose, c’est l’un de nos composants PWA qui n’a pas été configuré correctement, comme indiqué au premier paragraphe. 

Ici et ici quelques critères officiels de Google concernant l’installation de bannières. 

5
Anand

Avez-vous vérifié tous les critères sur les sites de développement Google?

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

À l'heure actuelle, je ne vois rien dans votre message qui mentionne HTTPS - cela pourrait être le coupable.

1
Bob Vaselaar