Hvordan sette opp en HTML5 webside for Offline Cache

February 22  by Eliza

De fleste web-baserte applikasjoner fungerer bare hvis du er på nett, som gjør en viss form for fornuft. Men HTML5 har en mekanisme for å tvinge en del av en web-side og sine ressurser for å bli lagret på den lokale maskinen, slik at du kan se det mens du er frakoblet. Du kan ha en side identifisere seg selv for dette problemet og prøve å lagre en kopi på den lokale maskinen automatisk; for eksempel:

<! DOCTYPE HTML>
<Html lang = "no"
manifest = "cache.manifest">
<Head>
<Title> offline.html </ title>
<Meta charset = "UTF-8" />
<Link rel = "stylesheet"
type = "text / css"
href = "offline.css" />
<Script type = "text / javascript"
src = "offline.js">
</ Script>
</ Head>
<Body onload = "setCaption ()">
<H1> Offline Storage Demo </ h1>
<Div>
<Img src = "pot.jpg"
alt = "hånd-etset keramikk" />
<P id = "caption"> </ p>
</ Div>
</ Body>
</ Html>

Mens svært enkel, klarer denne siden for å trekke ressurser fra flere forskjellige filer. Selvfølgelig krever det bildet pot.jpg, men den bruker også en ekstern Javascript-fil (offline.js) og et eksternt stilark (offline.css). HTML5 tilbyr en mekanisme som gjør at nettleseren for å automatisk lagre ikke bare HTML-fil, men alle de andre ressursene den trenger for å vises riktig.

Du ville ikke bygge en så enkel side med så mange eksterne avhengigheter, men det er poenget med denne øvelsen.

Hemmeligheten ligger i en spesiell fil som heter cache.manifest. Denne spesielle filen er bare en tekstfil som angir hvilke andre filer er nødvendig av siden. Her er innholdet i cache.manifest for dette eksempelet:

CACHE MANIFEST
offline.css
offline.js
pot.jpg

Filen må begynne med uttrykket CACHE MANIFEST (alt i store bokstaver). Hver påfølgende linje skal inneholde navnet på en fil som er nødvendig for å fullføre siden. Det er enklest hvis alle filene er i samme katalog, men relative referanser er akseptable.

Følg disse trinnene for å sette opp en side for offline cache:

  1. Sett opp din server for å administrere cacher.

    Cache mekanisme bruker tekst / manifest MIME-type. Din server kan ennå ikke satt opp for denne type data. Hvis du bruker Apache, er dette lett å fikse. Se etter (eller opprett) en tekstfil kalt .htaccess i rotkatalogen på webserveren din. Legg til følgende linje til denne filen:

    AddType tekst / cache-manifest .manifest

    Hvis du ikke har tillatelse til å legge til eller endre .htaccess eller du bruker en annen server, må du kanskje spørre din server administrator for å legge denne MIME-typen.

  2. Lag din manifest fil ved å bygge en tekstfil kalt cache.manifest i samme mappe som prosjektet.

    Gjør den første linjen lese CACHE MANIFEST. På hver påfølgende linje, liste et av aktivaene siden din trenger. Du må kanskje se gjennom kildekoden for å finne de ulike elementene (normalt bilder, CSS og Javascript-filer) som siden din trenger.

  3. Bygg på siden på vanlig måte.

    Holde oversikt over eventuelle eksterne ressurser du måtte trenge.

  4. Indikerer at siden din vil be om lokal lagring ved å legge manifest attributt til <html> -taggen og en link til din cache.manifest fil.
  5. Laste siden din.

    Selvsagt kan du ikke teste cache på en lokal maskin (med mindre du kjører din egen webserver og test gjennom http: // localhost-adresse). Du må laste filer til en server. Den første gangen du prøver å få tilgang til siden, vil nettleseren din sannsynligvis be om tillatelse til å lagre data lokalt. Gi tillatelse til å gjøre det.

  6. Test offline.

    For å se om den siden fungerer, koble fra Internett (ved å deaktivere trådløs din eller frakobling av nettverkskabel). Prøv å laste siden på nytt. Hvis du er vellykket, vil hele siden lastes.

Lesere allerede har en form for cache som automatisk lagrer sider brukeren har besøkt, men denne type cache er en annerledes, mer bevisst form for cache.

Merk at du ikke kan legge linker til server-side eiendeler i cache. En lokal cache kan ikke lagre et PHP program eller database. Imidlertid kan du lagre alle data du trenger på klienten så prosjektet vil fortsatt fungere uten en servertilkobling.

Hvis du endrer cache.manifest fil og test, vil nettleseren ikke oppdatere umiddelbart. Det er fordi nettlesere er satt til å beholde dagens cache for et par timer. Hvis du tester igjen etter et par timer, vil du se endringene reflektert. Under testing, kan du slå den automatiske leseren caching av ved å legge disse linjene til din .htaccess filen:

ExpiresActive På
ExpiresDefault "access"

Det gir bare mening å slå av nettleseren caching på en testserver. La caching oppførsel på sitt standardnivå for en produksjonsserver.

Hvis en av filene endres, men cache.manifest filen ikke, nettleseren vil ikke vite for å laste den endrede filen. Hvis du ønsker å utløse en komplett fil reload, må du endre minst ett tegn i cache.manifest fil. Dette kan være en kommentar, så du kan bare legge til en versjonsnummeret som dette:

#version 3

Endre versjonsnummeret vil utløse reload mekanisme neste gang du er på nettet, slik at offline-versjonen vil være oppdatert.