Webapplikationer, som kan benyttes offline, har hidtil været henvist til at benytte specielle plugins som Google Gears eller browser-specifikke tricks, men med den kommende HTML5-specifikation er der et bud på en browser-uafhængig teknologi, som kan benyttes til formålet.
Det er to funktioner i HTML5, som gør det muligt at vise lokale websider og gemme data på brugerens pc: Appcache, der lader browseren opføre sig, som om der befandt sig en lokal webserver på brugerens pc, og Localstorage, som gør det muligt at gemme strenge lokalt og vedvarende, op til fem megabyte for hvert domæne. Localstorage-funktionen gemmer nøgler og værdier i en hashtabel, der skrives til disk lokalt og gemmes fra session til session.
Appcache minder i al væsentlighed om samme funktionalitet i Google Gears-pluginen, som nu er sendt på pension. Det er ikke så mærkeligt, da hovedmanden bag HTML5-specifikationen er Googles Ian Hickson. Prosabladet har tidligere gennemgået, hvorledes man udvikler offline-webapps med Google Gears, og den gode nyhed er, at teknologien er blevet væsentlig nemmere at have med at gøre i HTML5-udgaven.
Det centrale i offline-applikationer er et såkaldt cache-manifest, som er en simpel tekstfil, der giver direktiver om, hvilke ressourcer såsom HTML-filer, CSS, Javascript og mediefiler der skal gemmes lokalt. Cache-manifestet angiver også, hvilke filer der kun kan benyttes, når der er netværksadgang, og en fallback-mekanisme, som for eksempel kan vise en bestemt cached side som erstatning for online-sider, når der ikke er netværksadgang.
Cache-manifestet erklæres i HTML-dokumentets HTML-element. Det ser sådan ud:
<!DOCTYPE HTML>
<html manifest="manifest.php">
DOCTYPE-erklæringen i dokumentets start fortæller browseren, at vi ønsker at benytte HTML5-funktioner, og manifest-attributten i HTML-elementet angiver URL'en til cache manifest-filen, i eksemplet 'manifest.php'. Manifest-filen kan hedde lige, hvad det skal være, og være statisk eller en script-fil, men webserveren skal afsende manifestfilen med mime-typen 'text/cache-manifest'.
Til denne artikel har vi udviklet en testapplikation, som bygger videre på eksemplet fra artiklen om Google Gears. Testapplikationen kan downloades fra prosa.dk/link/433. Applikationen er en simpel webnotesblok. Når filen notesblok.html kaldes, aktiveres et Ajax-kald til serveren, som henter den sidst gemte note. Hvis serveren ikke svarer, er applikationen i offline-tilstand og henter i stedet den sidst gemte note fra Localstorage.
Undgå debug-helvede
Når man udvikler HTML5-apps med offline-cache, kan de forskellige caching-mekanismer nemt komme til at spænde ben for hinanden, hvilket kan ende med adskillige udrevne hårtotter for den stakkels udvikler. Derfor er det følgende meget vigtigt at skrive sig bag øret. Det hele vedrører udviklingsfasen, i et produktionsmiljø kan der være andre hensyn.
Når der udvikles, er det vigtigt, at selve cache-manifestet aldrig caches via browserens almindelige HTTP-caching. Det kan gøres ved at sætte et 'expire'-direktiv på webserveren eller, som i det medfølgende eksempel, ved at placere cache-manifestet i en script-fil og sætte de sædvanlige expire-header-felter (gjort i PHP i eksemplet). Ellers gemmer browseren cache-manifestet lokalt i stedet for at hente det frisk fra serveren hver gang.
Dernæst SKAL cache-manifestet ændres, hver gang en ressource, som indgår i cache-manifestet, opdateres. Ellers genopdateres de cachede ressourcer ikke fra serveren. Det lyder langhåret, men betyder ganske simpelt, at man skal indsætte en revisionskommentar såsom '# Revision 117' i cache-manifestet med et nyt nummer, hver gang man piller ved ressourcerne.
Hvis der alligevel er spøgelser i maskinen, kan browserens cache tømmes på sædvanlig vis (I Firefox 3.6: menuen Funktioner > Indstillinger > Netværk > Offline lager > Ryd nu.)
