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

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

转载作者：行者123 更新时间：2023-12-04 03:08:22

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