PWA不会在Android上以独立模式打开 [英] PWA wont open in standalone mode on android
问题描述
我试图在最新的Chrome& Android（7）。我在清单文件中指定了独立，但该应用只能在浏览器中打开。我已经在同一台设备上获得了期望的行为，但似乎无法重现它。
我发现有人在这个问题。我遵循了建议的解决方案 - 使用Lighthouse验证PWA属性 - 但即使拥有完美的100 Lighthouse评分，我仍然无法让应用以独立模式打开。
有什么想法？
我参考的代码（也在 GitHub & 托管于GitHub Pages ）：
Index.html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> A2HS Test< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< meta name =theme-colorcontent =＃0077c2/>
< link rel =manifesthref =manifest.json>
< / head>
< body>
< p>添加到主屏幕< / 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'，
'图标/ icon-512.png'，
'图标/图标-256.png'，
'图标/图标-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）{
返回响应|| fetch（event.request）;
}）
）;
}）;
manifest.json
{
short_name：A2HS，
name：添加到主屏幕，
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：图标/ 512.png，
sizes：512x512
}
]
}
编辑：
我在v63&金丝雀v66，它似乎像使用本地主机造成相同的问题 - 无法独立启动。托管完全相同的代码并访问HTTPS网站允许我以独立方式启动。
根据评论，这似乎只是一个在Chrome 63 +中修复的错误。
编辑： 上面的编辑 - 通过HTTPS托管也解决了相同的问题问题v63和加那利v66我。本地主机可能不足以允许应用以独立模式启动。
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.
As per the comments, this appears to simply be a bug that was fixed in Chrome 63+.
EDIT:
See edits above - hosting via HTTPS also solved the same issue for me on v63 and Canary v66. Localhost might not be sufficient to allow apps to launch in standalone mode.
这篇关于PWA不会在Android上以独立模式打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
