Progressive Web App安装横幅仅在第一次访问时显示

Question

我在我的网站中实施了PWA，安装横幅仅出现在第一次访问，我关闭后（不添加它），并通过URL再次刷新或重新访问，横幅没有再次出现，除非我清除我的历史记录和缓存，为什么？

这里是我的清单

{ 
    "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" 
} 

，这里是我的服务人员

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

有什么，我错过？

Answer 1

其中一个显示的标准是：

会见由Chrome定义的网站互动启发式（这是经常被更改） https://developers.google.com/web/fundamentals/app-install-banners/

所以，你的代码是好的。将来你可以自己决定什么时候显示这个横幅