Kuinka lisätä aloitusnäyttöön progressiivisessa verkkosovelluksessa

Lisää aloitusnäytölle

Tässä verkkosovelluksen asennuspalkki on keskittynyt verkkosovellukseen, ja sen ominaisuus on lisätä aloitusnäyttöön.

Lisää etusivulle -selaimen tuki

Lisää etusivulle -toimintoa tukee tällä hetkellä:

  • Kromi
  • iOS Safari

Täältä näet tämän ominaisuuden selaintuen uusimman tilan.

Androidissa

Android-laitteessa Lisää etusivulle -banneri tulee näkyviin automaattisesti, jos täytät tietyt vaatimukset. Näin sen pitäisi näyttää Androidissa:

Lisää aloitusnäyttöön, kun sovellus käynnistetään

kehote tuoda markkinoille

Vaatimukset

sisältää manifest.jsontiedoston, jolla on seuraavat ominaisuudet:

  • short name
  • name
  • 192x192pngkuvakkeen koko
  • start_url
  • sisältää palvelutyöntekijän, joka on sekä rekisteröity että aktivoitu
  • verkkosivusto, jota palveltiin HTTPS: n kautta (voit silti kokeilla tätä paikallisen isännän kanssa ilman HTTPS: ää)
  • verkkosivusto täyttää Chromen määrittelemät sitoutumisheuristiikat

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 }
  • nameon verkkosovelluksen nimi. (Se näkyy käynnistysnäytössä)
  • short nameon verkkosovelluksen lyhyt nimi. (Se näkyy puhelimen valikon kuvakkeen alla)
  • theme_color on selaimen yläosan väri.
  • background_color on käynnistysnäytön taustaväri.
  • display on tapa, jolla verkkosovelluksen tulisi näkyä puhelimeen käynnistämisen jälkeen.
  • start_url määritä verkkosivuston aloitus-URL.
  • icons on taulukko, joka tallentaa kaikkien kuvien sijainnin, koot ja tyypin.

Muilla laitteilla

Vaikka tämä menetelmä ei toimi iOS: ssä ja Windowsissa, on olemassa varamenetelmä.

iOS

IOS: ssä Lisää etusivulle -painike on lisättävä manuaalisesti. Lisää seuraavat sisällönkuvauskentät HTML-koodisi pääosaan tukemaan iOS-verkkosovelluskuvaketta.

Windows

Lisää Windows Phonessa seuraavat sisällönkuvauskentät HTML-koodisi pääosaan: