Question

当我在没有服务工作者的Android上将我的网络应用安装到主屏幕时，一切都按预期工作。我可以点击我的主屏幕图标，我的应用程序启动时会出现闪屏，然后我会以全屏模式看到我的应用程序。当我添加服务工作者注册码并安装到主屏幕时，我的应用程序在浏览器窗口中启动，似乎忽略了我的清单文件。

需要注意的是，如果没有服务人员，我的应用程序在主屏幕上只有一个图标。使用服务工作者代码，它将完全安装“新改进的添加到主屏幕”，并且我的主屏幕和我安装的应用程序面板中都有一个图标。

这是我的代码：

网络app.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>

的manifest.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"

}

web应用程序-service.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文档中删除服务工作者注册代码时，行为显然会发生变化。我怀疑问题出在我的web-app-service.js文件中。

编辑：11/01/2017

当我完全注释掉我的fetch事件监听器时，我的应用程序按预期工作，但添加到主屏幕只会在我的主屏幕上安装一个图标。当我使用fetch事件监听器添加到主屏幕时，我将我的Web应用程序完整安装到我的应用程序面板中，我的应用程序仅在浏览器窗口中打开，其中包含完整的URL栏和所有内容。此问题与将提取功能添加到我的服务工作者有关。

编辑于2017年8月11日

我发现在通过本地IP地址访问我的Web应用程序时，我的Node JS HTTPS测试服务器上只有这个问题。当我从Github Pages网站运行它时，Web应用程序正常工作。这让我相信它是应用程序清单中的范围问题，或者可能是我的节点服务器。

Answer 1

在manifest.json中将"display": "fullscreen"更改为"display": "standalone"。

它会在App视图中启动您的应用。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Manifest

当我的应用清单中指定了全屏时，为什么我的渐进式网络应用会在浏览器中打开？

1 个答案: