Progressive Web App Install 横幅仅在首次访问时显示答案

【问题标题】：Progressive Web App Install banner only show at first visitProgressive Web App Install 横幅仅在首次访问时显示
【发布时间】：2017-10-17 08:36:16
【问题描述】：

我在我的网站中实现了 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));
});

有什么我想念的吗？

【问题讨论】：

我认为您的代码是正确的。但是在检查了这个相关的SO post后，如果你的网络应用程序被添加到你的主屏幕，“不需要等待提示我将很多我日常使用的网站添加到我的主屏幕，我几乎从来没有看到横幅！”希望这会有所帮助。
您关闭了 PWA 安装横幅？

标签： google-chrome service-worker progressive-web-apps manifest.json

【解决方案1】：

显示标准之一是：

符合 Chrome 定义的网站参与启发式（定期更改） https://developers.google.com/web/fundamentals/app-install-banners/

所以你的代码没问题。以后您可以自行决定何时展示此横幅

【讨论】：