web-dev-qa-db-fra.com

Pourquoi ma bannière d'installation Web App "Ajouter à l'écran d'accueil" n'apparaît-elle pas dans mon application Web?

J'ai créé un fichier Service-worker et manifest.json afin d'afficher une bannière d'installation de l'application "pour écran d'accueil" pour les utilisateurs du navigateur Chrome.

Cela ne fonctionne pas comme prévu.

Voici mon fichier manifest.json

{
  "name": "MySite",
  "short_name": "Mysite",
  "start_url": "./?utm_source=homescreen",
  "icons": [{
      "src": "assets/cacheable/images/shortcut/120x120.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/142x142.png",
      "sizes": "142x142",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "384x384",
      "type": "image/png"
    }],
  "orientation": "portrait" ,
  "background_color": "#fff",
  "display": "standalone",
  "theme_color": "#fff"
}

S'il vous plaît laissez-moi savoir si j'ai oublié d'ajouter quelque chose?

html5google-chromeprogressive-web-apps
10
PPShein

Premièrement, vérifions si votre manifeste remplit les conditions requises pour afficher les bannières d'installation Web App.

Exigences

La configuration requise complète (actuelle) pour afficher les bannières d'installation Web App est *:

  • Avoir un fichier manifeste d'application Web avec:
    • un nom court 
    • un nom (utilisé dans l'invite de la bannière ) 
    • une icône png 144x144
    • un start_url qui charge
  • Est desservi via HTTPS (condition requise pour utiliser le service worker).
  • Est visité au moins deux fois, avec au moins cinq minutes entre les visites.

Référence

Bon, alors pour le moment, supposons que tout cela est valide. Passons aux tests.

Test

Pour vérifier si vous l'avez installé correctement, vous pouvez essayer les étapes suivantes:

  1. Ouvrez Chrome DevTools,
  2. Accéder au panneau Application
  3. Aller sur l'onglet Manifest
  4. Cliquez sur Ajouter à l'écran d'accueil.

Une invite devrait maintenant s'afficher en haut de votre navigateur vous demandant si vous souhaitez ajouter l'URL à vos objets (sur le bureau Chrome).

Dépannage

Si, après les tests, vous obtenez l’erreur suivante dans votre console:

Aucun agent de service correspondant détecté. Vous devrez peut-être recharger la page ou vérifier que le technicien de service de la page actuelle contrôle également l'URL de démarrage à partir du manifeste.

Assurez-vous ensuite que 1. Votre technicien de service fonctionne correctement et sans erreur et que 2. Votre start_url correspond à une URL de votre site Web qui charge. Sinon, vous ne recevrez jamais l'invite à montrer!

Aditionellement,

Notez que les utilisateurs (et vous!) Peuvent également ajouter manuellement à l'écran d'accueil via le menu Chrome (Android). Il n'est pas nécessaire d'attendre l'invite! J'ajoute beaucoup de sites Web que j'utilise tous les jours sur mon écran d'accueil et je ne vois presque jamais de bannière!

* Notez que ces exigences peuvent changer de temps en temps (elles l'ont déjà été!). Une mise à jour de 'Ajouter à l'écran d'accueil' pour 2017 a déjà été annoncée ici

** Notez également que ces exigences diffèrent considérablement des invites d'installation d'applications natives. **

17
Extricate

votre manifeste.json semble assez bon. et les points mentionnés ci-dessus par @Extricate sont corrects et parfaits. 

La prochaine question est donc de savoir si vous avez mis en place Service-worker pour votre application?
J'ai lu quelque part qu'un fichier de service worker vide fonctionnerait, mais lorsque j'ai essayé une implémentation vide de service-worker, il a déclaré que 

  "Le site ne peut pas être installé: la page ne fonctionne pas hors connexion" 

Donc, je suppose que la dernière version de Chrome ne prendrait pas en charge l'invite A2HS pour les bannières d'installation de l'application si votre prestataire de services ne prend pas en charge le travail hors connexion. 

Vous pouvez essayer d'aller sur Invite de l'application Web de base , allez à devtools en chrome, accédez à l'onglet Application. Vous y trouverez manifest.json. Sur LHS du fichier manifeste, vous pouvez voir l’affichage ADD TO HOME. Quand vous cliquez, ça va imprimer 

  "Le site ne peut pas être installé: la page ne fonctionne pas hors connexion" 

Capture d'écran PFA pour même

5
Parth Mistry

Dans votre fichier js Service worker, ajoutez cette ligne de code:

self.addEventListener('fetch', function(event) {});
0
imsinu9