Natiivimaisten progressiivisten Web-sovellusten suunnittelu iOS: lle

Yksi Progressiivisen Web-sovelluksen (PWA) pääominaisuuksista on sovelluksen samankaltaisuus. Vaikka sovelluksesi toimii teknisesti selaimessa, sinun tulee pyrkiä siihen, että se näyttää - ja tuntuu - yhtä hyvältä kuin alkuperäinen sovellus. Tähän sisältyy sen asentaminen aloitusnäyttöön, mukautetun kuvakkeen lisääminen, osoiterivin poistaminen käytöstä ja niin edelleen. Toisin kuin Android, jolle Web App Manifest tuottaa automaattisesti useita natiivimaisia ​​ominaisuuksia, iOS vaatii joitain ylimääräisiä HTML- ja CSS-temppuja. Tässä on seitsemän ehdotusta siitä, miten voit tehdä PWA: stasi alkuperäismalli-iOS: n.

1. Tee siitä itsenäinen

IW: llä on kaksi tapaa saada PWA toimimaan itsenäisenä sovelluksena (ts. Uudessa ikkunassa ilman web-selaimen käyttöliittymäohjaimia). Ensimmäinen tapa on käyttää omena-mobiili-web-sovellus-yhteensopivaa metatunnistetta HTML-koodisi pääelementissä seuraavalla koodilla.

Toinen tapa on asettaa Web App Manifestin näyttöominaisuus itsenäiseksi. Esimerkki Web-sovellusten manifestista voi näyttää seuraavalta.

{
   "nimi": "Appscope",
   "näyttö": "itsenäinen",
   "kuvakkeet": [{
      "src": "kuvakkeet / icon-192.png",
      "koot": "192x192"},
   {
      "src": "kuvakkeet / icon-512.png",
      "koot": "512x512"}
   ]
}

2. Lisää mukautettu kuvake

Valitettavasti iOS ei käytä Web App Manifestissa määritettyjä kuvakkeita. Sen sijaan, jotta voit käyttää mukautettua kuvaketta kaikilla sovelluksesi sivuilla, sinun on annettava kuvake PNG-muodossa ja nimi apple-touch-icon.png PWA: n juurikansiokansiossa.

Jos haluat lisätä tietyn kuvakkeen yhdelle sovelluksesi sivulle, käytä seuraavaa riviä HTML-koodisi otsikkoelementissä.

Eri iOS-laitteet käyttävät erikokoisia aloitusnäyttökuvakkeita. Jos haluat määrittää kuvakkeen tietylle koossa, käytä linkielementin size-attribuutti. Jos laitteen suositellulle kuvakokolle ei määritetä kuvaketta, sen sijaan käytetään kuvaketta, jonka koko on pienin kuin suositeltu.

Seuraava esimerkki, joka määrittelee koot tavallisimmille iOS-laitteille, on Applen Safari Web Content Guide -oppaasta.




Muista, että iOS vaatii läpinäkymättömiä kuvakkeita. Kaikki kuvakkeen läpinäkyvät osat värjätään mustalla.

3. Lisää mukautettu splash-näyttö

Splash-näyttö Appscopelle

Seuraava askel Progressive Web App -sovelluksen luontaisemmaksi muuttamiseksi on korvata tylsä, valkoinen aloitusnäyttö omalla kuvallasi. Lisää mukautettu splash-näyttö käyttämällä seuraavaa linkielementtiä.

Jotta tämä kuva voisi näkyä, on tärkeää, että sen mitat ovat samat kuin laitteen, jolla sovellusta käytetään, mitat. Esimerkiksi, jos haluat työskennellä iPhone X: ssä, Käynnistä.png on oltava kooltaan 1125 x 2436 pikseliä. Tässä ilmenee ongelma, että on olemassa useita iOS-laitteita, joilla on eri resoluutio, ja valitettavasti emme voi vain toistaa tätä koodia useita kertoja erikokoisille kuville. Sen sijaan meidän on käytettävä mediaattribuuttia määrittääksesi, mikä käynnistyskuva on tarkoitettu mihin laitteeseen.

Lisää seuraava koodi PWA: n pääelementtiin tukemaan mukautettuja aloitusnäyttöjä eri iOS-laitteille.










Jos tarvitset apua PWA-laitteesi splash-näytöiden asettamiseen, tutustu Splash Screen Generator -sovellukseen Appscope-sivustossa.

4. Vaihda tilarivi

Tilapalkit, joissa on musta läpikuultava, musta ja oletusasetus

Voit myös mukauttaa PWA: n iOS-tilarivin (näytön yläreunaa pitkin oleva aika, joka näyttää ajan ja akun tilan). Jotta voit tehdä tämän, sinun on käytettävä omena-mobiili-web-sovellus-tila-palkki-tyylistä metatunnistetta koodisi pääelementissä.

Valitettavasti tilarivin mukauttamistapojen lukumäärä on melko rajallinen, mutta Apple tarjoaa kolme erillistä asetusta sisältömääritteelle.

  • oletustulos on valkoinen tilarivi, jossa on musta teksti ja symbolit.
  • musta antaa mustan tilarivin ja mustan tekstin ja symbolit, jolloin se näyttää kokonaan mustalta. Jos et käytä tilarivin sisällönkuvauskenttää, tämä näyttää tilariviltä.
  • mustasta läpikuultavasta tuloksena on valkoinen teksti ja symbolit, ja tilarivillä on sama taustaväri kuin Web-sovelluksen runkoelementillä.

5. Anna sille lyhyt nimi

PWA-laitteesi otsikko näkyy aloituskuvakkeen alla aloitusnäytössä. Lyhennysten välttämiseksi tämän otsikon ei tulisi olla pidempi kuin 12 merkkiä, vaikka se lopultakin pienenee käytettyjen merkkien leveyteen (esimerkiksi w-kirjain on leveämpi kuin kirjain i.) Jos PWA: n alkuperäinen nimi ei mahtuu kuvakkeen alle, voit määrittää nimen lyhyen version.

Yksi tapa määrittää lyhyt nimi PWA: lle on käyttää omena-mobiili-web-sovellus-otsikko-metatunnistetta seuraavan rivin kanssa koodisi pääelementissä.

Toinen tapa on käyttää short_name -ominaisuutta Web App Manifestissä. Esimerkki Web-sovellusten manifestista voi näyttää seuraavalta.

{
   "nimi": "pieni alkemia 2",
   "lyhyt_nimi": "Alkemia 2",
   "kuvakkeet": [{
      "src": "/public/icons/icon-192x192.png",
      "koot": "192x192"},
    {
      "src": "/public/icons/icon-512x512.png",
      "koot": "512x512"}
   ]
}

6. Poista valinta, korostaminen ja huomautukset käytöstä

Oletuksena iOS-selain lisää tiettyjä interaktiivisia tehosteita teksteille ja linkkeille, joita natiivisovelluksissa ei ole. Siksi, jotta PWA tuntuu luonnollisemmalta - ja vähemmän kuin verkkosivustolta tai dokumentilta -, voit poistaa nämä vaikutukset käytöstä (tai ainakin osittain poistaa käytöstä). Seuraavat alajaksot kohdistuvat kolmeen yleisimpiin vaikutustyyppeihin.

6.1 Poista tekstin valinta käytöstä

Tekstivalinta New York Timesissa

Aivan kuten useimmat natiivit iOS-sovellukset eivät salli tekstin valintaa, voit poistaa tämän ominaisuuden käytöstä PWA-laitteessa. Aseta tämä määrittämällä -webkit-user-select CSS -ominaisuus arvoon mitään elementeille, joita et halua valita. Jos haluat poistaa tekstivalinnan kokonaan pois käytöstä, määritä ominaisuus vartaloelementille.

vartalo {
   -webkit-user-select: ei mitään;
}

6.2 Poista korostus käytöstä

Linkin korostus New York Timesissa

Kun napautat linkkiä iOS-selaimessa, elementin ympärille tulee harmaa ruutu. Vaikka tämän vaikutuksen poistamiseksi käytöstä ei ole yksinkertaista tapaa, voit muuttaa korostusvärin läpinäkyväksi ja siten tehdä siitä tehokkaan katoamisen. Voit tehdä tämän PWA: llesi asettamalla -webkit-tap-korosta-väriominaisuuden läpinäkyväksi halutuille elementeille (tai määritä se runkoelementille, jotta linkin korostaminen poistetaan käytöstä kaikilla elementeillä).

vartalo {
   -verkkokokoelma-napauta-korosta -väri: läpinäkyvä;
}

6.3 Poista huomautukset käytöstä

Linkkihuomautus New York Timesissa

Jos napautat ja pidät jotakin elementtiä iOS-selaimessa, se avaa huomautusvalikon (kuten yllä). Jos haluat poistaa tämän vaikutuksen iOS: ssä käytöstä, aseta -webkit-touch-huomautusominaisuudeksi ei mitään haluttujen elementtien kohdalla. Jos haluat poistaa kaikkien elementtien vaikutuksen käytöstä, määritä ominaisuus vartaloelementille.

vartalo {
   -Webkit-touch-huomioteksti: ei mitään;
}

7. Ota napautehosteet käyttöön

Napauta tehoste (: aktiivinen) Little Alchemy 2: lla

Sen sijaan, että käyttäisit oletuksena harmaata korostusta linkkiä napauttaessasi, voit lisätä omia napautuksen tehosteita. Sisällyttämällä ontouchstart-määrite koodisi tunnisteeseen ja pitämällä sen arvo tyhjänä, linkit ja muut elementit näyttävät niiden: hover ja: aktiiviset tehosteet, kun niitä napautetaan. Käytä seuraavaa koodia ja pelaa ympäri eri: lever ja: aktiiviset tyylit löytääksesi PWA: llesi parhaiten vaikuttavat tehosteet.


   
      ...
   
   
      ...
   

Appscope on johtava hakemisto progressiivisille verkkosovelluksille ja tarjoaa kokoelman parhaista verkkopohjaisista sovelluksista, jotka ovat yhteensopivia kaikkien laitteiden kanssa.