Ako pridať na domovskú obrazovku v progresívnej webovej aplikácii

Pridať na domovskú obrazovku

Tu je banner na inštaláciu webovej aplikácie zameraný na webovú aplikáciu s funkciou pridania na plochu.

Podpora prehľadávača pre pridanie na domovskú obrazovku

Funkciu Add to Homescreen momentálne podporuje:

  • Chrome
  • iOS Safari

Najnovší stav podpory tejto funkcie v prehliadači nájdete tu.

V systéme Android

V systéme Android sa banner „pridať na plochu“ zobrazí automaticky, ak splníte určité požiadavky. Takto by to malo vyzerať v systéme Android:

Po výzve na pridanie na plochu Pri spustení aplikácie

výzva spustenie

Požiadavky

zahrňte manifest.jsonsúbor s nasledujúcimi vlastnosťami:

  • short name
  • name
  • 192x192veľkosť pngikony
  • start_url
  • zahŕňajú servisného pracovníka, ktorý je registrovaný aj aktivovaný
  • web je prevádzkovaný cez HTTPS (stále to môžete skúsiť s localhost bez HTTPS)
  • web spĺňa heuristiku interakcie definovanú prehliadačom 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 }
  • nameje názov webovej aplikácie. (Zobrazí sa na úvodnej obrazovke)
  • short nameje krátky názov webovej aplikácie. (Zobrazí sa pod ikonou ponuky telefónu)
  • theme_color je farba hornej časti prehliadača.
  • background_color je farba pozadia úvodnej obrazovky.
  • display je spôsob, akým by sa mala webová aplikácia zobraziť po spustení v telefóne.
  • start_url definujte počiatočnú adresu URL webovej stránky.
  • icons je pole, ktoré ukladá všetky umiestnenia, veľkosti a typ obrázkov.

Na iných zariadeniach

Aj keď táto metóda nefunguje v systémoch iOS a Windows, existuje záložná metóda.

iOS

V systéme iOS musí byť tlačidlo „pridať na plochu“ pridané manuálne. Pridajte nasledujúce metaznačky do hlavnej časti kódu HTML, aby ste podporili ikonu webovej aplikácie pre iOS.

Windows

V systéme Windows Phone pridajte nasledujúce metaznačky do hlavnej časti kódu HTML: