當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/11/29 编程问答 25 豆豆

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

漸進式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應用程序圖標。

視窗 (Windows)

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

在Windows Phone上，將以下元標記添加到HTML的頭部：

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

漸進式web應用程序

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的渐进式web应用程序_如何在渐进式Web应用程序中添加到主屏幕的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。