Design af indfødte-lignende progressive webapps til iOS

En af de vigtigste egenskaber ved en Progressive Web App (PWA) er app-lighed. Selvom din app teknisk køres i webbrowser, skal du stræbe efter at få den til at se - og føle sig - så god som en oprindelig applikation. Det inkluderer, at det kan installeres på startskærmen, tilføje et brugerdefineret ikon, deaktivere adresselinjen osv. I modsætning til Android, som mange oprindelige lignende funktioner automatisk genereres af Web App Manifest, kræver iOS nogle ekstra HTML- og CSS-tricks. Her er syv forslag til, hvordan du gør din PWA mere native-lignende på iOS.

1. Gør det uafhængigt

Der er to måder at få din PWA til at køre som et enkeltstående program (det vil sige i et nyt vindue uden webbrowserens UI-kontrol) på iOS. Den første måde er at bruge det apple-mobile-web-app-kompatible metatag i hovedelementet i din HTML-kode med følgende kode.

Den anden måde er at indstille visningsegenskaben for din Web App Manifest til selvstændig. Et eksempel på Web App Manifest kunne se ud som følgende.

{
   "name": "Appscope",
   "display": "standalone",
   "ikoner": [{
      "src": "ikoner / icon-192.png",
      "størrelser": "192x192"},
   {
      "src": "ikoner / icon-512.png",
      "størrelser": "512x512"}
   ]
}

2. Tilføj et brugerdefineret ikon

Desværre bruger iOS ikke de ikoner, der er specificeret i Web App Manifest. I stedet for at bruge et brugerdefineret ikon til alle sider i din app, skal du angive dit ikon i PNG-format og med navnet apple-touch-icon.png i roddokumentmappen til din PWA.

Hvis du vil tilføje et specifikt ikon for en enkelt side i din app, skal du bruge følgende linje i hovedelementet i din HTML-kode.

Forskellige iOS-enheder bruger forskellige størrelser til ikonerne på startskærmen. Hvis du vil specificere et ikon for en bestemt størrelse, skal du bruge størrelsesattributten for linkelementet. Hvis der ikke er angivet et ikon for den anbefalede ikonstørrelse for enheden, bruges ikonet med den mindste størrelse større end den anbefalede.

Følgende eksempel, der specificerer størrelser for de mest almindelige iOS-enheder, er fra Apples Safari Web Content Guide.




Husk, at iOS kræver uigennemsigtige ikoner. Eventuelle gennemsigtige dele af ikonet vil være farvet sort.

3. Tilføj en brugerdefineret splashskærm

Splash skærm til Appscope

Det næste trin for at gøre din Progressive Web App mere oprindelig-lignende er at erstatte den kedelige, hvide startskærm med dit eget billede. Brug følgende linkelement for at tilføje en brugerdefineret splashskærm.

For at dette billede skal vises, er det vigtigt, at dens dimensioner er de samme som på den enhed, appen kører på. For at arbejde på en iPhone X skal laun.png for eksempel være af størrelsen 1125 med 2436 pixels. Problemet, der opstår her, er, at der er flere iOS-enheder med forskellige opløsninger, og desværre kan vi ikke blot blot gentage denne kode flere gange for billeder i forskellige størrelser. I stedet skal vi bruge medieattributten til at specificere, hvilket lanceringsbillede der er beregnet til hvilken enhed.

Føj følgende kode til hovedelementet i din PWA for at understøtte tilpassede splashskærme til de forskellige iOS-enheder.










Hvis du har brug for hjælp til at oprette splashskærme til din PWA, skal du tjekke Splash Screen Generator på Appscope.

4. Skift statuslinjen

Statuslinjer med indstillinger sort-gennemsigtig, sort og standard

Du kan også tilpasse iOS-statuslinjen (området langs den øverste kant af skærmen, der viser tid og batteristatus) på din PWA. For at gøre dette skal du bruge metatagget apple-mobile-web-app-status-bar-style i hovedelementet i din kode.

Desværre er antallet af måder at tilpasse statuslinjen temmelig begrænset, men Apple tilbyder tre forskellige indstillinger for indholdsattributten.

  • standard resulterer i en hvid statuslinje med sort tekst og symboler.
  • sort resulterer i en sort statuslinje og sort tekst og symboler, hvilket får den til at se helt sort ud. Hvis du ikke bruger statuslinjens metatag, er det sådan, statusbjælken vil se ud.
  • sort-gennemsigtig resulterer i hvid tekst og symboler, og statuslinjen får den samme baggrundsfarve som kropselementet i din webapp.

5. Giv det et kort navn

Titlen på din PWA vises under dens startikon på startskærmen. For at undgå afkortning skal denne titel ikke være længere end 12 tegn, selvom den i sidste ende kommer ned på bredden på de anvendte tegn (for eksempel er bogstavet w bredere end bogstavet i.) Hvis det originale navn på din PWA ikke passer under ikonet, kan du tildele en kort version af navnet.

En måde at specificere et kort navn på din PWA er at bruge metatagget apple-mobile-web-app-title med følgende linje i hovedelementet i din kode.

En anden måde er at bruge egenskaben short_name i dit Web App Manifest. Et eksempel på Web App Manifest kunne se ud som følgende.

{
   "name": "Little Alchemy 2",
   "short_name": "Alchemy 2",
   "ikoner": [{
      "src": "/public/icons/icon-192x192.png",
      "størrelser": "192x192"},
    {
      "src": "/public/icons/icon-512x512.png",
      "størrelser": "512x512"}
   ]
}

6. Deaktiver valg, fremhævning og opkald

Som standard tilføjer iOS-webbrowser visse interaktive effekter til tekster og links, som oprindelige applikationer ikke har. Derfor kan du muligvis deaktivere (eller i det mindste delvis deaktivere) disse effekter for at få din PWA til at føle sig mere oprindelig - og mindre som et websted eller et dokument -. De følgende underafsnit retter sig mod de tre mest almindelige typer effekter.

6.1 Deaktiver valg af tekst

Tekstvalg på New York Times

Ligesom de fleste indbyggede iOS-applikationer ikke tillader valg af tekst, kan du muligvis deaktivere denne funktion i din PWA. For at gøre dette skal du indstille egenskaben -webkit-bruger-vælge CSS til ingen for de elementer, du ikke ønsker at kunne vælges. For at slå tekstvalg helt fra, skal du tildele egenskaben til dit kropselement.

krop {
   -webkit-user-select: ingen;
}

6.2 Deaktiver fremhævning

Link fremhævning på New York Times

Når du tapper på et link i iOS-webbrowseren, vises der en grå boks omkring elementet. Selvom der ikke er nogen enkel måde at deaktivere denne effekt, kan du ændre fremhævelsesfarven til gennemsigtig og dermed effektivt få den til at forsvinde. For at gøre dette for din PWA skal du indstille egenskaben -webkit-tap-fremhæv-farve til gennemsigtig for de ønskede elementer (eller tildele den til body-elementet for at deaktivere link-fremhævning for alle elementer.)

krop {
   -webkit-tap-highlight-farve: gennemsigtig;
}

6.3 Deaktiver opkald

Link udbud på New York Times

Hvis du trykker på og holder på et element i iOS-browseren, åbner det en callout-menu (som den ovenfor). For at deaktivere denne effekt på iOS skal du indstille egenskaben -webkit-touch-callout til ingen for de ønskede elementer. For at deaktivere effekten for alle elementer skal du igen tildele egenskaben til dit kropselement.

krop {
   -webkit-touch-callout: ingen;
}

7. Aktivér tappeeffekter

Tryk på effekt (: aktiv) på Little Alchemy 2

I stedet for at bruge den grå standardmarkering, når du trykker på et link, kan du tilføje dine egne effekter på tryk. Ved at inkludere ontouchstart-attributten i koden til koden og holde dens værdi tom, viser links og andre elementer deres: hover og: aktive effekter, når der tappes. Brug følgende kode og leg rundt med forskellige: hover og: aktive stilarter for at finde de effekter, der fungerer bedst for din PWA.


   
      ...
   
   
      ...
   

Appscope er det førende bibliotek for progressive webapps og tilbyder en samling af de bedste webbaserede applikationer, der er kompatible med alle enheder.