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/

所以你的代码没问题。将来你可以自己决定何时展示这个横幅

渐进式Web应用程序安装横幅仅在首次访问时显示

1 个答案: