I need to implement PWA for a project in Yii 2 framework in php. I have added the manifest.json file which is working as I checked in devtools. Also I added a service-worker file that registered successfull upon loading the browser. But the popup to install the app is not triggering in any device. I am stuck and need help.
sw.js
var staticCacheName = 'pwa-v' + new Date().getTime()
var filesToCache = [
'css/bootstrap.css',
'css/select2.min.css',
'css/select2-bootstrap.css',
'css/anno.css',
'css/jquery.mThumbnailScroller.css',
'css/jquery-ui.css',
'css/bootstrap-theme.css',
'css/fm.selectator.jquery.css',
'css/lightgallery.min.css',
'css/magnific-popup.css',
'css/jquery.mCustomScrollbar.css',
'css/bootstrap-datetimepicker.css',
'css/croppie.css',
'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css',
'css/developer.css',
'css/empwin.css?v=2.37',
'js/bootstrap.js?v=0.01',
'js/fm.selectator.jquery.js?v=0.01',
'js/lightgallery-all.min.js?v=0.01',
'js/jquery.magnific-popup.min.js?v=0.01',
'js/jquery.mThumbnailScroller.js?v=0.01',
'js/moment.js?v=0.01',
'js/bootstrap-datetimepicker.min.js?v=0.01',
'js/highlight.min.js?v=0.01',
'js/jquery-ui.js?v=0.01',
'js/bootstrap-transition.js?v=0.01',
'js/jquery.geocomplete.min.js?v=0.01',
'js/croppie.js?v=0.01',
'js/webcam.js?v=0.01',
'js/anchorme.min.js?v=0.01',
'js/anno.js?v=0.01',
'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',
'js/jquery.ui.core.min.js?v=0.01',
'js/jquery.ui.timepicker.js?v=0.01',
'js/jquery.pinBox.min.js?v=0.01',
'js/propeller.min.js?v=0.01',
'js/select2.full.js?v=0.01',
'js/video.js?v=0.01',
'js/jquery.mCustomScrollbar.concat.min.js?v=0.01',
'js/custom.js?v=3.49',
'js/custom1.js?v=0.02',
'js/blur.js?v=0.01',
'js/exif.js?v=0.02',
'js/browser-deeplink.min.js',
]
// Cache on install
self.addEventListener("install", event => {
this.skipWaiting();
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
)
});
// Clear cache on activate
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames
.filter(cacheName => (cacheName.startsWith("pwa-")))
.filter(cacheName => (cacheName !== staticCacheName))
.map(cacheName => caches.delete(cacheName))
);
})
);
});
//Serve from Cache
self.addEventListener("fetch", event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
.catch(() => {
return caches.match('offline');
})
)
});
manifest.json
{
"theme_color": "#175795",
"background_color": "#175795",
"display": "standalone",
"orientation": "portrait",
"scope": "xxx",
"start_url": "xxx",
"name": "win",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}