04/05/2024
Progressive Web Apps (PWA'er) vinder hastigt frem og bliver adopteret af store teknologivirksomheder som Uber, Twitter og Instagram. Da jeg udviklede min første PWA, viste det sig, at understøttelse af en cross-platform brugerdefineret statuslinje var en større udfordring end forventet. Dette indlæg er en hurtig guide til at hjælpe andre med hurtigt at tilpasse PWA statuslinjen, så den fungerer på både Android- og iOS-enheder, inklusive enheder med "notch".
For at kunne ændre statuslinjen øverst på skærmen (som typisk viser klokken og batteristatus) i din progressive web app, skal du konfigurere et par egenskaber for din app for at give et komplet native look and feel.
Android Tilpasning
Chrome, Firefox og Opera giver dig mulighed for at definere farven på statuslinjen ved hjælp af metatags. Dette er en relativt enkel proces, der kan give din PWA et mere integreret udseende på Android-enheder.
Du kan opnå dette ved at tilføje følgende metatag i <head> sektionen af din HTML-fil:
<meta name="theme-color" content="#014473">I dette eksempel er #014473 den hexadecimale farvekode, som du kan erstatte med enhver ønsket farve. Dette vil medføre, at statuslinjen antager den specificerede farve, hvilket forbedrer den visuelle sammenhæng mellem din app og operativsystemet.
Eksempel på Android
Forestil dig en PWA for en nyheds-app. Ved at indstille theme-color til en dyb blå som #014473, vil statuslinjen matche appens branding:
[Her kunne man forestille sig et screenshot af en Android-telefon med en PWA, hvor statuslinjen har en dyb blå farve.]
iOS Tilpasning
På iOS er mulighederne for at tilpasse statuslinjen desværre ret begrænsede. Apple tilbyder dog metatagget apple-mobile-web-app-status-bar-style til at tilpasse statuslinjen. Der er tre distinkte indstillinger tilgængelige: default, black og black-translucent. Standardværdien er default.
Det er vigtigt at bemærke, at dette metatag kun har effekt, hvis du også inkluderer apple-apple-mobile-web-app-capable metatagget.
Nødvendigt Metatag for iOS
Før du kan tilpasse statuslinjen på iOS, skal du angive, at din webapp skal kunne køre som en app:
<meta name="apple-mobile-web-app-capable" content="yes">Dette metatag fortæller iOS, at din PWA skal behandles som en native app, hvilket muliggør yderligere tilpasningsmuligheder.
Tilpasningsmuligheder for iOS Statuslinje
1. Default Indstilling
Standardindstillingen har en hvid baggrund med sort tekst og symboler (klokkeslæt, batteriikon osv.). Dette er standardudseendet for de fleste webapps, der tilføjes til hjemmeskærmen på iOS.
<meta name="apple-mobile-web-app-status-bar-style" content="default">Eksempel:
[Her kunne man forestille sig et screenshot af en iPhone med en PWA, hvor statuslinjen har hvid baggrund og sort tekst.]
2. Black Indstilling
black indstillingen giver en sort baggrund med sort tekst og symboler, hvilket resulterer i en fuldstændig sort statuslinje. Dette kan give et mere stilfuldt og minimalistisk look.
<meta name="apple-mobile-web-app-status-bar-style" content="black">Eksempel:
[Her kunne man forestille sig et screenshot af en iPhone med en PWA, hvor statuslinjen er helt sort.]
3. Black-Translucent Indstilling
black-translucent indstillingen har hvid tekst og symboler. Statuslinjen vil antage den samme baggrundsfarve som <body> i din webapp. Dette giver en gennemsigtig effekt, hvor indholdet af din app skinner igennem statuslinjen.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">For at udnytte denne effekt fuldt ud, skal du også sørge for, at din <body> har en passende baggrundsfarve:
body { background-color: #014473; }Eksempel:
[Her kunne man forestille sig et screenshot af en iPhone med en PWA, hvor statuslinjen er gennemsigtig og viser appens indhold, med en blå baggrund i selve appen.]
Sammenligningstabel
Her er en oversigt over de forskellige muligheder:
| Indstilling | Beskrivelse | Platform |
|---|---|---|
theme-color | Definerer farven på statuslinjen. | Android (Chrome, Firefox, Opera) |
default | Hvid baggrund, sort tekst. | iOS |
black | Sort baggrund, sort tekst. | iOS |
black-translucent | Gennemsigtig baggrund, hvid tekst; tager baggrundsfarve fra body. | iOS |
Ofte Stillede Spørgsmål (FAQ)
Kan jeg ændre farven på teksten i statuslinjen på Android?
Metatagget theme-color på Android styrer primært baggrundsfarven. Tekstfarven tilpasser sig automatisk for at sikre læsbarhed mod den valgte baggrund. Der er ingen direkte metatag-styring af tekstfarven på Android.
Hvad er den bedste måde at håndtere statuslinjen på tværs af platforme?
Den bedste tilgang er at bruge theme-color til Android og vælge en af de tilgængelige stilarter (default, black, black-translucent) for iOS, der passer bedst til din apps design. Det er vigtigt at teste grundigt på begge platforme for at sikre en konsistent brugeroplevelse.
Hvad hvis min PWA bruger mørkt tema?
Hvis din PWA har et mørkt tema, kan du vælge en mørk farve til theme-color på Android, f.eks. #121212. For iOS kan black eller black-translucent (med en mørk baggrund) være gode valg.
Er der nogen begrænsninger ved black-translucent på iOS?
Ja, med black-translucent kan indholdet af din app blive dækket af statuslinjen, hvis du ikke tager højde for det i dit layout. Det er derfor vigtigt at tilføje passende padding eller margin øverst på dit indhold for at undgå overlap.
Afsluttende Bemærkninger
At tilpasse statuslinjen på din PWA kan forbedre brugeroplevelsen markant og give din app et mere professionelt og integreret udseende. Mens Android tilbyder større fleksibilitet med theme-color, giver iOS's muligheder med apple-mobile-web-app-status-bar-style stadig mulighed for at skabe et unikt design. Husk altid at teste dine ændringer på forskellige enheder og operativsystemversioner for at sikre optimal funktionalitet og æstetik.
Hvis du vil læse andre artikler, der ligner Tilpas din PWAs statuslinje, kan du besøge kategorien Apps.