显示：全屏不适用于清单 json

Question

我希望我的渐进式网络应用程序全屏显示，当我将其添加到主屏幕时，顶部没有显示chrome地址/工具栏。因此，我在manifest.json上添加了display：fullscreen，但它不起作用。这是我的清单.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 上浏览本地主机，以查看应用程序添加到主屏幕时的外观。但是即使在 manifest.json 上声明"显示：全屏"之后，我也可以在它上面看到浏览器地址工具栏。

我该如何解决这个问题？

Answer 1

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

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

2(如果该站点不是合格的PWA，它仍然会添加一个图标，当您使用地址栏单击它时，该图标将打开浏览器。这似乎发生在您的案例中。我知道你有清单.json文件。很有可能它没有正确服务(由于您的打包和构建过程可能是(。要验证这一点，请使用 Chrome 开发者工具 -> 应用程序 -> 清单，了解您的清单是否到达浏览器。

我建议您使用HTTPS和服务工作者以及manifest.json，至少要根据需要在此处解释其他内容，以使其成为基本的最小PWA。