2

私のウェブサイトで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)); 
}); 

は、私が見逃して何がありますか?

+0

あなたのコードは正しいと思います。しかし、関連する[SO post](https://stackoverflow.com/a/43003443/5995040)をチェックすると、Webアプリケーションがあなたのホームスクリーンに追加されている場合、「プロンプトを待つ必要はありません。私は毎日私のホームスクリーンに使う傾向があり、バナーを見ることはほとんどありません。お役に立てれば。 –

+0

PWAインストールバナーを閉じましたか? – abraham

答えて

0

示す基準の1つである:

はクロームで定義されたサイトのエンゲージメントヒューリスティックを満たしている(これは定期的に変更されている) https://developers.google.com/web/fundamentals/app-install-banners/

だからあなたのコードは大丈夫です。将来このバナーをいつ表示するか決めることができます

関連する問題