web-dev-qa-db-fra.com

PWA ajouter à l'écran d'accueil ne montrant pas de popup

J'ai implémenté PWA pour mon site statique. service worker s’inscrit avec succès et ma page fonctionne également en mode hors connexion comme prévu, mais le vrai problème réside dans l’ajout à Écran d’accueil

J'ai inclus manifest.json avec les icônes appropriées et je ne vois toujours pas l'ajout d'un écran d'accueil s'affichera et en essayant de pousser l'ajout à l'écran d'accueil de seulement inspecté je peux voir le popup

Cette URL de mon site: https://www.savesoftinc.com/

Manifeste JSON:

{
 "name": "Save Soft",
 "short_name": "SaveSoft",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#0EC3F7",
  "description": "IT Services & Solutions.",
 "icons": [
  {
   "src": "\/Android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/Android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/Android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/Android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/Android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/Android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/ms-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png",
   "density": "5.0"
  }
 ]
}

Et aussi essayez le code ci-dessous pour faire apparaître la bannière comme suggéré par Google

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the Prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the Prompt
  deferredPrompt.Prompt();
  // Wait for the user to respond to the Prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS Prompt');
      } else {
        console.log('User dismissed the A2HS Prompt');
      }
      deferredPrompt = null;
    });
});
window.addEventListener('appinstalled', (evt) => {
  app.logEvent('a2hs', 'installed');
});

mais cela montre une erreur:

Uncaught ReferenceError: btnAdd n'est pas défini

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

service-workerprogressive-web-apps
10
Harish Karthick

La première étape du test de pop-up automatique Add to Home Screen (A2HS) consiste à utiliser les outils de vérification des phares.
Vous devez exécuter l’audit PWA et y corriger les avertissements jusqu’à ce que vous voyiez
--- "L'utilisateur peut être invité à installer Web App"

Les outils d’audit de phare sont disponibles sous forme d’onglet dans les outils Chrome dev) ou sous forme d’extension Chrome.
L’extension présente généralement les fonctionnalités les plus récentes.

Une fois que vous voyez ce message, vous pouvez tester le message contextuel automatique sur Chrome Bureau et Android (Chrome & Edge)
Éléments importants à noter
Après l'avoir vu pour la première fois, vous aurez probablement besoin de vider complètement le cache de votre navigateur pour voir apparaître la fenêtre contextuelle.
Edge - supprimer le raccourci
Chrome Desktop - désinstallez l’application ici: chrome: // apps /
Crome Android - désinstallez WebApk dans vos applications

Une fois que vous savez que le menu contextuel automatique A2HS fonctionne, vous pouvez (si vous le souhaitez) intercepter le menu contextuel automatique afin de le rendre moins gênant pour vos utilisateurs. Montrez-leur un bouton pour leur faire savoir qu'ils peuvent utiliser A2HS lorsque cela leur convient.
Comme décrit ici
https://developers.google.com/web/fundamentals/app-install-banners/

Voici mon testeur pour A2HS .
Vous verrez le bouton afficher à la place de la fenêtre contextuelle automatique.

12
Mathias

Toutes les instructions sont fournies à l'adresse suivante: https://developers.google.com/web/fundamentals/app-install-banners/

Vous trouverez ci-dessous les points pour la bannière 'Ajouter à l'écran d'accueil' de PWA.

  1. L'application Web n'est PAS déjà installée.
  2. Ajoutez des fichiers de travailleur de service et de manifeste. service worker doit être dans un répertoire où start_url est dans sa portée.

(par exemple, '/ public/home' est dans la portée de '/' ou '/ public /')

.

  1. Dans manifest.json, prefer_related_applications n'est PAS défini comme true
  2. manifest.json comprend:
    • nom court ou nom,
    • les icônes doivent inclure des icônes de 192px et 512px,
    • start_url,
    • l'affichage doit être l'un des suivants: plein écran, autonome ou minimal-ui
  3. Servi sur HTTPS (obligatoire pour les agents de service)

  4. A inscrit un travailleur de service avec un gestionnaire d'événements fetch. par exemple.

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

  5. Actuellement, l'utilisateur a interagi avec le domaine pendant au moins 30 secondes.

  6. Le code est placé pour charger le service worker dans le fichier JS racine.

    function registerServiceWorker() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js') // .then(function(reg){ console.log("service worker registered") }).catch(function(err) { console.log(err) }); } else { console.log("Could not find serviceWorker in navigator") } } registerServiceWorker()

  7. Le fichier manifeste de la page HTML est ajouté

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

  8. La bannière n'a pas été supprimée plus tôt (n'apparaîtra pas avant 3 mois comme indiqué dans le guide pour mini-info-barre ). Vous pouvez le ramener en supprimant les cookies.

  9. Pour les périphériques iOS, vous devez fournir les icônes définies dans la page html conformément à Guide du contenu Web Safari :. Actuellement, "Ajouter à l'écran d'accueil" n'est pris en charge que par le navigateur Safari. Vous trouvez cela en cliquant sur l'icône de partage.
1
sat20786

Essayez ci-dessous le code ..

let btnAdd = document.querySelector(".btnAdd"); // .btnAdd maybe id or class

qui est appliqué sur le bouton Invite personnalisé

btnAdd.style.display = "block";

0
vabi