Progressive Web App安装横幅仅在第一次访问时显示
问题描述:
我在我的网站中实施了PWA,安装横幅仅出现在第一次访问,我关闭后(不添加它),并通过URL再次刷新或重新访问,横幅没有再次出现,除非我清除我的历史记录和缓存,为什么?Progressive Web App安装横幅仅在第一次访问时显示
这里是我的清单
{
"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));
});
有什么,我错过?
答
其中一个显示的标准是:
会见由Chrome定义的网站互动启发式(这是经常被更改) https://developers.google.com/web/fundamentals/app-install-banners/
所以,你的代码是好的。将来你可以自己决定什么时候显示这个横幅
我认为你的代码是正确的。但是在检查这个相关的[SO帖子](https://*.com/a/43003443/5995040)后,如果你的网页应用程序被添加到你的主屏幕上,“并不需要等待提示我添加了很多我倾向于每天使用我的主屏幕的网站,而且我几乎没有看到过横幅!“希望这可以帮助。 –
您关闭了PWA安装横幅? – abraham