Како додати на почетни екран у прогресивној веб апликацији

Додати на почетни екран

Овде је натпис за инсталацију веб апликације фокусиран на веб апликацију, са функцијом додавања на почетни екран.

Подршка прегледача за додавање на почетни екран

Функцију додавања на почетни екран тренутно подржавају:

  • Хром
  • иОС Сафари

Овде можете видети најновији статус подршке прегледача за ову функцију.

На Андроиду

На Андроиду се натпис „додај на почетни екран“ аутоматски појављује ако испуњавате одређене захтеве. Ево како би то требало да изгледа на Андроиду:

Додај на почетни екран упитКада је апликација покренута

промпт лансирање

Захтеви

укључују manifest.jsonдатотеку са следећим својствима:

  • short name
  • name
  • 192x192величина pngиконе
  • start_url
  • укључују услужног радника који је и регистрован и активиран
  • веб локација која се послужује преко ХТТПС-а (ово и даље можете покушати са лоцалхост-ом без ХТТПС-а)
  • веб локација испуњава хеуристику ангажмана коју је дефинисао Цхроме

манифест.јсон

{ "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 дефинишите почетни УРЛ веб странице.
  • icons је низ који чува све локације, величине и врсте слика.

На другим уређајима

Иако овај метод не ради на иОС-у и Виндовс-у, постоји резервни метод.

иОС

На иОС-у, дугме „додај на почетни екран“ мора се додати ручно. Додајте следеће метаознаке у одељак главе ХТМЛ-а да бисте подржали икону иОС веб апликације.

Виндовс

На Виндовс телефону додајте следеће мета ознаке у одељак главе ХТМЛ-а: