Testasin uusia HTML5 ja CSS3-versioiden tuomia uudistua tekemällä hieman vastaavanlaisen sovelluksen kuin toteutin aiemmin hyödyntämällä Google Gears -selainlaajennusta.
HTML5 tuo Google Gearsin jo aiemmin esittelemät ominaisuudet selainten natiivisti tukemiksi ominaisuuksiksi. Google lopettaakin Gearsin kehittämisen ja keskittyy tukemaan uutta HTML5:sta.
Sovellus on siis selaimessa itsenäisesti toimiva tehtävälistasovellus, mutta aiemmasta Gears-toteutuksesta poiketen, käyttäjällä on nyt mahdollista luoda käyttäjätili, jonka jälkeen sovellus synkronoi tehtävät verkossa olevaan palveluun, joten samoja tehtävät ovat luettavissa ja muokattavissa muiltakin koneilta, kun selain on tukee kaikkia tarvittavia ominaisuuksia. Tällä hetkellä tuettuja ovat ainoastaan uusimmat Safari ja Google Chrome selaimet. Google Chromesta tarvitaan versio 5+, jota ei ole vielä kirjoitushetkellä saatavissa kaikille käyttöjärjestelmille. Kaikki tehtävät salataan automaattisesti jo selaimen tietokantaan lisättäessä AES:llä, joten selaimen tietokannassa ja verkkopalvelussa kaikki tehtävät ovat salatussa muodossa ja luettavissa ainoastaan käyttäjän salasanan avulla.
Käytetyt tekniikat ja ominaisuudet
- Sovelluksen rakenteessa käytettiin HTML5-standardin uusia tägejä.
- Sovelluksen käyttöliittymä ja kommunikointi sovelluksen palvelimella olevaan rajapintaan toteutettiin uusimmilla jQuery ja jQueryUI 1.8 JavaScript kirjastoilla. Kommunikointi selaimen ja palvelimen välillä toteutettiin JSON-tiedonsiirtomuodolla.
- Sovelluksen tietokantana selaimessa käytettiin HTML5:n localDatabase ominaisuutta, joka on Safarissa toteutettu ainoastaan asynkronisena.
- Sovelluksessa tietokantaan tallennettavien tehtävien salaamiseen käytettiin JavaScriptillä toteutettua AES-salauskirjasto.
- Selaimen internetyhteyden toimivuuden testaamiseen käytettiin JavaSriptin navigator.online funktiota.
- Sovelluksen verkkottoman tilan toiminnan mahdollistamiseksi sovelluksen tiedostot tallennettiiin selaimeen pysyvästä käyttäen HTML5:n uutta offlineStoragea.
- Istunnon hallinnassa evästeet korvattiin HTML5:n uudella sessionStorage-ominaisuudella.
- Lomakkeiden vihjeteksti toteutettiin HTML5:n uudella placeholder-parametrilla, jolla voidaan toteuttaa lomakkeen input kenttään vihjeteksti.
- Dialog-ikkunoiden osittain läpinäkyvä tausta toteuttiin CSS:n parametrilla -webkit-gradients.
- Taustakuvan skaalautuminen selainikkunan koon mukaan saatiin toteutettua CSS:n parametrilla -webkit-background.
Lisäksi käytössä on uusi Worker-ominaisuus, jolla voidaan ajaa osa sovelluksesta toisessa erillisessä säikeessä. Mitään varsinaista toimintoa Worker ei kuitenkaan tässä sovelluksessa tee. Workeristä voi lueskella lisää vaikka John Resigin blogista.
Lähdekoodit
Optimoimattomat lähdekoodit on luettavissa seuraavasti:
- index_full.html.txt
- gotsomestufftodo-1.o.js – sovelluksen luokat
- gotsomestufftodo.manifest – manifestitiedosto sovelluksen verkotonta käyttöä varten.
Sovelluksen käyttäminen
Sovellusta voi kokeilla osoitteessa www.jonkkari.com/gotsomestufftodo. Sovellus toimii ainoastaan Safarin ja Chromen uusimmilla selaimilla, sillä muissa selaimissa ei ole toteutettu vielä kaikkia tarvittavia ominaisuuksia. Mozilla Firefox selaimesta esimerkiksi puuttuu selaimen paikallinen tietokanta.
HTML5 tietokannan tietoturva
HTML5:n kuuluvan selaimen tietoturvan vaaroista löytyy mielenkiintoinen esitys ShmooCon 2010 konferenssin sivuilla osoitteessa www.shmoocon.org, josta F-Securen Mikko Hyppönen twiittasi aiemmin.
