Offline webová stránka

Pro vytvoření verse webu ke stažení existuje několik možností.

Stahovací programy

Asi nejjednodušší možnost je využití stahovacího programu, který prošmejdí celý web a uloží z něj statickou kopii sestávající z HTML souborů.

Osvědčený je třeba nástroj HTTrack.

Web programu HTTrack

Takto je možné stáhnout prakticky libovolný statický i dynamický web.

Statické stránky

Je-li celý web ve statických HTML stránkách, je situace prostá. Stačí obsah zkopírovat a máme offline versi.

Dynamické stránky

U webu generovaného dynamicky nějakou serverovou technologií třeba z databáse je potom postup trochu komplikovanější. Tedy v případě, že chceme generovat aktuální obsah pro stažení (a nepoužít tedy HTTrack).

Vygenerování statických stránek

V případě, že dynamická stránka HTML výstup cachuje do statických souborů, je rovněž hotovo. V opačném případě se hodí generování statické offline stránky ke kešování využít.

Zachytit a uložit obsah jde v PHP následovně:

ob_start();
echo "Nějaký výpis";
file_put_contents("nazev-souboru.html", ob_get_clean());

Hotové řešení včetně balení do ZIP archivu.

Celý web v jednom souboru

Docela zajímavá myšlenka je umístit celý web do jednoho souboru HTML. Jak na to?

  • Skripty a styly vložit jako interní.
  • Obrázky vložit přes pseudoprotokol data.
  • Všechen obsah umístit do JavaScriptového objektu.
  • Přepsat adresy na volání JS funkce, která bude z objektu s daty načítat jednotlivé stránky.

Ukázka tohoto webu

Nevýhoda tohoto postupu je, že se úplně nekamarádí s ukázkami v JavaScriptu na jednotlivých stránkách. Nicméně to u standardního webu nemusí vadit.

  • Zprovoznit „tlačítko zpět“ (ukládání do historie) jde pomocí history.pushState.
  • Okamžité vyhledávání/filtrování by šlo udělat přímo v JS.

Cache manifest v HTML 5

HTML 5 přináší tzv. cache manifest. Tím je možné prohlížeči naznačit, že si má uvedené URL pamatovat a při nedostupném připojení (offline režimu) je zobrazovat z cache.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Výpis náhodného obsahu

Výpis náhodného textu

Jak na stránce náhodně vypsat obrázek, odkaz, reklamu, text nebo cokoliv jiného.

Jak vytvořit WYSIWYG editor

Vlastní jednoduchý WYSIWYG editor

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

Detekce zapnutého JavaScriptu

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Komentáře