gpt4 book ai didi

service-worker - 当我的应用程序 list 中指定了全屏时,为什么我的渐进式 Web 应用程序会在浏览器中打开?

转载 作者:行者123 更新时间:2023-12-04 03:08:22 26 4
gpt4 key购买 nike

当我在没有服务 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com