渐进式web应用程序

添加到主屏幕 (Add To Homescreen)

Here the web app install banner is focused on web app, with the feature of add to homescreen.

在此，Web应用程序安装标语专注于Web应用程序，具有添加到主屏幕的功能。

浏览器对“添加到主屏幕”的支持 (Browser Support for Add To Homescreen)

Add to Homescreen functionality is currently supported by:

当前受“添加到主屏幕”功能的支持：

• ChromeChrome
• iOS SafariiOS Safari

You can see the latest status of browser support of this feature here.

您可以在此处查看该功能的浏览器支持的最新状态。

在Android上 (On Android)

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

添加到主屏幕提示应用启动时

要求 (Requirements)

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

• include a service worker that is both registered and activated包括已注册和激活的服务人员
• the website served over HTTPS (you can still try this with localhost without HTTPS)该网站通过HTTPS提供服务(您仍然可以在没有HTTPS的情况下使用localhost尝试此操作)
• the website meets engagement heuristics defined by Chrome该网站符合Chrome定义的互动启发法

manifest.json (manifest.json)

{"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是一个数组，用于存储所有图像的位置，大小和类型。

在其他设备上 (On other devices)

Although this method does not work on iOS and Windows, there is a fallback method.

尽管此方法在iOS和Windows上不起作用，但是有一个备用方法。

的iOS (iOS)

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应用程序图标。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="green">
<meta name="apple-mobile-web-app-title" content="FreeCodeCamp">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-72x72.png" sizes="72x72">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-128x128.png" sizes="128x128">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-384x384.png" sizes="384x384">
<link rel="apple-touch-icon" href="/assets/images/icons/icon-512x512.png" sizes="512x512">

视窗 (Windows)

On windows phone, add the following meta tags to the head section of your HTML:

在Windows Phone上，将以下元标记添加到HTML的头部：

<meta name="msapplication-TileImage" content="/assets/images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="green">

翻译自: https://www.freecodecamp.org/news/how-to-add-to-homescreen-in-a-progressive-web-app/

渐进式web应用程序