HTML5 på mobilen: Muligheder og udfordringer

I en verden, hvor mobile enheder er blevet en uundværlig del af vores hverdag, er udviklingen af effektive og brugervenlige mobilapps afgørende. HTML5 har vist sig at være en stærk platform for dette, især når det kommer til at skabe apps, der fungerer på tværs af forskellige enheder og operativsystemer. Men hvad indebærer det egentlig at bygge en mobilapp med HTML5, og hvilke værktøjer kan hjælpe os med at overkomme de potentielle udfordringer?

Introduktion til Polyfills: Broen til Native Funktionalitet

Forestil dig en fremtid, hvor enhver browser problemfrit understøtter de nyeste teknologier, så snart de opfindes. Med rent HTML og JavaScript ville udviklere kunne tilgå al den native hardware, de drømmer om. Desværre er denne vision endnu ikke en realitet. For at skabe moderne, installerede HTML5-apps, især på mobile enheder, har vi brug for polyfills. En polyfill er essentielt en kodebid, der fungerer som en bro mellem, hvad browseren tilbyder som standard, og hvad din app har brug for for at fungere optimalt. Der findes primært to typer polyfills: kompatibilitets-polyfills, der tilføjer understøttelse for nye W3C-teknologier til browsere, der ikke forstår dem, og polyfills, der tilføjer JavaScript API'er for at tilgå native operativsystemressourcer.

Kompatibilitets-Polyfills: Sikring af Bred Understøttelse

De fleste mobile browsere er i dag langt mere kapable end den historiske laveste standard for webkompatibilitet, Internet Explorer 8. Mange funktioner i HTML5 og CSS3 fungerer allerede på tværs af moderne mobile enheder, herunder mange Android-enheder siden version 2.2. Der er dog stadig undtagelser, især når det gælder avancerede funktioner som SVG (Scalable Vector Graphics) og DataList-tagget.

SVG-kompatibilitet med canvg.js

SVG er uvurderligt til at gengive komplekse diagrammer og farverige ikoner, der ser fantastiske ud på skærme med høj opløsning. Ældre Android-enheder (før version 2.3) understøtter dog ikke SVG. Her kommer canvg.js til undsætning. Ved at deklarere et canvas-element i din HTML og foretage et simpelt JavaScript-kald, kan du indlæse og gengive SVG-filer på disse ældre enheder:

<canvas id="YourIcon" width="32px" height="32px"></canvas> <script language="text/javascript"> canvg('YourIcon', 'IconFile.svg'); </script>

DataList-understøttelse med jQuery.datalist

DataList-tagget er yderst nyttigt til at skabe tekstbokse med forslagslister, hvilket forbedrer brugeroplevelsen betydeligt. Desværre understøttes dette tag hverken af Androids eller iOS's webbrowsere. jQuery-pluginnet jquery.datalist løser dette problem. Du kan strukturere din HTML som en normal HTML5 DataList og derefter blot tilføje et enkelt JavaScript-kald for at implementere funktionen progressivt:

$('input[list]').datalist();

Dette jQuery-kald identificerer alle HTML5 DataLists på siden og anvender derefter data list-effekten via progressiv JavaScript-forbedring.

Adgang til Native Funktioner med Polyfills

Mange HTML5-apps, der installeres på mobile enheder, kræver adgang til enhedens native hardwarefunktioner, som typisk ikke er direkte tilgængelige via browseren. Her spiller værktøjer som Cordova og AppMobi APIs, som tilbydes af Intel XDK New, en central rolle. Disse teknologier muliggør oprettelsen af hybridapps, der kan bygge bro mellem browserens begrænsninger og enhedens native hardware.

Intel XDK New er en ny spiller på markedet for multi-platform HTML-apps. Ved at samle førende teknologier som AppMobi, Impact.js og Cordova leverer Intel en komplet løsning, der eksponerer native funktioner gennem det mere cross-platform-venlige HTML og JavaScript. Et af de primære mål med Intel XDK New er netop at tilbyde denne native kompatibilitets-polyfill-kapacitet, der forbinder din HTML5-app med de nødvendige native ressourcer for at levere en fuldt udstyret applikation.

Med polyfills i Intel XDK New kan du nemt udføre opgaver som at tage billeder, scanne stregkoder, tilgå enhedens kontakter, logge ind på OAuth-apps som Facebook, afspille medier og udnytte enhedens accelerometer. Lad os dykke ned i, hvordan du tilgår enhedens kamera og accelerometer, samt hvordan du optimerer din grafik med det accelererede canvas.

Kamera og Fil-Upload

En af de mest almindelige native hardwarefunktioner, en mobilapp ofte har brug for, er adgang til enhedens kamera. Forestil dig, at din app skal give brugerne mulighed for at tage et billede til deres profilavatar. Her skal du have en måde at tilgå enhedens kamera på.

Selvom W3C's standard API'er for WebRTC (Real-Time Communications), der potentielt kunne give native kameraadgang, stadig er under udvikling, kan de vise sig upraktiske på mobile enheders interfaces sammenlignet med at lancere enhedens native kamera-app. AppMobis "TakePicture" API starter enhedens native kamera-app, hvilket giver brugeren mulighed for at tage et billede. Når billedet er taget, vender din app tilbage i forgrunden og kan returnere en URL (i formatet file://path/on/device.jpg) for at tilgå billedfilen.

Når din app har en reference til filen på den lokale lagerplads, kan du enten vise den i et <img>-tag eller bruge en anden polyfill til at uploade filen til en webserver. Selvom der findes standard JavaScript API'er til filuploads over internettet, fungerer de muligvis ikke, hvis du anvender API'er, der rapporterer fremskridt. AppMobis "uploadToServer" API håndterer kompatibilitetslaget for filuploads og rapporterer fremskridt tilbage til din applikation:

function CapturePhoto() { document.addEventListener("appMobi.camera.picture.add", PicDone); AppMobi.camera.takePicture(70, // Kvalitet mellem 0 og 100 false, // Gem til enhedens bibliotek "jpg"); // jpg eller png } function PicDone (e) { if (e.success) { var urlToPic = AppMobi.camera.getPictureURL(evt.filename); AppMobi.file.uploadToServer(urlToPic, "http://www.yourserver.com/uploadImage.php", // URL "", // Mappe "image/jpeg", // MIME-type "ProgressUpdated"); // Callback } } function ProgressUpdated(bytesSent, totalBytes) { var progress = 0; if(totalBytes > 0) { progress = (bytesSent / totalBytes) * 100; } $('#ProgressDisplay').html(progress + "%”); }

Arbejde med Accelerometeret

Enhedens accelerometer måler, hvordan enheden bevæger sig i 3D-rummet. Dette kan bruges til at tilføje et ekstra interaktionslag ud over blot at trykke på skærmen. Du kan for eksempel lade brugeren rulle ved at vippe enheden eller rydde skærmen ved at ryste den, ligesom en "Etch-a-Sketch". Mange spil bruger accelerometeret til at lade hele enheden fungere som et rat til at navigere gennem virtuelle verdener.

For at tilgå accelerometeret via hybrid-app-tilgangen med polyfills i Intel XDK New, skal du registrere en event-handler med AppMobi.accelerometer.watchAcceleration. Din funktion vil modtage et objekt indeholdende enhedens X-, Y- og Z-position. Når du registrerer din event, skal du også definere, hvor ofte du ønsker, at din funktion skal kaldes for at måle accelerometeret. Hvis intervallet er for langt, vil det føles ureagerende, mens et for kort interval kan forbruge for meget CPU-tid.

Kodeeksemplet nedenfor registrerer en handler for accelerometeret til at rapportere enhedens position 24 gange i sekundet. Film kører typisk med 24 billeder i sekundet, og de fleste afslappede spil fungerer godt ved denne billedhastighed:

AppMobi.accelerometer.watchAcceleration(function(acl) { $('#ACLStatus').html('x: ' + acl.x + 'y: ' + acl.y + 'z: ' + acl.z); }, { frequency: 24 }); // Rapporter 24 gange/sekund

Bemærk: For at teste din app, før du indlæser den på en rigtig enhed, inkluderer Intel XDK New en indbygget funktion til at simulere enhedens bevægelser ved enten at indtaste numeriske værdier for hældning eller ved at trække en 3D-version af telefonen rundt.

Accelereret Canvas: Til Spil og Avanceret Grafik

HTML5-canvas-elementet giver en tegneoverflade, hvor du kan tegne, hvad du vil, direkte på skærmen. Til de fleste formål yder det normale canvas-tag tilstrækkeligt. Men hvis du udvikler spil eller applikationer, der kræver meget af grafikken, har du brug for en højere ydelsesløsning. Her kommer det accelererede canvas ind i billedet.

Det normale canvas-element kører inde i browseren, hvor hver pixel skal evalueres for at se, om der er noget over eller under den, eller om nogen klikker på den. Alle disse funktioner medfører en vis overhead. Med det accelererede canvas opgiver du en del af denne funktionalitet til gengæld for op til ti gange hurtigere tegneydelse. Resultatet er, at du kan skabe grafik-tunge spil på tværs af platforme med næsten native ydeevne.

For at bruge det accelererede canvas i Intel XDK New opretter du ikke en HTML-side med et canvas-tag. I stedet opretter du din app med en enkelt HTML-side uden indhold i <BODY>-tagget. Derefter kalder du AppMobi.canvas.load('YourCanvasScript.js'). Dette initialiserer det accelererede canvas i fuldskærmstilstand. Scriptfilen, som du sender til load-funktionen, vil køre inde i det accelererede canvas.

Denne opdeling mellem kode, der kører "inde i accelereret canvas" og "uden for accelereret canvas", er vigtig. Kode, der kører inde i det accelererede canvas, kan ikke kommunikere direkte med den almindelige HTML-side. For at kalde en funktion på dit canvas fra din HTML-side, skal du udføre AppMobi.canvas.execute('YourCanvasFunction()'). For at kalde en funktion på din HTML-side fra canvas-siden, skal du udføre AppMobi.webview.execute('YourPageFunction()'). Selve canvaset har ikke mulighed for at have elementer, der kan modtage events, så kommunikationen mellem HTML- og det accelererede canvas-lag er kritisk.

Fra et API-perspektiv er de eneste andre væsentlige forskelle mellem API'en brugt til et normalt canvas og det accelererede canvas, hvordan du får konteksten, og nødvendigheden af at kalde present(), når du er færdig med at tegne en frame. På et typisk HTML5 canvas-element opdateres canvaset, hver gang du kalder API-kald som drawLine og fillRect. Det accelererede canvas opnår effektivitet ved at tegne offline og derefter male hele framen til brugergrænsefladen, når du kalder present().

Eksemplet nedenfor opretter en kontekstreference til det accelererede canvas, tegner et rødt rektangel og kalder derefter present() for at male canvaset på skærmen:

var context = AppMobi.canvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(0,0,100,100); context.present();

For mere information om, hvordan du kommer i gang med det accelererede canvas, kan du tjekke "Game Interface Implementation" guiden på Intels hjemmeside.

Konklusion

Udvikling af HTML5-apps på tværs af enheder giver dig mulighed for at skrive din kode én gang og køre den overalt – fra internettet til de nyeste og mest avancerede mobile enheder. Omhyggelig brug af polyfills, som dem der findes i Intel XDK New, giver dig mulighed for at skabe en hybridapp og få adgang til alt, hvad din app har brug for, ved at bygge bro mellem HTML's standardfunktioner og native kapabiliteter. Ved at udnytte disse værktøjer kan du levere fremragende brugeroplevelser, der matcher eller overgår native apps, alt imens du bevarer fordelene ved webteknologier.

Denne artikel er genoptrykt med tilladelse fra Intel Corporation. Dette websted handler med Intel Corporation.

Hvis du vil læse andre artikler, der ligner HTML5 på mobilen: Muligheder og udfordringer, kan du besøge kategorien Teknologi.