점진적 웹 앱 설치 배너는 처음 방문시에만 표시됩니다.

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

하나는 :

은 크롬에 의해 정의 된 사이트 참여 휴리스틱을 충족 (이 정기적으로 변경되는) https://developers.google.com/web/fundamentals/app-install-banners/

그래서 코드가 괜찮습니다. 앞으로이 배너를 표시 할 때 스스로 결정할 수 있습니다