La fenêtre contextuelle "Ajouter à l'écran d'accueil" ne s'affiche pas en utilisant le fichier manifest.json

Question

Je dois ajouter une invite pour AJOUTER À L'ÉCRAN D'ACCUEIL en utilisant manifest.json mais cela n'apparaît pas alors que mon score pwa dans l'audit est de 100%

J'ai un dossier dist comme ci-dessous:-

Mon fichier Manifest contient ce qui suit:-

{
  "name": "xyz",
  "short_name": "xyz",
  "icons": [
    {
      "src": "/xyz/static/img/icons/xy-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/xyz/static/img/icons/xy-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "xyz/index.html",
  "scope": ".",
  "display": "standalone",
  "background_color": "#0628b9",
  "theme_color": "#000000"
}

et j'utilise le plugin workbox pour le service worker et j'ai aussi essayé avec un service worker normal comme ci-dessous :-

sw.js

var VERSION = '20';

self.addEventListener('install', function(e) {
  e.waitUntil(caches.open(VERSION).then(cache => {
    return cache.addAll([
      'https://cfjedimaster.github.io/nomanssky/client/index.html'
    ]);
}))
});

self.addEventListener('fetch', function(e) {
  var tryInCachesFirst = caches.open(VERSION).then(cache => {
    return cache.match(e.request).then(response => {
      if (!response) {
    return handleNoCacheMatch(e);
  }
  // Mettre à jour l'enregistrement du cache en arrière-plan
  fetchFromNetworkAndCache(e);
  // Répondre avec des données périmées
  return response
});
});
  e.respondWith(tryInCachesFirst);
});

self.addEventListener('activate', function(e) {
  e.waitUntil(caches.keys().then(keys => {
    return Promise.all(keys.map(key => {
      if (key !== VERSION)
    return caches.delete(key);
}));
}));
});

function fetchFromNetworkAndCache(e) {
  // L'ouverture de DevTools déclenchera ces demandes o-i-c, que ce SW ne peut pas gérer.
  // Il se passe probablement plus de choses ici, mais je préfère simplement ignorer ce problème. :)
  // https://github.com/paulirish/caltrainschedule.io/issues/49
  if (e.request.cache === 'only-if-cached' && e.request.mode !== 'same-origin') return;

  return fetch(e.request).then(res => {
    // Les requêtes externes peuvent être res.type === 'opaque' et manquer d'une URL
    if (!res.url) return res;
  // quoi qu'il en soit, nous ne voulons pas mettre en cache les ressources d'une autre origine
  if (new URL(res.url).origin !== location.origin) return res;

  return caches.open(VERSION).then(cache => {
    // TODO: déterminer si le contenu est nouveau et donc si la page a besoin d'un rechargement.
    cache.put(e.request, res.clone());
  return res;
});
}).catch(err => console.error(e.request.url, err));
}

function handleNoCacheMatch(e) {
  return fetchFromNetworkAndCache(e);
}

et mon score pwa dans lighthouse est de 100%.

mais je ne parviens pas à voir l'invite à ajouter à l'écran d'accueil.

Answer 1

Lors des tests/débogages A2HS, la majeure partie du travail consiste à éliminer les tests et les installations précédents.
Encore et encore.
Les navigateurs se souviennent intentionnellement de ce qui a été fait la dernière fois afin de ne pas importuner l'utilisateur avec des invitations d'installation.
Il peut être nécessaire de vider complètement le cache si vous souhaitez voir à nouveau l'invitation.

Si vous avez refusé une invitation précédente, elle ne sera pas redemandée avant XX mois.
Si vous avez déjà installé, elle ne devrait pas être redemandée.

Quelques points à vérifier
-- dans Chrome sur ordinateur
-- Supprimer l'icône à partir de chrome://apps/
-- Si cela ne fonctionne pas, vous devrez peut-être vider le cache