Tutoriel : Une application web offline HTML5 avec le cache manifest

Tutoriel Application Web Offline HTML5 avec le Cache Manifest
Parmi l’ensemble des nouveautés apportées par l’HTML5, on entend surtout parler des plus “multimédia” d’entre elles, c’est à dire des balises audio, video, canvas… Pourtant, ces fonctionnalités ne sont pas vraiment nouvelles pour l’utilisateur final, qui était déjà habitué à de tels contenus avec Flash. L’une des réelles révolutions apportées par l’HTML5, et une des moins médiatisée, est la possibilité de créer des applications web offline.

Introduction

Le terme “application offline” doit être un peu nuancé et compris plutôt comme : “Des applications web qui continuent à fonctionner même quand la connexion internet se coupe”. De plus, le terme “application” a été banalisé par l’avènement des smartphones, mais dans ce cadre, on doit plutôt comprendre des “sites web”. Cela dit la différence entre les deux va s’amoindrir de plus en plus dans les années à venir…

Ces applications sont donc principalement destinées aux téléphones portables, qui subissent régulièrement des déconnexions.

Prenons un exemple :

Vous rédigez un mail sur votre iPhone ou votre Android, connecté à internet avec la 3G, sur l’application Gmail. Puisque vous êtes bien entendu quelqu’un de mobile et dynamique (c’est évident !) vous vous déplacez avec votre smartphone. Puis vous prenez un ascenseur, ou votre métro passe dans un tunnel, ce qui coupe votre connexion 3G.

Que se passe-t-il ?

Hum… Rien ?

Tout à fait ! L’application Gmail ne se ferme pas subitement en criant “Alerte ! Je ne capte plus le réseau 3G, fermeture de l’application !”. Elle continue de fonctionner en “offline”. Vous pouvez même “envoyer” un mail sans avoir d’accès à internet, et celui-ci sera mis en attente localement, puis réellement envoyé dès que vous récupérerez votre connexion.

On est donc face à des applications “hybrides” qui fonctionnent à la fois online et offline.

Ça me semble bien compliqué à réaliser…

Bien au contraire, c’est très simple, et vous saurez le faire après avoir lu ce tutoriel !

La compatibilité

Comme toute fonctionnalité HTML5, une question importante se pose : la compatibilité.
Qu’en est-il avec les applications offline ? Elles fonctionnent déjà sur tous les navigateurs sauf Internet Explorer. Et Internet Explorer 9 ne supportera pas cette fonctionnalité non plus.

Quoi ?! Mais ça n’a aucun intérêt !

Haha du calme… Croyez-vous que votre ordinateur fixe subisse fréquemment des déconnexions du réseau 3G…? Non bien entendu. Les applications offline sont principalement destinées aux smartphones et autres tablettes tactiles, et les navigateurs Android et iPhone, supportent déjà cette fonctionnalité. Aucun problème du côté de la compatibilité donc !

Bon d’accord, on peut l’utiliser alors. Mais attends, il n’y a pas déjà un mode hors-ligne dans les navigateurs ?

Effectivement les navigateurs proposent déjà depuis plusieurs années des consultations de site “hors ligne”, et de la mise en cache de certains fichiers. Mais soyons clairs : ces techniques sont peu fiables et très instables. Si vous actualisez une page en ayant perdu la connexion à internet, la plupart du temps vous aurez droit à une belle erreur vous demandant de vérifier votre connexion…

Allez, trêve de bavardage, on se plonge au coeur du sujet !

Le cache d’application (AppCache)

Les applications offline utilisent “l’application cache” du navigateur, qui permet :

  • D’utiliser une application web ou de naviguer sur un site entier sans connexion internet.
  • D’améliorer la vitesse de chargement des pages puisque les fichiers sont présents en local.
  • De réduire la charge du serveur, puisqu’en effet, il n’enverra que les fichiers qui auront changé depuis le dernier passage de l’utilisateur.

Notez au passage une petite remarque non négligeable : le cache d’une application est limité à 5Mo.

La page HTML

L’application cache repose principalement sur l’utilisation d’un fichier “manifest” à ajouter aux pages HTML de votre site. Tout d’abord, créons donc une structure basique de page web :

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		#main{
			width:900px;
			margin:auto;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>Ceci est mon application offline</h1>
		<img src="earth-folder.png" />
	</div>
</body>
</html>

Afin d’utiliser le cache d’application, il va falloir déclarer un fichier manifest.
Ce fichier se déclare dans la balise html comme ceci :

<html manifest="site.manifest">

Le manifest

Une fois déclaré, il faut bien sûr créer le fichier manifest en question. Appelons le nôtre “site.manifest”.

Dans ce fichier, qui commence obligatoirement par la ligne “CACHE MANIFEST”, nous allons déclarer les fichiers qui doivent être mis en cache :

CACHE MANIFEST

# Version 0.1

index.html
earth-folder.png

On peut également y ajouter des commentaires. Chaque ligne de commentaire doit commencer par #. Il est important de versionner son fichier manifest via un commentaire, afin que le navigateur détecte par la suite les changements dans le fichier. Nous y reviendrons plus tard.
Notons qu’il est possible d’utiliser des URL absolues (http://www.mon-url.com/absolue/fichier.html).

Il est possible d’ajouter différentes sections à notre fichier manifest :

  • CACHE, il s’agit de la section par défaut qui liste les fichiers à mettre en cache.
  • NETWORK, qui liste les fichiers qui nécessitent obligatoirement une connexion internet.
  • FALLBACK, qui liste les fichiers qui, au cas où ils ne soient pas accessibles en ligne, doivent renvoyer vers d’autres fichiers.

L’exemple suivant représente un site web classique dont la page d’accueil, le CSS et les images sont mises en cache. Si l’utilisateur se connecte à la page d’accueil en étant hors ligne, la page offline.html lui est présentée au lieu d’index.html. Il est donc informé qu’il est déconnecté. Par conséquent il ne pourra pas accéder aux autres pages du site, puisque la section NETWORK spécifie via une étoile “*”, que tous les autres fichiers requièrent une connexion internet.

CACHE MANIFEST

# v0.1

CACHE:
index.html
css/style.css
img/logo.png

FALLBACK:
/ /offline.html

NETWORK:
*

Le .htaccess

Nous arrivons maintenant au passage (un peu) délicat. Il va falloir déclarer le MIME-type du fichier manifest. Ceci se fait par l’intermédiaire du fichier de configuration de serveur. Dans la grande majorité des cas vous utiliserez un fichier .htaccess pour les projets PHP.
Créez donc un fichier .htaccess dans le répertoire de votre application et ajoutez-y simplement la ligne :

AddType text/cache-manifest manifest

Dans cette ligne, on déclare que tous les fichiers se terminant par “manifest” ont pour MIME-type “text/cache-manifest”.

Test de l’application hors ligne

Afin de pouvoir tester localement notre application, nous allons devoir passer par Apache (et oui, faites chauffer vos WAMP / MAMP / LAMP !).
Plaçons notre application dans le dossier de votre serveur (www pour WAMP) et rendez-vous sur l’adresse http://localhost/
Si tout se passe bien, votre page s’affiche.
Maintenant stoppez les services de WAMP, puis rafraîchissez la page.
Alors qu’une page classique aurait naturellement fait afficher une belle erreur 404… Votre page est toujours là !
Ouvrez maintenant la console de votre navigateur si celui-ci en possède une (pour Chrome, elle se trouve dans Outils, Outils de développement, onglet Console).
On peut y voir ceci :

Creating Application Cache with manifest http://localhost/le-chemin-vers-votre-manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 3)
... (1 of 3)
... (2 of 3)
... (3 of 3)
Application Cache Cached event

On y voit en effet tous les événements qui ont lieu lorsque votre navigateur met à jour son AppCache. Les plus coriaces d’entre vous souhaiterons pouvoir intercepter ces événements pour pouvoir effectuer des traitements au moment du déclenchement de ces événements.
Ces événements seront détaillés dans la partie “aller plus loin” de ce tutoriel.

Mise à jour du manifest

Attention soyez bien attentif à présent ! La phrase suivante a de quoi perturber : une fois votre application dans l’AppCache grâce au fichier manifest, c’est cette version offline qui a la priorité sur la version en ligne ! Pourquoi ? Tout simplement parce que vous lui avez justement dit de le stocker dans le cache ! C’est exactement comme lorsque votre navigateur garde en mémoire une image ou un CSS sur un site, afin de ne pas avoir à le télécharger à nouveau. Seulement, c’est un peu plus perturbant lorsqu’il est question d’un fichier HTML, je le reconnais… Et donc, comment fait-on pour mettre à jour le cache avec la version en ligne ?

L’Application Cache sera mis à jour si :

  • L’utilisateur vide son cache manuellement.
  • Le fichier manifest change.
  • Le cache est mis à jour avec du code Javascript.

Voilà pourquoi il était important d’insérer un numéro de version dans un commentaire ! Il suffit de changer ce numéro de version pour obliger l’AppCache du client à se mettre à jour. Si vous effectuez peu de mises à jour (dans le cas d’un site vitrine par exemple) c’est la meilleure solution. Par contre, si vous avez besoin que le client soit en permanence à jour, on préfèrera la version Javascript. Et encore une fois, c’est dans la section “Aller plus loin” que ça se passe !

Deux remarques avant de passer à la suite :

  • Si le téléchargement de l’un des fichiers échoue, alors l’ensemble du téléchargement échoue. On peut considérer que le manifest liste le contenu d’un “pack” non scindable.
  • Lorsque l’on rafraichit la page après avoir modifié le fichier manifest, c’est la page initiale (donc non à jour) qui s’affiche en premier pendant le téléchargement du nouveau manifest. La nouvelle version ne s’affichera qu’au prochain rafraichissement de page (ou si on le fait via Javascript).

WebApps iPhone et Android

Alors attention, c’est le moment grandiose du tutoriel ! Depuis le début on parle d’applications, mais qui sont en fait des sites, mais qui sont quand même surtout destinés aux smartphones qui utilisent des applications… Bref c’est plus très clair tout ça ! Alors voilà qui devrait réconcilier tout le monde : la finalité de tout ça est entre autres de transformer un site web en véritable application pour mobile.

C’est à dire que notre site-application pourra :

  • avoir une icone
  • avoir un écran de chargement
  • s’afficher en plein écran
  • être installée sans passer par l’App Store Apple ni l’Android Market

Pas mal non ? Il s’agit en réalité d’un raccourci vers l’URL de votre site web qui sera à placer sur le bureau du smartphone de l’utilisateur. Un simple favoris devient donc une application à part entière.

Mais si mes utilisateurs ne passent pas par un App Store, comment vont-ils comprendre qu’il s’agit d’une Web App à installer via les favoris du navigateur ?

Bien vu. C’est effectivement la grosse faiblesse d’une Web App par rapport à une application native. Il n’est pas intuitif pour un utilisateur lambda de placer un raccourci web parmi ses icônes d’applications habituelles.

C’est fichu alors ? Les Web Apps ne vont être destinées qu’aux geeks de l’HTML5 qui savent faire ça ?

Heureusement ça n’est pas fichu, grâce à plusieurs projets très prometteurs qui permettent de transformer une web app en application native, et donc permettre de les trouver via un App Store et de les installer comme n’importe quelle autre application native. Les plus curieux pourront faire quelques recherches sur Phonegap et Appcelerator Titanium, qui feront l’objet de tutoriels dédiés sur ce site un peu plus tard.

Revenons-en à nos moutons !

La déclaration des icones, des images de chargement, etc. est contenue dans des balises link et meta, qui sont comme d’habitude à placer entre les balises head du document.

Apple ayant été pionnier dans les Web Apps, il ont choisi de nommer ces paramètres avec des noms propriétaires. Heureusement pour nous, Google a décidé d’utiliser les balises Apple afin de ne pas compliquer encore plus la vie des développeurs. Par conséquent, les extraits de code suivants fonctionnent aussi sur Android.

Utiliser une icone qui aura un effet de lumière sur iPhone :

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

Désactiver l’effet de lumière :

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />

Sur iPhone, les icones seront mises au format iPhone, c’est à dire carrées aux coins arrondis. Et en ce qui concerne Android, il est possible d’utiliser des images transparentes.

Afficher son application en plein écran :

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes">

Choisir le style de la barre de statut sur iPhone :

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Utiliser une image de chargement :

<link rel="apple-touch-startup-image" href="startup.png" />

Ne possédant pas d’iPhone, je ne peux vraiment tester les options spécifiques aux iPhones mais je vous invite à me dire si tout fonctionne bien dans les commentaires. Sur un Android HTC Desire, l’icone (qui est le plus important) s’affiche correctement. Je vous invite d’ailleurs à nous faire part de vos expérimentations sur iPhone via les commentaires sur cette page.

Aller plus loin : le Javascript

L’API Javascript HTML5 possède un objet window.applicationCache.
Cet objet permet de :

  • connaître les états du cache
  • attacher des traitements aux événements
  • faire une mise à jour du cache
  • changer le cache actuel

Voici la classe ApplicationCache telle qu’elle est donnée par le WHATWG :

interface ApplicationCache {

  // update status
  const unsigned short UNCACHED = 0;
  const unsigned short IDLE = 1;
  const unsigned short CHECKING = 2;
  const unsigned short DOWNLOADING = 3;
  const unsigned short UPDATEREADY = 4;
  const unsigned short OBSOLETE = 5;
  readonly attribute unsigned short status;

  // updates
  void update();
  void swapCache();

  // events
           attribute Function onchecking;
           attribute Function onerror;
           attribute Function onnoupdate;
           attribute Function ondownloading;
           attribute Function onprogress;
           attribute Function onupdateready;
           attribute Function oncached;
           attribute Function onobsolete;
};
ApplicationCache implements EventTarget;

Ainsi on peut tester le statut actuel :

if (webappCache.status == window.applicationCache.UPDATEREADY)

Ou avec un switch :

switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
...

Mais il est préférable de passer par la gestion d’événements pour détecter lorsque l’Application Cache change de statut :

var webappCache = window.applicationCache;

webappCache.addEventListener("updateready", updateCache, false);
webappCache.update();

function updateCache() {
webappCache.swapCache();
alert("Une nouvelle version est disponible.\nVeuillez rafraîchir la page pour mettre à jour.");
}
  • La méthode update() force le lancement du processus de mise à jour du cache.
  • addEventListener(“updateready”, updateCache, false) lancera la fonction updateCache dès que le statut de l’AppCache passera en “updateready”.
  • swapCache() permet d’échanger l’ancien cache avec le nouveau cache, ce qui finalise l’opération.

Si vous souhaitez trouver de plus amples informations sur le sujet, je vous invite à vous rendre sur la page Application Cache du WHATWG, où sont listés tous les status que peut prendre applicationcache.status, et tous les événements associés.

Dernière petite remarque, il est possible de tester si l’utilisateur est connecté à internet ou non avec la propriété :

navigator.onLine

Et voilà ! Vous avez tous les outils en main pour réaliser de superbes applications web ! Il y a fort à parier que ces applications deviendront le standard sur les smartphones d’ici quelques années, puisqu’elles fonctionnent aussi bien sur iPhone qu’Android. Couplé avec une balise canvas, on pourra par exemple jouer à des jeux vidéos en 3D dans le navigateur, qui seront compatibles avec tous les mobiles ! Pas besoin de s’embêter à développer plusieurs versions pour chaque OS mobile, du HTML/CSS et Javascript suffisent !

Voici une simple démonstration d’application web offline HTML5 avec le cache manifest.

Merci d’avoir lu jusqu’ici et à très bientôt pour de nouveaux tutoriels !

37 thoughts on “Tutoriel : Une application web offline HTML5 avec le cache manifest

  1. très bon tuto en français

    une précision sur navigator.onLine : il n’y a que IE8 et 9 (pour une fois) qui détectent une déconnexion physique du réseau, les autres navigateurs ne changent cette propriété que si l’utilisateur appuie sur le mode offline de son navigateur … à peu près inutile donc :)
    voir cette page démo : http://w3c.html5.free.fr/news/onLine.php

    Je ne sais pas comment cela se passe sur les mobiles, as tu fait des tests avec ?

    • Effectivement, il faudrait que cette propriété soit correctement supportée sur les mobiles pour profiter pleinement des capacités des applications offline.
      Je vais tester ça sur Android, et dans tous les cas je posterai une démo dans les jour à venir qui viendra illustrer ce tutoriel.

      Merci en tout cas :)

  2. Salut Jonathan tout d’abord merci beaucoup pour ce tutoriel. Voilà en fait je fais mon mémoire de fin d’études sur les applications offline, et je voulais savoir 2/3 choses :
    – je voudrais en savoir plus sur la liaison entre le manifest et le navigateur. Aurais-tu une doc technique??
    – le manifest permet-il d’abstraire la gestion des en-têtes “cache-contrôle”, “expires” ou est-ce un autres mode de fonctionnement?
    Merci d’avance

    • Salut Cédric,

      Voici la documentation technique du WHATWG concernant les applications offline. Bien qu’assez pénible à lire, elle est particulièrement complète et c’est à mon avis la seule source d’information totalement sûre sur laquelle tu devrais te baser pour ton mémoire. Pour ta question au sujet des en-têtes, je ne suis pas en mesure de te répondre, mais dans cette documentation on trouve la ligne suivante :

      HTTP caching rules, such as Cache-Control: no-store, are ignored for the purposes of the application cache download process.

      …Elle t’évoquera peut-être plus de choses qu’à moi.

      Bon courage pour ton mémoire !

  3. Salut, merci pour ce tuto en francais, ca fait pas mal de temps que je bosse sur le sujet et je connaissais déjà lutilisation d’un fichier cache.
    Je suis en train de dev une application avec sencha touch un puissant framework (html5, CSS3 et javascript). Cest toujours agreable de lire en francais un bon tuto.
    Jai donc appliquer un fichier .manifest a mon application et cela marche nikel sur iphone…ainsi que la mise a jour du cache.

    Par contre je dois encore voir pour lhistoire des status cest pas tres clair pour moi..

    • Salut Olivier,

      Je suis ravi de voir que le tutoriel t’ait plu et que tu mettes en pratique les applications Offline.
      Concernant les frameworks pour web apps mobiles Sencha Touch semble être un bon framework. Je t’invite également à jeter un oeil du côté de jQtouch et de jQuery mobile, qui n’est encore qu’en version alpha mais qui s’annonce très prometteur.

      Bonne continuation !

  4. Bonjour Jonathan,

    très bon tutos, je commence le dev sur smartphone.Personellement je conseille les livres :

    - http://www.eyrolles.com/Informatique/Livre/xhtml-css-et-javascript-pour-le-web-mobile-9782212127751
    - http://www.eyrolles.com/Informatique/Livre/relever-le-defi-du-web-mobile-9782212128284
    - http://www.eyrolles.com/Informatique/Livre/applications-iphone-avec-html-css-et-javascript-9782212127454

    3 livres très bien faits et plutot complet sur le sujet.

    Par contre j’ai un problème, je veux réaliser une appli web, disponible offline, et avec videos ( un gros un catalogue produit avec des videos de presentation, dispo offline pour que les commerciaux puisse presenter leur produit meme dans le fin fond de la correze )

    Les videos vont en cache avec le manifest ( l’appli me demande d’augmenter la taille de cache allouée a l’appli )

    Par contre impossible de visionner les videos en offline, systematiquement l’appli veut se connecter a internet.

    Pour info l’appli serait dispo sous IPAD.

    Si quelqu’un a deja ete expsoe a ce genre de problème je suis preneur.

    Merci en tout cas pour ce bon tuto.

    • J’aurais aimé savoir si vous aviez réussi votre appli offline pour vos commerciaux avec un gros volume de données. Si oui comment avez vous procédé ?

    • Je pense que tu devrais exploiter les bases de données embarquées pour ton appli. Il existe IndexedDB et web SQL Database. Bonne chance

      • Effectivement, sauf que Web SQL est maintenant deprecated et n’est plus maintenue.
        IndexedDB est la nouvelle voie à suivre !

  5. salue Jonathan Verrecchia je suis vraiment séduit par votre blog et depuis que m’intéresse au développement d’application web mobile je ne cesse de lire votre blog qui m’apport beaucoup sur mes recherches en html5. Seulement je voudrais comprendre davantage comment on développe une application web sur android si vous disposez de tutoriels très explicite là dessus.
    Merci pour la clarté et la pertinence de vos tutoriels.

    • Salut Amdane,

      Merci pour ton soutien !

      Les applications web HTML5 fonctionnent sur tous les smartphones récents, ce qui inclut Android. Si tu cherches à accéder à des fonctionnalités plus poussées du téléphone et publier ton application sur le market, intéresse-toi à “Phonegap”. Si tu cherches à développer une application spécifique Android (même si ce n’est que pour utiliser une WebView vers une page HTML, je t’invite à prendre contact avec Nazim Benbourahla, un ami blogueur sur Android qui possède un site de tutoriels Android. Tu peux le contacter par Twitter sur son compte @n_benbourahla.

      Bon courage pour tes recherches et merci pour ton commentaire :)

  6. Merci pour ce tutorial très clair et avec demo.

    J’ai testé la version démo et j’ai un problème quand je veux le tester sur mon iPhone en mode offline.
    En mode avion (idem sans wifi et 3G), au démarrage j’ai une popup “Impossible d’ouvrir Test : Impossible d’ouvrir Test car il n’est pas connecté à Internet. “. Bouton: fermer, ressayer

    Une solution à ce problème ?

    Sinon même question que trucdbois, puis je mettre en cache des petites vidéo en mp4 (10-30mo) ?

    Merci par avance et bonne continuation !

    • Salut Nicolas,
      Je n’ai malheureusement pas eu l’occasion de tester sur un iPhone, donc j’aurai du mal à t’aider à débugguer…
      En ce qui concerne la taille du cache, il est par défaut de 5Mo, donc tu ne pourras y stocker de gros volumes !
      L’appcache est donc plutôt adapté aux textes, images, et fichiers statiques de type CSS et Javascript.

  7. Bonjour

    L’article est top mais en suivant les instructions à la lettre, le cache manifest ne semble pas fonctionner chez moi. D’une, il demande une autorisation de stockage à l’utilisateur et de 2, en mode hors connexion ou en arrêtant le serveur apache, il n’affiche aucune des pages censées être en cache.

    Alors ma structure est particulière dans le sens où je n’utilise que des includes php, et ce sont ces fichiers php que je mets dans mon cache manifest. Serait-ce parce que le cache manifest ne prend pas les fichiers php en compte ? ou les includes ? ou bien est ce que je dois déclarer plutôt les images qui sont appelées dans mes includes php ?

    Je serais pas contre un peu d’aide :)

    Merci

    Cordialement

    Leene

    • Salut Leene,

      Difficile de te répondre. Si tu veux avoir le détail de ce qui se passe lors de la mise en cache, affiche la console de ton navigateur lorsque tu actualise ta page (Ctrl + Maj + I sous Chrome, ou via Firebug), tu auras des informations détaillées sur ce qui réussit et échoue.

      Concernant les fichiers PHP, l’AppCache ne tient pas compte de l’extension de tes fichiers. La seule chose qui lui importe sont les l’URLs auxquelle ils sont accessibles. Lorsque ta page PHP est exécutée elle génère du HTML dans tous les cas. Donc tu n’as qu’à écrire les différentes URLs de tes pages dans le manifest et cela devrait fonctionner !

  8. Merci beaucoup pour ce tutoriel très complet.

    J’ai cependant une petite question:
    J’ai mis mon application en cache, ainsi que les fichiers de styles, javascripts et les images.
    Tout fonctionne à merveille mis à par les background-images, alors que celle-ci sont présentes dans le fichier manifest…
    Une idée ??

    Bonne continuation à toi

  9. Excellent tuto, bien détaillé et clair. J’avais cependant une petite question sur un point qui à mon sens manque d’information, qu’elle est la taille maximale qu’on puisse utiliser au niveau du cache pour du travail offline par webapps ?

    J’ai entendu dire qu’il y avait une limite de taille par défaut assez basse au niveau du cache pour mettre ses fichiers, notamment pour le travail offline.

    Cette taille serait modificable c’est notamment la raison pour laquelle la webapps du Financial Times demande au lancement de pouvoir utiliser 50Mo devotre device.

    Mais à ton idée de la limite maximum autorisé sur iOS ?

    • Effectivement il y a une limitation. J’ai souvent lu qu’elle était de 5Mo par défaut mais ça doit sans doute dépendre également des OS comme tu le dis ! Pour iOS spécifiquement, je ne sais pas.

  10. Bonjour tout le monde,
    Tout d’abord je tiens à remercier Jonathan pour ce tutoriel très intéressant.
    Cependant j’ai une question : Dans le cadre de mon PFE je dois développer une application pour smartphone et je cherche un framework qui offre la possibilité de développer une application mobile qui fonctionne sur iPhone et Android en mode hybride.
    Merci bien pour votre retour.

      • bonjour Jonathan ,

        Tout d’abord je tiens à vous remerciez pour votre réponse , cependant j’ai une autre question :

        * Est ce qu’il est possible de connecter PhoneGap à une base de donnée POSTGRESQL ?

        Merci bien pour votre retour

        • Eh bien si c’est côté serveur vous pouvez utiliser n’importe quelle base de donnée puisque les applications mobiles fonctionnent de toutes façons par webservices (en communiquant des données JSON via requêtes REST). Par contre si c’est côté client cela dépend des téléphones donc il sera sans doute difficile d’utiliser la même technologie sur iPhone et Android par exemple.

  11. Bonjour,
    Tout d’abord merci pour ce tuto très clair, je vais tester cette solution sur mon projet.
    J’ai un peu le même problème que trucdbois, je souhaite créer une application qui sert principalement à visionner des vidéos , ces vidéos seront à télécharger dans l’appareil mobile.
    Toutefois j’ai déjà testé une solution avec phone gap, avec mon fichier html qui utilise une balise vidéo de html5, ce qui fonctionne lorsque je teste sous un navigateur, mais quand je créé une appli (je créé un .apk) et que je la télécharge dans mon appareil, celle ci ne lit pas les vidéos, il faut ouvrir l’index.html avec le navigateur pour pouvoir lire les vidéos.
    La solution que tu présente peut fonctionner pour moi, cependant je souhaite créer une application et non un favori à enregistrer afin de le transformer en web application.
    Avez vous une idée pour contourner ce problème?

    • Pourquoi ne pas créer une appli Android vide qui ne fait que lancer un intent du navigateur vers ton URL ? :)
      Ca devrait fonctionner !

  12. Bonjour,
    Tout d’abord merci pour ce tuto qui est toujours clair, je voudrai seulement avoir un petit complément au niveau des idées.
    Lors d’une utilisation de API Application Cache avec le fichier manifest, est ce que l’utilisation du API Localstorage n’est pas vraiment utile en parallèle avec la première ?
    je pose cette question dans le but d’avoir une application web-mobile (Phonegap …) qui se connecte avec le serveur d’une manière bidirectionnelle.
    Merci Jonathan :)

    • Les 2 sont complémentaires:

      • L’appcache est utile pour sauvegarder des fichiers,
      • LocalStorage est utile pour sauvegarder des variables, un peu comme le font les cookies.

      Voilà !

      • Merci pour ces compléments d’info c’est intéressant :)
        Je veux juste une petite aide au niveau de ce fameux fichier manifest. Mon serveur d’app est un IIS. Normalement pour les autres serveur web on peut donner une déclaration pour le MIME TYPE dans un fichier comme le web.xml de J2EE. Comment faire avec un fichier web.config IIS?

  13. Bonjour,

    Tout d’abord un grand merci pour cet excellent tuto qui m’a permis de me plonger dans le sujet.

    J’ai cependant un problème, j’utilise une authentification (unique) à l’ouverture de mon application : un formulaire qui envoie les infos à une autre page php.
    Mais cela ne marche pas en offline bien sûr…

    Comment puis-je adapter ce système d’authentification pour le rendre offline?

    Je cherche une solution depuis 2 jours mais j’ai un peu de mal :)

    Merci beaucoup,

    Tib

    • Bonne question !
      Il n’y a pas vraiment de bonne réponse cela malheureusement. Cela dépend énormément de ton site et de ce qu’il fait. Si tu veux porter l’intégralité de ton contenu en offline comme le ferait Gmail par exemple, il faut développer la gestion des données (via base de donnée IndexedDb – très mauvais support navigateur) ou localStorage (limité), et pour être honnête, c’est un travail titanesque de dupliquer ta logique serveur sur le client.
      De plus, tu ne veux certainement pas que l’utilisateur se loggue côté client avec son mot de passe qui serait donc stocké dans le JavaScript pour des raisons de sécurité.
      Je dirais que vouloir porter un site entier ou une authentification côté client est une très mauvaise idée et qu’il vaut sans doute mieux que tu redirige l’utilisateur sur une page qui dit gentiment “Vous êtes actuellement hors-ligne”. Cela me semble beaucoup, beaucoup, beaucoup plus viable et sécurisé.

    • C’est tout à fait normal et c’est le but. Une web app c’est simplement une page web ouverte dans le navigateur :)
      Si tu veux un “cadre” qui ne soit pas Safari pour ta web app, tu vas devoir utiliser Phonegap ou un équivalent pour packager ta web app dans une application native.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>