Réaliser une application offline en HTML5. Cet article va vous apprendre à gérer trois technologies : HTML5 gérant le mode offline, le cache du navigateur et le stockage local.
Notre exemple est une gestion de « to-do list » qui utilise trois technologies : HTML5 et JavaScript/jQuery pour le côté client et PHP pour le côté serveur. Le code est simple. La page HTML contient une liste non numérotée contenant les tâches, ainsi qu'un formulaire. Dès que celui-ci est activé, le JavaScript intercepte le formulaire et l'envoie au fichier PHP pour qu'il l'enregistre dans un fichier texte. Code HTML : Code CSS : Code JavaScript : script.js Sélectionnez Code PHP : III.1. Le mode hors-ligne intervient quand votre ordinateur n'a plus de réseau ou que votre téléphone se situe dans une zone sans réseau. Pour que ce fichier soit bien déclaré au niveau du serveur, il nous faut déclarer son MIME-TYPE via un fichier .htaccess : AddType text/cache-manifest manifest manifest.manifest Ce fichier MANIFEST est divisé en quatre parties : Un plugin jquery pour manipuler le storage HTML. HTML 5 est une révolution il drague avec lui de nombreuses améliorations/fonctionnalités qui vont te permettre à toi développeur web d’avoir une vie plus simple.
Nous nous intéresserons ici à l’une des plus intéressantes à mon goût l’interface Storage et ses implémentations localStorage et sessionStorage. Pour cela on utilisera le plugin jquery storage écrit par votre serviteur. Les implémentations de Storage vont vous permettre de pouvoir enregistrer des données directement sur la machine de l’utilisateur de manière plus sécurisée et avec un volume plus important que ces bons vieux cookies. Afin de manipuler tout ça on utilisera un petit plugin jquery que l’on va essayer de découvrir ici. Pourquoi un plugin ? Un plugin va nous permettre de manipuler le storage avec une API unifiée, en masquant aussi certaines opérations un peu fastidieuses telles que la sérialisation de certaines données. Et puis surtout vous pourrez venir râler sur quelqu’un si ça ne marche pas :p Installation l’API. Getting Started with HTML5 Local Databases « Dark Crimson Blog.
Please note: This article was written in May 2010 and as of November 18, 2010, the Web Applications Working Group has reached an impasse and does not intend to maintain the Web SQL Database any longer.
Read more here. Starting with Safari 4, iOS OS3, Chrome 5, and Opera 10.5 (Desktop), HTML5 Local Databases (AKA Web SQL Databases) are now supported. I’ve been reading about local databases for quite some time and decided to do a write up with some basic examples on how to get started. Setting up the Database First we check if the browser supports the openDatabase method, is so we continue and define the database parameters: shortName is the DB name as it will be referred to by the browser and SQLversion openDatabase version. 1.0 for this (more on that here) displayName The full display name / description of the databasemaxSize This is max size in bytes is the size you expect the database to reach.
Building the Table Select the data Making updates Dropping the table The demo: Resources. HTML5: le mode Offline.