當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

渐进式web应用程序_如何在渐进式Web应用程序中添加到主屏幕

發(fā)布時(shí)間：2023/11/29 编程问答 51 豆豆

生活随笔收集整理的這篇文章主要介紹了渐进式web应用程序_如何在渐进式Web应用程序中添加到主屏幕小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

漸進(jìn)式web應(yīng)用程序

添加到主屏幕 (Add To Homescreen)

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

在此，Web應(yīng)用程序安裝標(biāo)語(yǔ)專注于Web應(yīng)用程序，具有添加到主屏幕的功能。

瀏覽器對(duì)“添加到主屏幕”的支持 (Browser Support for Add To Homescreen)

Add to Homescreen functionality is currently supported by:

當(dāng)前受“添加到主屏幕”功能的支持：

Chrome
Chrome
iOS Safari
iOS Safari

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

您可以在此處查看該功能的瀏覽器支持的最新?tīng)顟B(tài)。

在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上，如果您滿足某些要求，則會(huì)自動(dòng)顯示“添加到主屏幕”橫幅。這是在Android上的外觀：

Add to homescreen promptWhen app launched

添加到主屏幕提示應(yīng)用啟動(dòng)時(shí)

要求 (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圖標(biāo)
start_url
start_url
include a service worker that is both registered and activated
包括已注冊(cè)和激活的服務(wù)人員
the website served over HTTPS (you can still try this with localhost without HTTPS)
該網(wǎng)站通過(guò)HTTPS提供服務(wù)(您仍然可以在沒(méi)有HTTPS的情況下使用localhost嘗試此操作)
the website meets engagement heuristics defined by Chrome
該網(wǎng)站符合Chrome定義的互動(dòng)啟發(fā)法

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是網(wǎng)絡(luò)應(yīng)用程序的名稱。 (它將顯示在啟動(dòng)屏幕中)
short name is the short name of the web app. (It will be shown below the icon of phone menu)
short name是Web應(yīng)用程序的簡(jiǎn)稱。 (它將顯示在電話菜單圖標(biāo)下方)
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是啟動(dòng)屏幕的背景色。
display is the way the web app should display once launched on the phone.
display是網(wǎng)絡(luò)應(yīng)用在手機(jī)上啟動(dòng)后應(yīng)顯示的方式。
start_url define the starting url of the website.
start_url定義網(wǎng)站的起始URL。
icons is an array that store all the images location, sizes and type.
icons是一個(gè)數(shù)組，用于存儲(chǔ)所有圖像的位置，大小和類型。

在其他設(shè)備上 (On other devices)

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

盡管此方法在iOS和Windows上不起作用，但是有一個(gè)備用方法。

的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上，必須手動(dòng)添加“添加到主屏幕”按鈕。將以下元標(biāo)記添加到HTML的頭部，以支持iOS Web應(yīng)用程序圖標(biāo)。

視窗 (Windows)

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

在Windows Phone上，將以下元標(biāo)記添加到HTML的頭部：

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