HTML5 sovelluksen välimuisti

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

Mitä sovelluksen välimuisti on?

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

Sovelluksen välimuisti tuo sovellukselle kolme etua:

  1. Lähetyspysähdys - käyttäjät voivat käyttää niitä sovelluksen ollessa offline-tilassa
  2. Nopeus - varastoidut resurssit latautuvat nopeammin
  3. Vähentää palvelimen kuormitusta - selain ladataa vain päivitettyjä tai muutettuja resursseja

Selaimen tuki

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

API
Application Cache 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-selailua varten):

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 manifestia sisältävä sivu tallennetaan välimuistiin, kun käyttäjä siihen katsaa. 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 eivätkä tallennu välimuistiin
  • FALLBACK - Tässä otsikossa luetellut tiedostot määrittelevät palautusverkkosivun, kun 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 tallenneta välimuistiin ja on käytettävissä vain verkossa:

NETWORK:
login.asp

Voit käyttää tähtimerkkiä osoittaa, 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" korvaamaan /html/ hakemistoon kuuluvat kaikki tiedostot：

FALLBACK:
/html/ /offline.html

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

Päivitä välimuisti

Kun sovellus tallennetaan välimuistiin, se pysyy välimuistissa, kunnes seuraavat tapahtumat tapahtuvat：

  • Käyttäjä tyhjentää selaimen välimuistin
  • manifest-tiedosto on muuttunut (katso alla olevat vinkit)
  • Ohjelma päivittää sovelluksen välimuistin

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：kommentointirivit alkavat merkillä "#", mutta ne voidaan käyttää myös muihin tarkoituksiin. Sovelluksen välimuisti päivitetään vain, jos sen manifest-tiedosto muuttuu. Jos muokkaat kuvaa tai muutat JavaScript-funktiota, nämä muutokset eivät tule uudelleen tallennetuksi. Päivittämällä kommentointirivin päivämäärän ja versiorivin on mahdollista saada selain tallentamaan tiedostot uudelleen.

Huomioita sovelluksen välimuistin käytöstä

Huomaa välimuistissa oleva sisältö.

Kun tiedosto tallennetaan 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 suhteessa tallennetun datan kapasiteettiin (joidenkin selainten rajoitukset ovat jokaiselle sivustolle 5MB).