本文共 3561 字,大约阅读时间需要 11 分钟。
渐进式web应用程序
Here the web app install banner is focused on web app, with the feature of add to homescreen.
在此,Web应用程序安装标语专注于Web应用程序,具有添加到主屏幕的功能。
Add to Homescreen functionality is currently supported by:
当前受“添加到主屏幕”功能的支持:
You can see the latest status of browser support of this feature .
您可以在该功能的浏览器支持的最新状态。
On Android, the “add to homescreen” banner comes up automatically if you meet certain requirements. This is what it should look like on Android:
在Android上,如果您满足某些要求,则会自动显示“添加到主屏幕”横幅。 这是在Android上的外观:
Add to homescreen promptWhen app launched
添加到主屏幕提示应用启动时
include a manifest.json
file with the following properties:
包含具有以下属性的manifest.json
文件:
short name
short name
name
name
192x192
size of png
icon
192x192
大小的png
图标
start_url
start_url
{ "name": "FreeCodeCamp", "short_name": "FreeCodeCamp", "theme_color": "#00FF00", "background_color": "#00FF00", "display": "standalone", "Scope": "/", "start_url": "/", "icons": [ { "src": "assets/images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null}
name
is the name of the web app. (It will be shown in the launch screen)
name
是网络应用程序的名称。 (它将显示在启动屏幕中)
short name
is the short name of the web app. (It will be shown below the icon of phone menu)
short name
是Web应用程序的简称。 (它将显示在电话菜单图标下方)
theme_color
is the color of the top of the browser.
theme_color
是浏览器顶部的颜色。
background_color
is the background color of the launch screen.
background_color
是启动屏幕的背景色。
display
is the way the web app should display once launched on the phone.
display
是网络应用在手机上启动后应显示的方式。
start_url
define the starting url of the website.
start_url
定义网站的起始URL。
icons
is an array that store all the images location, sizes and type.
icons
是一个数组,用于存储所有图像的位置,大小和类型。
Although this method does not work on iOS and Windows, there is a fallback method.
尽管此方法在iOS和Windows上不起作用,但是有一个备用方法。
On iOS, the “add to homescreen” button must be added manually. Add the following meta tags to the head section of your HTML to support iOS web app icon.
在iOS上,必须手动添加“添加到主屏幕”按钮。 将以下元标记添加到HTML的头部,以支持iOS Web应用程序图标。
On windows phone, add the following meta tags to the head section of your HTML:
在Windows Phone上,将以下元标记添加到HTML的头部:
翻译自:
渐进式web应用程序
转载地址:http://umrwd.baihongyu.com/