漸進式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:

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

• Chrome
  Chrome
• iOS Safari
  iOS 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應用程序