Progressive Web App Installation bannière afficher uniquement à la première visite

Question

J'ai implémenté PWA dans mon site Web, la bannière d'installation apparaît uniquement à la première visite, après je l'ai fermé (ne pas l'ajouter), et actualiser ou revisiter à nouveau par URL, la bannière n'a pas apparaît à nouveau, sauf si j'efface mon historique et mon cache, pourquoi?

ici est mon manifeste

{ 
    "name": "Mobipaid", 
    "short_name": "Mobipaid", 
    "theme_color": "#00497e", 
    "background_color": "#ffffff", 
    "icons": [{ 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-32x32.png", 
     "sizes": "32x32", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-48x48.png", 
     "sizes": "48x48", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-64x64.png", 
     "sizes": "64x64", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-72x72.png", 
     "sizes": "72x72", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-96x96.png", 
     "sizes": "96x96", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-128x128.png", 
     "sizes": "128x128", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-144x144.png", 
     "sizes": "144x144", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-152x152.png", 
     "sizes": "152x152", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-180x180.png", 
     "sizes": "180x180", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-192x192.png", 
     "sizes": "192x192", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-200x200.png", 
     "sizes": "200x200", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-384x384.png", 
     "sizes": "384x384", 
     "type": "image/png" 
    }, 
    { 
     "src": "./MOSQUITO_2015/img/mobipaid/mobipaid-logo-white-background-512x512.png", 
     "sizes": "512x512", 
     "type": "image/png" 
    }], 
    "start_url": "/?utm_source=homescreen", 
    "display": "standalone" 
} 

et voici mon service worker

var staticCacheName = 'mobipaid'; 
var filesToCache = [ 
'/MOSQUITO_2015/assets/', 
'/MOSQUITO_2015/css/', 
'/MOSQUITO_2015/fonts/', 
'/MOSQUITO_2015/img/' 
]; 

self.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open(staticCacheName).then(function(cache) { 
     return cache.addAll(filesToCache); 
    }) 
    ); 
}); 

self.addEventListener('push', function(event) { 
    const title = 'Mobipaid'; 
    const options = { 
    body: event.data.text(), 
    icon: './MOSQUITO_2015/img/logo.png', 
    badge: '/MOSQUITO_2015/img/logo.png' 
    }; 

    const notificationPromise = self.registration.showNotification(title, options); 
    event.waitUntil(notificationPromise); 
}); 

self.addEventListener('notificationclick', function(event) { 
    event.notification.close(); 

    const notificationPromise = clients.openWindow('./merchant/transaction/transaction_log'); 
    event.waitUntil(notificationPromise); 
}); 

self.addEventListener('activate', function(event) { 
    event.waitUntil(
    caches.keys().then(function(cacheNames) { 
     console.log('Activate event - cacheNames: ', cacheNames); 
     return Promise.all(
     cacheNames.filter(function(cacheName) { 
     }).map(function(cacheName) { 
      return caches.delete(cacheName); 
     }) 
     ); 
    }) 
    ); 
}); 


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

est quelque chose qui me manque?

Answer 1

L'un des critères est montrant:

Meets une heuristique d'engagement de site défini par Chrome (ce qui est régulièrement en cours de modification) https://developers.google.com/web/fundamentals/app-install-banners/

Donc, votre code est correct. À l'avenir, vous pouvez décider lui-même quand afficher cette bannière.