I am trying to implement Add To Home Screen on the latest Chrome & Android (7). I have specified "standalone" in the manifest file but the app only opens in the browser. I've gotten the desired behavior before on the same device, but can't seem to reproduce it.
I see that someone had a similar issue in this question. I followed the suggested solution - validating PWA properties with Lighthouse - but even with a perfect 100 Lighthouse score, I am still unable to get the app to open in standalone mode.
Any ideas?
My code for reference (which is also on GitHub & hosted 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:
I ran into a similar issue again on v63 & Canary v66, and it seems like using localhost caused the same issue - unable to launch in standalone. Hosting the exact same code and accessing the HTTPS site allowed me to launch in standalone.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
