Få Din Cordova-app til at Se Nativ Ud på iPhone X

I vores tidligere diskussioner har vi berørt udfordringerne ved at tilpasse web-apps til iPhone X's unikke skærm. Men for mange af jer, der arbejder med Cordova eller Monaca, opstår der et sæt lignende, men alligevel specifikke, problemstillinger, når målet er at skabe en app, der føles og ser ud som en ægte nativ app. Denne anden del af vores serie dykker ned i, hvordan du kan få din Cordova-app til at opføre sig fejlfrit på iPhone X.

At understøtte iPhone X i en Cordova-app handler i bund og grund om at understøtte iPhone X WebView. Lad os udforske, hvad der sker, når vi viser Cordova-apps i iPhone X WebView på samme måde, som vi undersøgte web-apps i første del.

Forberedelse af Din Cordova-app til iPhone X

Før vi dykker ned i løsningerne, lad os sætte en standard Cordova-app op. Vi vil bruge Vue. Her er de softwareversioner, vi anvender:

• [email protected]
• [email protected] (Kerne pakke)
• [email protected] (Yderligere pakke til Vue)
• [email protected]
• [email protected]
• Xcode 9.0

Opsætning af Projektet

For eksisterende Cordova + Vue-projekter kan de nødvendige pakker installeres via NPM eller Yarn:

# NPM npm install onsenui vue-onsenui --save-dev # Yarn yarn add onsenui vue-onsenui -D

Husk at inkludere de nødvendige filer i din app:

import 'onsenui/css/onsenui.css'; // Webpack CSS import import 'onsenui/css/onsen-css-components.css'; // Webpack CSS import import VueOnsen from 'vue-onsenui'; Vue.use(VueOnsen);

Hvis du starter et nyt projekt, kan du bruge Vue CLI:

vue init OnsenUI/vue-cordova-webpack # For Cordova apps

Efter opsætning af Cordova, Vue og OnsenUI, kan du oprette App.vue og NotesPage.vue og implementere et faneblads-mønster, som vist i den oprindelige guide.

Problem I: Kampen mod de Hvide Tomme Områder

I første del af vores serie beskrev vi 'Problem I' – de hvide, blanke områder, der automatisk indsættes på begge sider af iPhone X Safari. Lad os nu undersøge, om dette problem også eksisterer i iPhone X WebView, når vi kører en Cordova-app.

cordova platform add ios npm run build && cordova run ios --target="iPhone-X"

Når vi tester vores Cordova-app i portrættilstand, ser vi desværre, at de blanke områder stadig vises. Dette indikerer, at Problem I også påvirker Cordova-apps.

Hvad sker der så i landskabstilstand? Her bliver situationen endnu mere udtalt; blanke områder dukker op på venstre, højre og nederste side. Det er tydeligt, at Problem I fortsat er en udfordring for Cordova-apps.

Løsningen på Problem I: viewport-fit=cover

Heldigvis kan dette problem løses på samme måde som for web-apps: ved at indstille viewport-fit til cover i din meta-tag:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

Ved at tilføje viewport-fit=cover fortæller du enheden, at WebView skal strække sig helt ud til kanterne af skærmen, selv over iPhone X's 'hak' og de afrundede hjørner. Dette sikrer, at din app udnytter hele skærmarealet og eliminerer de uønskede hvide kanter.

Vigtigt Tip: UIWebView vs. WKWebView

iOS 11 introducerede to WebViews: den ældre UIWebView (som er standard i mange Cordova-projekter og ikke længere anbefales af Apple) og den nyere WKWebView (anbefalet af Apple).

I UIWebView peger auto-værdien for viewport-fit på contain, hvilket betyder, at vi manuelt skal ændre den til cover for at løse Problem I. Men i WKWebView peger auto på cover som standard. Dette betyder, at Problem I allerede er løst i WKWebView, og du behøver ikke længere at indstille viewport-fit=cover.

WKWebView er en næste-generations API, der generelt fungerer mere stabilt og yder bedre end UIWebView. Hvis du bruger Cordova, anbefaler vi kraftigt at erstatte UIWebView med WKWebView ved hjælp af cordova-plugin-wkwebview-engine pluginnet. Selvom WKWebView har nogle mindre ulemper, opvejer fordelene typisk disse.

Problem III: Mysteriet om de Sorte Tomme Områder

I web-apps kunne vi, når Problem I var løst, straks arbejde på Problem II (hak, afrundede hjørner og den nederste bjælke, der skjuler indhold). Men i Cordova-apps er situationen anderledes. Selv efter at have løst Problem I, kan vi ikke umiddelbart tage fat på Problem II, fordi der opstår et andet problem: 'Problem III'.

Lad os se, hvad der sker på hele skærmen, efter at Problem I er løst. Du vil bemærke sorte, blanke områder – øverst/nederst i portrættilstand og venstre/højre/nederst i landskabstilstand. Dette er, hvad vi kalder Problem III.

Selvom det ligner Problem I, er princippet bag det anderledes. Problem III skyldes en specifikation for iPhone X: alle apps, der ikke opfylder en bestemt betingelse, vises automatisk i det sikre område. Betingelsen er som følger:

"Aktiver fuld skærm med nativ opløsning. Din app kører i fuldskærmstilstand på iPhone X, hvis dit projekts grundlæggende SDK er sat til iOS 11, og du har et Launch Storyboard eller et iPhone X startbillede."

Lad os uddybe den citerede del. iOS har to metoder til at vise startskærme (splash screens):

1. En gammel metode, der simpelthen viser et billede (standard i Cordova, ikke anbefalet af Apple).
2. En ny metode, der viser et billede med en vis strækning og beskæring baseret på en mekanisme kaldet Launch Storyboard (anbefalet af Apple).

Løsningen på Problem III: Fuldskærms-understøttelse via Launch Storyboard

I tilfælde af den gamle metode (1), hvis din Cordova-app ikke indeholder et billede, der har samme størrelse som iPhone X-skærmopløsningen (1125 x 2436 px), vil appen blive vist i det sikre område. Ved at tilføje et billede med størrelsen 1125 x 2436 px løser dette problem, og appen vises i fuld skærm.

I tilfælde af den nye metode (2), vil alle Cordova-apps altid blive vist i fuldskærm. For at bruge denne metode skal du tilføje cordova-plugin-splashscreen pluginnet til din Cordova-app:

cordova plugin add cordova-plugin-splashscreen

Derudover skal de billeder, som startskærmen består af, defineres i <platform name="ios">-sektionen i din config.xml:

<splash src="res/screen/ios/Default@2x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@2x~iphone~comany.png" /> <splash src="res/screen/ios/Default@2x~iphone~comcom.png" /> <splash src="res/screen/ios/Default@3x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@3x~iphone~anycom.png" /> <splash src="res/screen/ios/Default@3x~iphone~comany.png" /> <splash src="res/screen/ios/Default@2x~ipad~anyany.png" /> <splash src="res/screen/ios/Default@2x~ipad~comany.png" />

De faktiske billedfiler skal naturligvis tilføjes. Størrelsen af hvert billede skal som udgangspunkt følge dokumentationen for cordova-plugin-splashscreen. Dog, for enheder med Super Retina-skærm (@3x), som har 3x opløsning, anbefaler vi at indstille billedstørrelsen til 2436 x 1242 px. Dette sikrer, at billedet dækker den længste langside af iPhone X (2436px) og den længste kortside af iPhone 8 Plus (1242px).

Bemærk, at i tilfælde af Launch Storyboard-metoden (2), vises apps altid i fuld skærm, og størrelsen af hvert billede påvirker kun startskærmens adfærd og ikke appens størrelse.

Detaljeret Guide: Implementering af Launch Storyboard i Xcode

Brug af Launch Storyboard som startskærm er den anbefalede metode. Startskærmsbilleder dimensioneres baseret på skala, idiom og størrelsesklasser. Denne metode understøtter alle enheder og kan bruges med split-screen/slide-over multitasking, hvilket giver en meget mere fleksibel og fremtidssikret løsning.

Krav til Launch Storyboard-billedet:

• Billedet skal være kvadratisk.
• Billedet skal være stort nok til at passe på en iPad Pro 12.9": 2732x2732 px.
• Ethvert vigtigt indhold skal passe inden for midten af billedet.

Når det enkelte 2732x2732 px billede er oprettet, kan du inkludere det i dit projekt ved at tilføje følgende til din ydre config.xml:

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />

Placér billedet i res/screen/ios-stien med navnet Default@2x~universal~anyany.png.

Forberedelse og Xcode-konfiguration:

Forbered derefter dit Cordova/Ionic-projekt ved hjælp af kommandoen:

cordova prepare --nofetch

Åbn projektet i Xcode, og naviger til General-fanen. Under App icon and Launch Screen skal du foretage følgende indstillinger:

• Sæt Launch image Sources til Don't use Asset Catalog.
• Sæt Launch Screen File til CDVLaunchScreen.storyboard.

Disse trin sikrer, at din Cordova-app korrekt udnytter Launch Storyboard til at opnå fuldskærm på iPhone X og andre iOS-enheder, hvilket eliminerer Problem III.

Hvad med Problem II? Navigering omkring Hak og Afrundede Hjørner

Når både Problem I og Problem III er løst, er din app klar til at tackle Problem II – udfordringen med, at indhold kan blive skjult af iPhone X's 'hak' (notch), de afrundede hjørner og den nederste hjemmebjælke. Selvom denne artikel primært fokuserer på at opnå fuldskærm og eliminere blanke områder, er det vigtigt at anerkende, at Problem II er det næste skridt i at skabe en fuldt optimeret og nativ-lignende oplevelse. Løsninger på Problem II involverer typisk brug af CSS-variabler som safe-area-inset-top, safe-area-inset-bottom osv., som giver dig mulighed for at tilpasse dit layout dynamisk for at undgå at indhold skjules af hardware-elementer.

Ofte Stillede Spørgsmål (OSS)

Hvad er den primære forskel mellem UIWebView og WKWebView for Cordova-apps?

UIWebView er en ældre WebView-komponent, der ikke længere anbefales af Apple. Den kræver manuel justering (f.eks. viewport-fit=cover) for at håndtere iPhone X's skærm korrekt. WKWebView er den nyere, anbefalede komponent, der som standard håndterer mange af disse skærmproblemer automatisk (f.eks. viewport-fit er cover som standard) og tilbyder bedre ydeevne og stabilitet.

Hvorfor får jeg sorte eller hvide blanke områder i min Cordova-app på iPhone X?

Hvide blanke områder (Problem I) opstår, fordi WebView ikke udfylder hele skærmen, ofte på grund af standardindstillinger for viewport-fit. Sorte blanke områder (Problem III) opstår, fordi appen ikke opfylder kravene til fuldskærm med nativ opløsning på iPhone X, typisk fordi den ikke bruger et Launch Storyboard eller et korrekt dimensioneret iPhone X startbillede.

Hvordan løser jeg problemet med hvide blanke områder forårsaget af viewport-fit?

For at løse Problem I skal du tilføje viewport-fit=cover til din <meta name="viewport">-tag i din HTML-fil. Hvis du bruger WKWebView, er dette ofte ikke nødvendigt, da cover er standard.

Hvad er Launch Storyboard, og hvorfor skal jeg bruge det?

Launch Storyboard er Apples anbefalede metode til at vise startskærme. Det er en fleksibel, billedbaseret mekanisme, der sikrer, at din app vises i fuldskærm med nativ opløsning på iPhone X og andre enheder. Det løser Problem III ved at fortælle iOS, at din app er optimeret til den fulde skærm, uanset enhedens størrelse eller orientering.

Hvilke Cordova-plugins er vigtige for iPhone X-kompatibilitet?

For optimal iPhone X-kompatibilitet anbefales to plugins: cordova-plugin-wkwebview-engine for at opgradere til den nyere WebView og cordova-plugin-splashscreen for at aktivere Launch Storyboard-funktionaliteten og sikre korrekt fuldskærmsstart.

Skal jeg løse Problem II i denne artikel?

Nej, denne artikel fokuserer primært på at løse Problem I (hvide blanke områder via viewport-fit og WKWebView) og Problem III (sorte blanke områder via Launch Storyboard og fuldskærms-understøttelse). Problem II, som handler om at tilpasse indhold til 'hak' og afrundede hjørner, er et separat optimeringsskridt, der typisk håndteres med CSS 'safe-area' variabler, efter at de grundlæggende skærmproblemer er løst.

Ved at følge de trin og anbefalinger, der er beskrevet i denne guide, vil du være godt på vej til at skabe en Cordova-app, der ikke blot fungerer, men også ser fantastisk og nativ-lignende ud på iPhone X's unikke skærm. Fokuser på viewport-fit og Launch Storyboard for at sikre, at din app udnytter det fulde skærmareal effektivt.

Hvis du vil læse andre artikler, der ligner Få Din Cordova-app til at Se Nativ Ud på iPhone X, kan du besøge kategorien Mobiludvikling.