1

当我将渐进式 Web 应用程序添加到主屏幕时，我希望我的渐进式 Web 应用程序显示为全屏，而顶部没有显示 chrome 地址/工具栏。因此，我在 manifest.json 上添加了 display:fullscreen 但它不起作用。这是我的 manifest.json 代码：

{
  "name": "Cardiofit",
  "short_name": "Cardiofit",
  "description": "Modern app for your health",
  "icons": [
    {
      "src": "images/cardio192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/cardio512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "fullscreen",
  "start_url": "/",
  "orientation": "portrait"
}

我用 USB 数据线将我的智能手机连接到我的电脑，并在我的电脑上打开了 chrome。然后导航到 chrome 检查器中的“远程设备”，这样我就可以在我的 android 上浏览到 localhost，看看应用程序添加到主屏幕后的样子。但即使在 manifest.json 上声明“显示：全屏”后，我仍然可以在其顶部看到浏览器地址工具栏。

我怎样才能解决这个问题？

4

2 回答 2

3

当您使用“添加到主屏幕”选项将应用程序添加到主屏幕时，Chrome 会将图标添加到主屏幕，但在幕后，它可能做了两种不同的事情之一。

1) 如果您尝试添加的网站符合所有PWA 标准，Chrome 将使用 WebAPK 组件构建一个 .APK 文件，对其进行签名并安装在设备中。要为自己验证所有 PWA 标准，请使用 Chrome 开发工具 -> 审核 -> 执行审核 -> 渐进式 Web 应用程序。

2）如果站点不是合格的PWA，它仍然会添加一个图标，当你用地址栏点击它时会打开一个浏览器。您的情况似乎正在发生这种情况。我了解您有 manifest.json 文件。很有可能它没有正确提供（由于您的包装和构建过程可能）。要验证它，请使用 Chrome 开发人员工具 -> 应用程序 -> 清单来了解您的清单是否到达浏览器。

我建议您将 HTTPS 和 Service Worker 与 manifest.json 一起使用，至少与此处解释的其他内容一起使用，以使其成为基本的最低 PWA。

于 2018-05-22T19:46:17.293 回答
-1

要将您的网络应用程序添加到主屏幕，您需要单击 Chrome 中的选项 [右侧的三个点] 并选择Add to Home screen，这将在您的主屏幕中添加一个图标。这是全屏的。

于 2018-05-21T18:45:39.133 回答