当我在没有服务 worker 的情况下将网络应用程序安装到 Android 主屏幕时，一切都按预期进行。我可以单击我的主屏幕图标，我的应用程序启动时会出现启动画面，然后我会看到我的应用程序处于全屏模式。当我添加 Service Worker 注册码并安装到主屏幕时，我的应用程序在浏览器窗口中启动并且似乎忽略了我的 list 文件。
需要注意的是，如果没有 Service Worker，我的应用程序在主屏幕上只有一个图标。使用 service worker 代码，它会完全安装并带有“新改进的添加到主屏幕”，并且在我的主屏幕和已安装的应用程序面板中都有一个图标。
这是我的代码:
网络应用.html:
<!DOCTYPE html>
<html>
<head>
<title>Web App</title>
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta name = "mobile-web-app-capable" content = "yes">
<link href = "manifest.json" rel = "manifest">
<link href = "web-app.css" rel = "stylesheet" type = "text/css">
<link href = "web-app.png" rel = "icon" type = "image/png">
</head>
<body>
<h1>Android Web App!</h1>
<img src = "/web-app.png">
<p>This page can be viewed in any browser, but it can also work in a web app! If you are viewing this page in a full screened webview on your mobile device, you are looking at a fully functional web app! You can use this technology to better connect with your users or create a full screen mobile experience for your HTML5 games!</p>
<script type = "text/javascript">
navigator.serviceWorker.register("web-app-service.js");
</script>
</body>
</html>
list .json:
{
"author": "PoP Vlog",
"background_color": "#ffffff",
"description": "Progressive Web App Example with Offline Mode",
"display": "fullscreen",
"icons": [{
"src": "/web-app.png",
"sizes": "192x192",
"type": "image/png"
}],
"lang":"en",
"manifest_version": 2,
"name": "Web App",
"orientation": "portrait",
"scope":"/",
"short_name": "Web App",
"start_url": "/",
"theme_color": "#ffffff",
"version": "0.2"
}
网络应用服务.js:
self.addEventListener("install", function(event) {
event.waitUntil(caches.open("web-app").then(function(cache) {
return cache.addAll([ "/", "/web-app.html", "/web-app.css", "/web-app.png"]).then(function() {
self.skipWaiting();
});
}));
});
self.addEventListener("activate", function(event) {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
return response || fetch(event.request);
}));
});
我找不到很多关于此的文档，但很明显，当我从我的 html 文档中删除服务 worker 注册代码时，行为发生了变化。我怀疑问题出在我的 web-app-service.js 文件上。
编辑:2017 年 1 月 1 日
当我完全注释掉我的获取事件监听器时，我的应用程序按预期工作，但添加到主屏幕只会在我的主屏幕上安装一个图标。当我使用 fetch 事件监听器添加到主屏幕时，我将我的网络应用程序完整安装到我的应用程序面板中，我的应用程序仅在具有完整 url 栏和所有内容的浏览器窗口中打开。这个问题与向我的服务人员添加获取功能有关。
编辑 2017 年 11 月 8 日
我发现只有在通过本地 IP 地址访问我的 Web 应用程序时，我的 Node JS HTTPS 测试服务器才会出现此问题。当我从我的 Github Pages 站点运行该 Web 应用程序时，它运行良好。这让我相信这是应用程序 list 或我的节点服务器中范围的问题。
最佳答案
在 manifest.json 中将 "display": "fullscreen" 更改为 "display": "standalone"。
它将以 App 之类的 View 启动您的应用。
有关更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/Manifest
关于service-worker - 当我的应用程序 list 中指定了全屏时，为什么我的渐进式 Web 应用程序会在浏览器中打开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47043100/