I am trying to implement the Add To Home screen on the latest Chrome and Android (7). I have indicated "offline" in the manifest file, but the application opens only in the browser. I got the desired behavior on one device, but cannot play it.
I see that someone had a similar problem on this issue . I followed the proposed solution - checking the properties of PWA with Lighthouse - but even with an excellent score of 100 Lighthouse, I still can not open the application offline.
Any ideas?
My code for reference (which is also located on GitHub and posted on GitHub pages ):
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A2HS Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0077c2"/>
<link rel="manifest" href="manifest.json">
</head>
<body>
<p>Add To Home Screen</p>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(reg => console.log('Registration success. Scope is ', reg.scope))
.catch(err => console.log('Registration failed. ', err));
}
</script>
</body>
</html>
sw.js
const cacheName = 'a2hs-test';
const resourcesToCache = [
'index.html',
'manifest.json',
'icons/icon-512.png',
'icons/icon-256.png',
'icons/icon-96.png',
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(resourcesToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
manifest.json
{
"short_name": "A2HS",
"name": "Add To Home Screen",
"theme_color": "#0077c2",
"background_color": "#42a5f5",
"start_url": "index.html",
"display": "standalone",
"icons": [
{
"src": "icons/icon-96.png",
"sizes": "96x96"
},
{
"src": "icons/icon-256.png",
"sizes": "256x256"
},
{
"src": "icons/icon-512.png",
"sizes": "512x512"
}
]
}
EDIT:
v63 Canary v66, , localhost - . HTTPS .