Hogyan lehet hozzáadni a kezdőképernyőhöz egy progresszív webalkalmazásban

Hozzáadás a kezdőképernyőhöz

Itt a webalkalmazás telepítési sávja a webalkalmazásokra összpontosít, azzal a funkcióval, hogy hozzáadja a kezdőképernyőhöz.

A Hozzáadás kezdőképernyőhöz böngészőtámogatás

A Hozzáadás a kezdőképernyőhöz funkciót jelenleg a következők támogatják:

  • Króm
  • iOS Safari

A funkció böngészőtámogatásának legújabb állapotát itt tekintheti meg.

Androidon

Androidon az „add to homecreen” szalaghirdetés automatikusan megjelenik, ha megfelel bizonyos követelményeknek. Így kell kinéznie az Androidon:

Hozzáadás a kezdőképernyőhöz Amikor az alkalmazás elindult

gyorsdob

Követelmények

tartalmazzon egy manifest.jsonfájlt a következő tulajdonságokkal:

  • short name
  • name
  • 192x192pngikon mérete
  • start_url
  • tartalmaz egy regisztrált és aktivált szolgáltató munkatársat
  • a webhely HTTPS-en keresztül szolgált (ezt továbbra is kipróbálhatja a localhosttal HTTPS nélkül)
  • a webhely megfelel a Chrome által meghatározott elkötelezettségi heurisztikának

manifeszt.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 }
  • namea webalkalmazás neve. (Megjelenik az indító képernyőn)
  • short namea webalkalmazás rövid neve. (A telefon menü ikonja alatt jelenik meg)
  • theme_color a böngésző tetejének színe.
  • background_color az indító képernyő háttérszíne.
  • display a webalkalmazásnak meg kell jelennie, miután elindította a telefont.
  • start_url határozza meg a webhely kezdő URL-jét.
  • icons egy tömb, amely az összes kép helyét, méretét és típusát tárolja.

Más eszközökön

Bár ez a módszer nem működik iOS és Windows rendszereken, van egy tartalék módszer.

iOS

IOS rendszeren az „add to homecreen” gombot manuálisan kell hozzáadni. Az iOS webalkalmazás ikonjának támogatásához adja hozzá a következő metacímkéket a HTML fejlécéhez.

ablakok

Windows Phone rendszeren adja hozzá a következő metacímkéket a HTML fejrészéhez: