Ei ole edes urbaanilegendaa, että usein Turku–Helsinki-väliä junailevat oppivat nopeasti ne radan kohdat, joissa verkkoyhteydet toimivat varmasti ja sähköpostin lähettäminen onnistuu. Monet sovellukset sähköpostista toimisto-ohjelmiin pyörivät nykyään selaimessa ja ilman yhteyttä niitä ei voi käyttää, lisäksi verkkoyhteyden katkeaminen kesken työskentelyn saattaa johtaa ikäviin seurauksiin. Lisäksi mobiiliyhteyksien kanssa toimiessa jokainen turhaan siirretty bitti jarruttaa ärsyttävästi menoa.

Jotta selaimissa pyörivät sovellukset toimisivat myös ilman verkkoyhteyttä, on huolehdittava kahdesta asiasta. Kumpaankin on viimeaikaisessa HTML5-myllerryksessä määritelty erinomaiset työkalut, joita voi käyttää sujuvasti yhdessä tai erikseen.

Osa 1: Sovellus

Jotta sovellus saadaan käyntiin ilman yhteyttä tulee se välimuistittaa. Perinteinen välimuistin vanhenemisaikojen asettaminen ei ole kovinkaan luotettava tapa varmistaa sovelluksen offline-käyttömahdollisuus, vaan kuvaan astuu järempi välimuistituksen muoto, application cache (Joissain yhteyksissä nimellä web cache).

Välimuistituksen ytimenä toimii manifestitiedosto. Siinä ”julistetaan” yhteydettömän käytön edellyttämät välimuistitussäännöt, käytännössä se, mitkä tiedostot ladataan käyttäjän päätelaitteelle.

Manifesti jakaa tiedostot kolmeen osa-alueeseen:

  • Tiedostot, jotka välimuistitetaan. Nämä ladataan välimuistiin kun sivulla vieraillaan ensimmäistä kertaa ja latauksen tilaa voi halutessaan seurata JavaScript-tapahtumien avulla.
  • Tiedostot, joita ei ikinä välimuistiteta. Perustilanteessa tiedostot ovat tässä osiossa, eikä niitä tarvitsisi erikseen listata, mutta osiota voi käyttää ns. white listina mikäli muissa osioissa tiedostoja lisäillään isommalla kauhalla, esimerkiksi kansioittain.
  • Tiedostot, joista käytetään toista versiota yhteyden puuttuessa. Tätä välimuistittuvaa fallback-tiedostoa voi käyttää esimerkiksi kertomaan, että kyseinen toiminto on käytettävissä vain yhteydellisessä tilassa.

Manifestin tarkan muodon voi halutessaan opiskella virallisesta määrittelystä.

Manifesti esitellään HTML-tagissa: <html manifest="manifest.appcache">. Tiedoston nimellä ei ole väliä, mutta tärkeää on, että tiedosto palvellaan mime-tyypillä text/cache-manifest.

Manifestin voi generoida dynaamisesti palvelinpäässä, jolloin käsityön määrää pystyy mukavasti vähentämään. Jotta selain huomaa jonkin välimuistitetun tiedoston päivittyneen, tulee manifestin muuttua. Tähän käytetäänkin usein ns. hash-of-hashes -taktiikkaa, jossa tiedostoon lisätään kommenttina kaikkien tiedostojen tarkistussummista laskettu tarkistussumma, joka siis muuttuu yhdenkin tiedoston sisällön muuttuessa.

Osa 2: Sisältö

Välimuistitetun sovelluksen lisäksi pitää vielä saada varmaan talteen käyttäjän omat tiedot ja muu sovelluksen käyttämä sisältö. Hidaskaan tiedonsiirto ei ärsytä käyttäjää läheskään niin paljoa kuin taivaan tuuliin singahtaneet tiedot.

Perinteisesti pidempään tarvittavaa tietoa on selaimessa tallennettu evästeisiin, mutta evästeeseen voi tallentaa vain neljä kilotavua dataa ja lisäksi eväste kulkee jokaisen HTTP-pyynnön mukana kumpaankin suuntaan kasvattaen tiedonsiirtomäärää tarpeettomasti. Suurempien tietomäärien tallentamiseen on kikkana käytetty Flashin ”poikkeuslupaa” tallentaa domainia kohden kokonaiset sata kilotavua. Tähän tarkoitukseen on jopa kirjoitettu JavaScript-kirjastoja. Maininnan saavutuksistaan ansaitsee myös nyttemmin hyljätty Google Gears.

HTML5-standardissa määritellään avuksi kaksi keskenään samanlaista rajapintaa: localStorage ja sessionStorage. Kaksikko eroaa toisistaan siinä, miten pitkään tallennettua tietoa säilötään ja mitkä tahot tallennettua tietoa voivat käyttää. Yksinkertaisuuden vuoksi keskitytään tässä localStorageen.

LocalStorage mahdollistaa domain-kohtaisesti avain–arvo-parien tallentamisen ja käytön, tilaa tiedolle on oletuksena viiden megatavun edestä, mutta sovellus voi pyytää käyttäjältä lupaa suurempaankin tilaan. LocalStorageen tallennettu tieto säilyy myös mikäli välilehti tai koko selain suljetaan.

Tiedon tallentaminen onnistuu helposti JavaScriptillä: localStorage.setItem('avain', 'arvo'); ja vastaavasti tiedon kaivaminen: localStorage.getItem('avain');

Huomion arvoista on, että tallennettava tieto voi olla ainoastaan tekstimuotoista. Monimutkaisempaa rakennetta tallennettaessa tulee rakenne ensin serialisoida, esimerkiksi JSON-tekstiksi.

Käyttöliittymävetoisia sovelluksia tehdään usein jonkin JavaScript-kehitysalustan avulla, ja niiden kanssa localStoragen käyttö onkin melko vaivatonta. Suosittuun backbone.js-kirjastoon löytyy useita sovittimia localStoragen käyttämiseen, Spine.js-kirjastosta tuki löytyy suoraan.

Pykälää localStoragea pidemmälle tiedon asiakaspään tallentamisessa menevät selaimen sisäiset tietokannat, mutta niiden kehitys on toistaiseksi melko lailla kesken ja standardi vakiintumatta.

Summa summarum

Vaikka tekniikat ovatkin varsin tuoreita, ovat jopa suuret jättiläiset ottaneet ne käyttöön. Niin Googlen, Bingin, Yahoon, Facebookin kuin Twitterinkin mobiiliversiot käyttävät localStoragea apunaan. Työpöytäympäristössä käyttö on vähäisempää; monissa yhteyksissä localStoragea käytetään lähinnä evästeiden korvikkeena vähäisen tiedon tallentamiseen.

Application cache on tuoreempi tulokas, eikä sitä suurilla sivustoilla juuri vielä näy. Appcache soveltuukin parhaiten yksinkertaisille sovelluksille, joissa erillisiä tiedostoja ei ole määrättömästi.

Selainyhteensopivuudesta tekniikoiden käyttöönotto ei enää juurikaan takkua, sillä localStoragea tukevat kaikki modernit selaimet (IE:kin versiosta 8 eteenpäin) ja application cachen ainut kuoppa tulee IE:n kohdalla, jossa tuki löytyy vasta tuloillaan olevasta versiosta 10.

Lisälukemista: