English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Cache delle applicazioni HTML5

Utilizzando HTML5, è possibile creare facilmente una versione offline delle applicazioni web creando un file di manifestazione cache, il che significa che le applicazioni web possono essere cache sul client e possono essere accedute offline senza connessione di rete.

Cos'è la cache delle applicazioni (Application Cache)

HTML5 fornisce un meccanismo di cache delle applicazioni che permette alle applicazioni web di funzionare offline. Gli sviluppatori possono utilizzare l'interfaccia Application Cache (AppCache) per impostare le risorse che il browser deve memorizzare e rendere disponibili agli utenti offline. Quando l'applicazione è in stato offline, anche se l'utente clicca sul pulsante di aggiornamento, l'applicazione può caricarsi e funzionare normalmente.

La cache delle applicazioni offre tre vantaggi all'applicazione:

  • Navigazione offline - gli utenti possono utilizzarle quando l'applicazione è offline

  • Velocità - le risorse in cache si caricano più rapidamente

  • Riduzione del carico del server - i browser scaricheranno solo le risorse aggiornate o modificate dal server.

Quali browser supportano

Internet Explorer 10, Firefox, Chrome, Safari e Opera supportano la cache delle applicazioni.

Esempio Cache Manifest HTML5

Il seguente esempio mostra un documento HTML con cache manifest (per navigazione offline):

Esempio online

<!DOCTYPE HTML>
<html manifest="demo.appcache">
	<body>
	Contenuto del documento......
	</body>
	</html>
Prova a vedere ‹/›

Fondamenti di Cache Manifest

Per abilitare la cache dell'applicazione, includere l'attributo manifest nel tag <html> del documento:

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

Ogni pagina specificata con il manifest viene archiviata ogni volta che l'utente la visita. Se non viene specificato l'attributo manifest, la pagina non verrà archiviata (a meno che non venga specificata direttamente nella file manifest)

L'estensione del file raccomandata per il file manifest è: ".appcache".

Si prega di notare che il file manifest deve essere configurato con il corretto MIME-type, ossia "text/cache-manifest". Deve essere configurato sul server web.

Manifest del file

Il file manifest è un file di testo semplice che informa il browser dei contenuti archiviati (e dei contenuti non archiviati).

Il file manifest può essere diviso in tre parti:

  • CACHE MANIFEST - I file elencati sotto questo titolo verranno archiviati dopo il primo download

  • NETWORK - I file elencati sotto questo titolo necessitano di una connessione al server e non verranno archiviati

  • FALLBACK - I file elencati sotto questo titolo determinano la pagina di fallback quando la pagina non è accessibile (ad esempio, pagina 404)

CACHE MANIFEST

La prima riga, CACHE MANIFEST, è obbligatoria:

CACHE MANIFEST
/style.css
/logo.png
/main.js

Il file manifest elencato di seguito elenca tre risorse: un file CSS, un'immagine GIF e un file JavaScript. Dopo che il file manifest è stato caricato, il browser scaricherà questi tre file dal directory root del sito web. Poi, indipendentemente dal fatto che l'utente si disconnetta dalla rete o meno, queste risorse rimarranno disponibili.

NETWORK

La sezione NETWORK seguente stabilisce che il file "login.php" non verrà mai archiviato e non sarà disponibile in modalità offline:

NETWORK:
login.php

È possibile utilizzare l'asterisco per indicare che tutti gli altri risorse/file necessitano di una connessione di rete:

NETWORK:
*FALLBACK

La sezione FALLBACK seguente stabilisce che se non è possibile stabilire una connessione di rete, "offline.html" sostituirà tutti i file nella directory /html5/:

FALLBACK:
/html/ /index.html

Attenzione: il primo URI è la risorsa, il secondo è il riserva.

Aggiorna la cache

Una volta che l'applicazione è stata archiviata, rimarrà nella cache fino a che non si verifica una delle seguenti circostanze:

  • L'utente svuota la cache del browser

  • Il file manifest viene modificato (vedere le istruzioni seguenti)

  • L'applicazione viene aggiornata dal programma per aggiornare la cache dell'applicazione

Esempio di file Manifest completo

CACHE MANIFEST
# 2018-02-21 v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /index.html
Suggerimento:Le righe che iniziano con "#" sono righe di commento, ma possono anche avere altri scopi. La cache dell'applicazione viene aggiornata quando il file manifest viene modificato. Se editi un'immagine o modifichi una funzione JavaScript, queste modifiche non verranno riacquisite. Aggiornare la data e il numero di versione nella riga di commento è un modo per far riacquisire i file dal browser.

Descrizione della cache delle applicazioni

Attenzione al contenuto della cache.

Una volta che il file è stato archiviato, il browser continuerà a visualizzare la versione in cache, anche se avete modificato il file sul server. Per garantire che il browser aggiorni la cache, è necessario aggiornare il file manifest.

Attenzione: Le capacità di archiviazione dei dati in cache possono variare di molto tra i browser (alcuni browser impostano limiti di 5MB per ogni sito).