Question

当我将其添加到主屏幕时，我希望我的渐进式网络应用程序显示为全屏，而不会将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上声明“display：fullscreen”之后，我仍然可以看到它上面的浏览器地址工具栏。

我该如何解决这个问题？

Answer 1

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

1）如果您要添加的网站符合所有PWA criteria，Chrome会使用WebAPK组件构建.APK文件，对其进行签名并安装在设备中。要自行验证所有PWA标准，请使用Chrome开发工具 - ＆gt;审核 - ＆gt;执行审核 - ＆gt;渐进式网络应用。

2）如果该网站不是合格的PWA，它仍会添加一个图标，当您点击地址栏时，该图标将打开浏览器。这似乎发生在你的情况下。我知道你有manifest.json文件。很有可能它没有得到适当的服务（由于您的包装和构建过程可能）。要进行验证，请使用Chrome开发者工具 - ＆gt;申请 - ＆gt;显示您的清单是否到达浏览器。

我建议您至少使用HTTPS和服务工作者以及manifest.json，并根据需要使用explained here以使其成为基本的最低PWA。

Answer 2

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

显示：全屏对清单json不起作用

2 个答案: