My Website/Script is in php and sql. I have uploaded inside a folder called New. I want to get 'Add to Homescreen' Option.
I referred this - Site cannot be installed: no matching service worker detected
But when i test my manifest.json as in https://developers.google.com/web/fundamentals/web-app-manifest/ , i get 'No matching service worker detected. You may need to reload the page ,....'
And my my_groups.php i have added
<script type="text/javascript">
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('../service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>
after </body>
and in <head> </head>, i have included <link rel="manifest" href="manifest.json">
manifest.json
{
"short_name": "GDD",
"name": "GDD Play",
"description": "For Fun.",
"icons": [
{
"src": "gdd.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/gdd/my_groups.php",
"background_color": "#F7F8F9",
"theme_color": "#4A90E2",
"display": "standalone"
}
sw.js ( i got this from here)
// use a cacheName for cache versioning
var cacheName = 'v1:static';
// during the install phase you usually want to cache static assets
self.addEventListener('install', function(e) {
// once the SW is installed, go ahead and fetch the resources to make this work offline
e.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll([
'./',
'includes/config.php',
'includes/functions.php',
'includes/top.php'
]).then(function() {
self.skipWaiting();
});
})
);
});
// when the browser fetches a url
self.addEventListener('fetch', function(event) {
// either respond with the cached object or go ahead and fetch the actual url
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
// retrieve from cache
return response;
}
// fetch as normal
return fetch(event.request);
})
);
});
serviceworker.js (It is outside the folder new)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('new/sw.js').then(function(reg) {
console.log('Successfully registered service worker', reg);
}).catch(function(err) {
console.warn('Error whilst registering service worker', err);
});
}
window.addEventListener('online', function(e) {
// re-sync data with server
console.log("You are online");
Page.hideOfflineWarning();
Arrivals.loadData();
}, false);
window.addEventListener('offline', function(e) {
// queue up events for server
console.log("You are offline");
Page.showOfflineWarning();
}, false);
// check if the user is connected
if (navigator.onLine) {
Arrivals.loadData();
} else {
// show offline message
Page.showOfflineWarning();
}
// set knockout view model bindings
ko.applyBindings(Page.vm);
