HTML 5 Offline

Application pour iPhone, iPad, iPod ou Android

Le HTML5 permet de développer des applications. Voir les pages:

online

La variable navigator.onLine permet de savoir si le client est connecté ou pas. Les évènements ononline et onoffline permettent de gérer ça.

Application offline

<!doctype HTML>
<html manifest="site.appcache"> 
CACHE MANIFEST
 
# Version 1.0
 
index.htm
toto.php?var=1
toto.php?var=2
charte/header.js
charte/footer.js
charte/jQuery.js
charte/style.css
charte/rond.gif
charte/carre.gif
charte/haut.gif
charte/logo.gif
Ce fichier .appcache doit être servi avec le type mime adéquat: text/cache-manifest
Dans la grande majorité des cas cela consite à ajouter un fichier .htaccess contenant:

AddType text/cache-manifest .appcache .manifest

ce fichier doit commencer obligatoirement par la ligne “CACHE MANIFEST” Attention: si le téléchargement de l’un des fichiers échoue, alors l’ensemble du téléchargement échoue.
Si caractères accentuées: l'encodage du fichier manifest doit être UTF-8.
Si des espaces dans les URLs: remplacer par %20
Une page en cache qui contient des ressources (images) non en cache s'affiche mal: utiliser NETWORK et FALLBACK
Le cache d’une application peut être limité à 5Mo (Chrome, Androïd) ou illimité (Firefox).

La page qui appelle le "manifest" sera aussi automatiquement ajoutée au cache, même si non listée.
Il est possible d’utiliser des URL absolues dans le manifest.
Il est possible d’ajouter différentes sections à notre fichier manifest :


Exemple: 
CACHE MANIFEST
 
# Version 1.1
 
CACHE:
/index.htm
../charte/style.css
/img/logo.png
 
FALLBACK:
/ /index.htm
*.gif ../charte/clear.gif
*.jpeg ../charte/clear.gif
*.png ../charte/clear.gif
*.htm /offline.htm #tous les autres
 
NETWORK:
*.php

Mise à jour du cache

Il est important de versionner son fichier manifest via un commentaire (commence par #) En effet l’Application Cache sera mis à jour si :
  1. L’utilisateur vide son cache manuellement.
  2. Le fichier manifest change (par exemple le n° de version)
  3. Le cache est mis à jour avec du code Javascript.
  4. Le fichier manifest est supprimé du site => le navigateur va supprimer le cache
window.applicationCache.update()
window.applicationCache.swapCache() //utilise le nouveau
location.reload(true)

window.applicationCache.status permet de connaître l'état (valeurs possibles: window.applicationCache.UPDATEREADY = prêt ,..) 

	applicationCache.update();
	applicationCache.onupdateready=function () {applicationCache.swapCache();alert('cache mis à jour')}

https://www.html5rocks.com/en/tutorials/appcache/beginner/

Persistance des données (variables)

Le localStorage

Enregistré au niveau du navigateur, résiste à la fermeture de l'onglet, du navigateur et même au vidage de cache! La variable sera toujours disponible. L’utilisation du Local Storage est proche de celle des cookies, mais contrairement aux cookies, ces informations ne sont jamais communiquées au serveur. Sous Internet Explorer 8, le stockage fourni atteint 10 mégas octets alors qu'il est de 4 ko pour chaque cookie. Ces objets sont ainsi particulièrement adaptés aux applications offline.

Exemple localStorage

Le sessionStorage

Enregistré au niveau de l'onglet. localStorage.setItem("name", "John");
alert(localStorage.getItem("name")); localStorage.removeItem("name") localStorage.clear() //Efface tout.

Autre syntaxe possible:

if(!window.sessionStorage) document.write("Storage non supporté par le navigateur"); else { sessionStorage.nom = "Toto"; } // appel sur une quelconque autre page par: alert(sessionStorage.nom)

Persistance des données

webdatabase

Exemple webdatabase 
// Try and get a database object
var db;

try {
    if (window.openDatabase) {
        db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
        if (!db)
            alert("Failed to open the database on disk.  This is probably because the version was /
            bad or there is not enough space left in this domain's quota");
    } else
        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
} catch(err) { }

// Check and see if you need to initalize the DB
db.transaction(function(tx) {
    tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
        loadNotes();
    }, function(tx, error) {
        tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp /
        REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {
            loadNotes();
        });
    });
});

// Insert a test Note.
var note = {
    id: "1",
    text:" This is a test note",
    timestamp: "112123000",
    left:10,
    top:10,
    zIndex:2
};
db.transaction(function (tx)
{
    tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES /
    (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);
}); 

// Get all the notes out of the database.
db.transaction(function(tx) {
    tx.executeSql("SELECT id, note, timestamp, left, top, zindex /
    FROM WebKitStickyNotes", [], function(tx, result) {
        for (var i = 0; i < result.rows.length; ++i) {
            var row = result.rows.item(i);
            var note = new Note();
            note.id = row['id'];
            note.text = row['note'];
            note.timestamp = row['timestamp'];
            note.left = row['left'];
            note.top = row['top'];
            note.zIndex = row['zindex'];

            if (row['id'] > highestId)
                highestId = row['id'];
            if (row['zindex'] > highestZ)
                highestZ = row['zindex'];
        }

        if (!result.rows.length)
            newNote();
    }, function(tx, error) {
        alert('Failed to retrieve notes from database - ' + error.message);
        return;
    });
});