Как да добавите към началния екран в прогресивно уеб приложение

Добави към началния екран

Тук банерът за инсталиране на уеб приложение е фокусиран върху уеб приложението, с функцията за добавяне към началния екран.

Поддръжка на браузъра за добавяне към началния екран

Понастоящем функционалността „Добавяне към началния екран“ се поддържа от:

  • Chrome
  • iOS Safari

Можете да видите най-новото състояние на поддръжката на браузъра за тази функция тук.

На Android

На Android банерът „добавяне към началния екран“ се показва автоматично, ако отговаряте на определени изисквания. Ето как трябва да изглежда на Android:

Добавяне към подканата на началния екран При стартиране на приложението

подканистартиране

Изисквания

включва manifest.jsonфайл със следните свойства:

  • short name
  • name
  • 192x192размер на pngиконата
  • start_url
  • включва сервизен работник, който е едновременно регистриран и активиран
  • уебсайтът, обслужван през HTTPS (все още можете да опитате това с localhost без HTTPS)
  • уебсайтът отговаря на ангажираните евристики, определени от Chrome

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е името на уеб приложението. (Ще се покаже на стартовия екран)
  • short nameе краткото име на уеб приложението. (Ще се покаже под иконата на менюто на телефона)
  • theme_color е цветът на горната част на браузъра.
  • background_color е цветът на фона на стартовия екран.
  • display е начинът, по който уеб приложението трябва да се показва след стартиране на телефона.
  • start_url дефинирайте началния URL адрес на уебсайта.
  • icons е масив, който съхранява всички изображения, местоположение, размери и тип.

На други устройства

Въпреки че този метод не работи на iOS и Windows, има резервен метод.

iOS

В iOS бутонът „добавяне към началния екран“ трябва да бъде добавен ръчно. Добавете следните мета тагове към главата на вашия HTML, за да поддържате иконата на уеб приложение за iOS.

Windows

В Windows Phone добавете следните мета тагове към главата на вашия HTML: