HTML 5: Offline webové aplikace a aplikační cache

Používání webových aplikací off-line zní jako oxymoron. Ve skutečnosti se však jedná o technicky proveditelnou věc. Stačí vědět, jak na to.

Předmluva

Jak už to tak podle zákona schválnosti bývá, internetové připojení obvykle vypadne zrovna, když má člověk rozdělanou práci a nutně ho potřebuje. Těmto situacím lze bohužel jen stěží předejít. Internetové připojení je prostě nejisté. Neznamená to ovšem, že by se s tím nedalo dělat vůbec nic. Internetové prohlížeče disponují off-line režimem, který uživatelům umožňuje prohlížet si již dříve navštívené stránky. Celé kouzlo spočívá v tom, že prohlížeč si při první návštěvě obsah stránky uloží do cache, a z této paměti při off-line režimu čerpá.

V případě statických webových stránek by toto kouzlo fungovalo bezvadně. Jenom správci zpravodajských serverů by měli kyselé připomínky k čerstvosti obsahu. U webových aplikací je to horší. Jejich výstupy jsou variabilní v závislosti na vstupních parametrech, přitom algoritmy, které tyto výstupy generují, se zpravidla provádějí na straně serveru. Za těchto podmínek nelze „kešovat“ aplikace jako takové, ale jen jejich výstupy. Webové aplikace mohou fungovat off-line pouze tehdy, když jsou řídící algoritmy a všechen potřebný obsah uloženy u klienta.

Jak může vypadat provoz takové aplikace v off-line režimu? Představme si například nějakou pomyslnou e-mailovou schránku, jejíž pomyslný uživatel se na nějakou pomyslnou dobu ocitne bez internetového připojení. Onen uživatel bude moci bez potíží procházet doručené i odeslané zprávy, protože všechny e-maily byly předtím (s uživatelovým svolením) zkopírované do klientské databáze (IndexedDB), a jsou tedy v uživatelově vlastním počítači. Stejně tak bude moci díky JavaScriptu provádět obvyklé úkony – mazání, psaní, odesílání e-mailů. Odesílané e-maily se však skutečně rozešlou až poté, co se uživatel opět připojí k Internetu. Tehdy také dojde k synchronizaci dat mezi serverem a prohlížečem.

Poznámka: S patřičnými úpravami v nastavení lze takto off-line používat Gmail.

Nabídnout uživatelům aplikace, které fungují stabilně i při nestabilním internetovém připojení není nijak dramaticky obtížné (tedy pokud se nejedná o hry po síti, chat apod.). Probereme nyní technické postupy.

Uložení aplikace do aplikační cache

Aplikační cache je prostor, který je zvlášť určený pro ukládání souborů důležitých pro fungování aplikací. To, které soubory se mají uložit do aplikační cache, deklaruje autor v tzv. manifestu, což je soubor s příponou .appcache a MIME typem text/cache-manifest. Správný MIME typ lze zajistit řádkem

AddType text/cache-manifest .appcache

v konfiguračním souboru serveru Apache nebo souboru .htaccess daného adresáře. Obsah manifestu může mít následující podobu:

CACHE MANIFEST
 #komentář
style.css
/main/home
/main/app.js
http://img.example.com/logo.png

Na začátku musí být nadepsáno CACHE MANIFEST! Manifest má tři části (o tom dále). Každá z nich má svou hlavičku s dvojtečkou na konci, nicméně hlavičku hlavní části lze, tak jako ve výše uvedeném příkladě, vynechat. Pod hlavičkou pak následuje seznam souborů. Každý soubor, reprezentovaný svou adresou, musí být uveden na samostatném řádku. Adresa (cesta nebo URL) může být absolutní i relativní (relativní vůči umístění manifestu).

Manifest lze formátovat pomocí mezer, tabulátorů a prázdných řádků. Je možno také vkládat komentáře. Ty musí být zapsány na samostném řádku a uvozeny znakem #! Při psaní manifestu je třeba dávat pozor na velká a malá písmena!

Jak už bylo poznamenáno, manifest sestává ze tří částí. Do té hlavní s nepovinnou hlavičkou CACHE: se píšou soubory, které se mají ukládat do aplikační cache. Sekce NETWORK: zase naopak obsahuje soubory, které nemají být z cache dostupné. V sekci FALLBACK: jsou deklarovány náhradní varianty pro soubory, které se nepodařilo načíst. Sekce nemají stanoveno pořadí. Následující manifest nastiňuje, jak vytvořit on-line variantu a off-line variantu jedné webové aplikace.

CACHE MANIFEST
#soubor o řádek níže je přiřazen sekci CACHE
 page.html

NETWORK:
#Soubory využívané výhradně v on-line režimu.
#Neukládají se do aplikační cache.
 imageA.png
 styleA.css
 scriptA.js

CACHE:
#Zde jsou soubory, které nejsou (ale mohou být)
#v on-line režimu použity, přesto je
#prohlížeč poslušně uloží do aplikační cache.
 imageB.png
 styleB.css
 scriptB.js

FALLBACK:
#Pokud soubory imageA.png, styleA.css a scriptA.js
#nelze načíst ze serveru a nejsou ani v aplikační
#cache, musí se PO UPLYNUTÍ LHŮTY pro načtení
#původních souborů použít ty alternativní.
 imageA.png imageB.png
 styleA.css styleB.css
 scriptA.js scriptB.js

Pro zpřesnění: Ve skutečnosti prohlížeče obsah stránky „kešují“ tak či onak. Sekce NETWORK vlastně jen určuje soubory, které nesmí být načítány z cache, ale výhradně ze serveru.

V dalším manifestu si předvedeme, jak uživatelům, kteří zrovna nejsou připojeni k Internetu, předložit chybovou stránku s upozorněním na tuto skutečnost. Chybová off-line stránka se zobrazí místo každé stránky daného webu.

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
#hvězdička zastupuje celý obsah
#lze ji použít jen v této sekci!
*

Připojení manifestu k webové stránce se provede v HTML prostřednictvím atributu manifest v kořenovém elementu. Hodnotou tohoto atributu je URL manifestu.

<html manifest="application.appcache">

Application cache API

S aplikační cache můžeme pracovat také v JavaScriptu. Předmětem našeho zájmu bude objekt ApplicationCache, konkrétně jeho vlastnosti, metody a události.

Stav aplikační cache

Vlastnost status (je pouze ke čtení) indikuje aktuální stav obsahu aplikační cache pro aktivní dokument. Vrací numerické hodnoty podle následující tabulky.

Update

Metoda update() si stáhne nový manifest a aktualizuje podle něj obsah aplikační cache. Prohlížeč však přesto bude používat starý obsah aplikační cache. Teprve po uplatnění metody swapCache() přepne na nový.

Tomu, jak provést update aplikační cache, bude věnován i příští příklad.

Seznam událostí

checking, error, noupdate (nebyla zjištěna nová verze manifestu), downloading, progress, updateready, cached, obsolete (chyba 404 nebo 410)

Aby to neházelo chyby

Starší či zastaralejší prohlížeče nemusí aplikační cache podporovat. Proto je vhodné ošetřit konstrukce s objektem ApplicationCache podmínkou nebo blokem try-catch. Nějak takhle:

if (window.ApplicationCache && window.WebSocket) {
	var server = new WebSocket("http://example.com/manifest/");
	server.onmessage = function() {
		window.applicationCache.update();
	};
	window.applicationCache.addEventListener("updateready", function() {
		window.applicationCache.swapCache();
	}, false);
}

Kontrola připojení k síti

Jako registrátor stavu připojení, slouží vlastnost onLine objektu Navigator. Vrací true, pokud je počítač připojen k síti. Její hodnotu nelze přepisovat, neboť ani odpojení od sítě nelze JavaScriptem vynutit. Hodnota se změní na false až při události offline. Tato událost je vyvolána, když prohlížeč při pokusu vyslat požadavek na server, zjistí, že nemá spojení se sítí. Hodnota se opět změní na true, jakmile prohlížeč zaznamená úspěšný pokus, a dojde k události online.

window.addEventListener("online", info, false);
window.addEventListener("offline", info, false);
function info() {
var state = (window.navigator.onLine)? "on-line" : "off-line";
alert("Aplikace nyní poběží v " + state + " režimu.");
}

Využití

Praktické uplatnění aplikační cache má své hranice, které jsou dané účelem a způsobem fungování různých webových aplikací, především mírou závislosti aplikace na síťovém provozu – určité aplikace by off-line prostě nemohly vůbec fungovat, např. internetové bankovnictví. Mnohé webové aplikace by však mohly fungovat off-line naprosto bez potíží, např. různé editory, generátory, casual hry aj. Další aplikace by mohly nabízet off-line alespoň omezenou funkcionalitu, například webové slovníky by mohly poskytovat jen částečnou slovní zásobu – dejme tomu 2000 nejpoužívanějších slovíček.

Aplikační cache nefunguje v IE 9, v dalších prohlížečích není podporováno její javascriptové API.

Zdroj: HTML5 application cache