Anche in un periodo storico in cui quasi ogni dispositivo è connesso alla rete è necessario pensare ad un meccanismo che permetta di gestire le nostre Web Applications offline; pensate ad esempio ad un dispositivo mobile che per un certo lasso temporale perda la connessione per problemi di rete o perchè la zona in cui si trova ha una copertura insufficiente: l’utente potrebbe trovarsi a non poter fruire dei contenuti di cui necessita.
Per risolvere il problema vengono in nostro soccorso le Offline APIs, definite in un documento dedicato che potete trovare a questo indirizzo.
La soluzione passa dalla definizione di un file manifest che elenchi i files necessari perchè l’applicazione continui a funzionare (magari con features limitate) anche offline. Lo user-agent farà in modo di generare una copia dei files indicati perchè siano raggiungibili anche nel caso in cui la connessione di rete dovesse venire a mancare.
Manifest
Il file manifest è un semplice file di testo che consiste in una lista di stringhe (una per riga) rappresentanti i nomi delle risorse che il browser deve rendere accessibili offline, di seguito il contenuto di un ipotetico file demoapp.appcache:
CACHE MANIFEST
index.html
style.css
index.jsÈ necessario indicare nella pagina "principale" (quella che necessita dei suddetti files, qui la chiameremo index.html) nel tag html un attributo manifest che punti al file:
<!doctype html>
<html manifest="demoapp.appcache">
<head>
<title>Demo</title>
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- la nostra webapp -->
</body>
</html>Firefox ci mostra un avviso quando accediamo alla pagina:
I file manifest sono serviti come tipo MIME text/cache-manifest.
Come avete potuto notare nel file manifest è stata inclusa la stessa index.html, la nostra "main page" così come raccomandato dal documento di specifica.
Il browser cercherà di aggiornare la cache dei files ogniqualvolta l’utente visiterà la pagina. Se il manifest dovesse essere stato modificato dall’ultima visita (ri)effettuerà il download di tutti i files.
I files vengono elencati nel manifest divisi per "categorie", tecnicamente namespaces, qualora non ne fosse esplicitamente definito alcuno il namespace di default è CACHE sotto il quale andranno definiti tutti i files da rendere disponibili offline.
È corretto utilizzare sia URL assoluti o relativi per indicare l’indirizzo dei files.
È possibile definire un namespace NETWORK per elencare files da non copiare localmente ed un namespace FALLBACK il cui scopo è indicare risorse che prevedano una versione online ed una offline.
Cerchiamo di visualizzare uno scenario che ci permetta di capire meglio le differenze. Poniamo di sviluppare un sito moderno che preveda una Home Page che oltre alle informazioni sull’azienda preveda un elenco di prodotti preso dal server ed una chat con un operatore. Offline sarebbe inutile includere il file che si occupa di reperire la lista dei prodotti dal server (un ipotetico get_product_list.php) ed inutile sarebbe includere il file che implementa la chat (chat.js).
Potremmo di conseguenza pensare ad un file manifest così strutturato:
CACHE MANIFEST
NETWORK:
get_product_list.php
chat.js
CACHE:
index.html
style.cssPotremmo anche decidere di sviluppare una Home Page alternativa statica che mostri solamente le informazioni relative all’azienda.
CACHE MANIFEST
FALLBACK
index.html offline.html