HTML5 sovelluksen välimuisti

Sovelluksen välimuistin avulla voidaan helposti luoda web-sovelluksen offline-versio luomalla cache manifest -tiedosto.

Mikä on sovelluksen välimuisti?

HTML5 käyttää sovelluksen välimuistia (Application Cache), mikä tarkoittaa, että web-sovelluksia voidaan välimuistittaa ja ne voidaan käyttää ilman Internet-yhteyttä.

Sovelluksen välimuisti tuo mukanaan kolme etua:

  1. Offline-selailu - käyttäjät voivat käyttää niitä sovelluksen ollessa offline-tilassa
  2. Nopeus - tallennetut resurssit latautuvat nopeammin
  3. Vähentää palvelimen kuormitusta - selain lataa vain päivitettyjä tai muutettuja resursseja

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäisiin selaimiin, jotka tukevat sovellusvälimuistia täysin.

API
Sovellusvälimuisti 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest -esimerkki

Seuraava esimerkki näyttää HTML-dokumentin, jossa on cache manifest (suunniteltu offline-käyttöön):

Esimerkki

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Dokumentin sisältö ......
</body>
</html>

Kokeile itse

Cache Manifest -perusteet

Jos haluat ottaa käyttöön sovellusvälimuistin, lisää manifest-ominaisuus <html>-tagiin dokumentissa:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Jokainen manifesttia sisältävä sivu tallennetaan välimuistiin, kun käyttäjä siihen katsoo. Jos manifest-ominaisuutta ei ole määritelty, sivua ei tallenneta välimuistiin (ellei sitä ole suoraan määritelty manifest-tiedostossa)

Manifest-tiedoston suositeltu tiedostopääte on: ".appcache"

Huomioitavaa:Manifest-tiedostolle on asetettava oikea MIME-tyyppi, eli "text/cache-manifest". Tämä on konfiguroitava web-palvelimella.

Manifest-tiedosto

Manifest-tiedosto on yksinkertainen tekstitiedosto, joka kertoo selaimelle, mitä sisältöä tallennetaan välimuistiin (ja mitä ei)

Manifest-tiedosto koostuu kolmesta osasta:

  • CACHE MANIFEST - Tässä otsikossa luetellut tiedostot tallennetaan välimuistiin ensimmäisen latauksen jälkeen
  • NETWORK - Tässä otsikossa luetellut tiedostot vaativat yhteyden palvelimeen eikä niitä tallenneta välimuistiin
  • FALLBACK - Tässä otsikossa luetellut tiedostot määrittelevät palautusikkunat, jos sivua ei voida avata (esim. 404-sivu)

CACHE MANIFEST

Ensimmäinen rivi, CACHE MANIFEST, on välttämätön:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Yllä olevassa manifest-tiedostossa luetellaan kolme resurssia: yksi CSS-tiedosto, yksi GIF-kuvitus ja yksi JavaScript-tiedosto. Kun manifest-tiedosto ladataan, selain luo nämä kolme tiedostoa verkkosivuston juurihakemistosta. Sitten, riippumatta siitä milloin käyttäjä katkaisee yhteyden Internetiin, nämä resurssit ovat edelleen käytettävissä.

NETWORK

Seuraavan NETWORK-osion määrittää, että tiedosto "login.php" ei koskaan tallennu välimuistiin ja on käytettävissä vain verkossa:

NETWORK:
login.asp

Voit käyttää tähtiä osoittaaksesi, että kaikki muut resurssit/tiedostot vaativat Internet-yhteyden:

NETWORK:
*
FALLBACK

Seuraavassa FALLBACK-osassa määritetään, että jos Internet-yhteys ei ole saatavilla, käytetään "offline.html"-tiedostoa korvaamaan /html/-kansioon kaikki tiedostot:

FALLBACK:
/html/ /offline.html

Huomautus:Ensimmäinen URI on resurssi, toinen on vaihtoehto.

Päivitä välimuisti

Kun sovellus on tallennettu välimuistiin, se pysyy välimuistissa, kunnes seuraavat tapahtumat tapahtuvat:

  • Käyttäjä tyhjentää selaimen välimuistin
  • manifest-tiedosto on muutettu (katso alla olevat vinkit)
  • Sovelluksen välimuistin päivitys ohjelmallisesti

Esimerkki - täydellinen Cache Manifest -tiedosto

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Vinkki:Kommentaaririvit alkavat merkillä "#", mutta ne voidaan käyttää myös muihin tarkoituksiin. Sovelluksen välimuisti päivitetään vain silloin, kun sen manifest-tiedosto muuttuu. Jos muokkaat kuvaa tai muutat JavaScript-funktiota, nämä muutokset eivät päivitä välimuistia. Päivittämällä kommenttirivin päivämäärän ja versiorivin on mahdollista saada selain päivittämään tiedostot uudelleen.

Huomioita sovelluksen välimuistin käytöstä

Huomaa välimuistissa olevat tiedot.

Kun tiedosto on tallennettu välimuistiin, selain jatkaa tallennetun version näyttämistä, vaikka olet muuttanut tiedostoa palvelimella. Varmistaaksesi, että selain päivittää välimuistin, sinun on päivitettävä manifest-tiedosto.

Huomautus:Selaimet voivat olla erilaisia tallennustilan kapasiteetin suhteen (joidenkin selainten rajoitukset ovat jokaiselle sivustolle 5MB).