1 foyer sur 10 possède une tablette tactile en France

Selon la dernière étude de Mediametrie en date du 11/12/2012, 1 foyer sur 10 en France est équipé d'une tablette tactile.

800 000 primo-accédant en 6 mois

Au 3 ème trimestre 2012, près de 3 millions de foyers possèdent une tablette tactile en France. Ce chiffre est en très forte augmentation puisqu'on compte 1/3 de foyer équipés en plus en 6 mois ce qui représente 800 000 primo-accédant en 6 mois.

Les familles urbaines bien équipées

La tablette est un équipement urbain : 14% des foyers parisiens en possèdent une. Elle concerne également les foyers relativement jeunes mais dotés d'un certain pouvoir d'achat : 17,5% des foyers dont "le chef de famille" est âgé de 35 à 49 ans.

Source : Mediametrie - Intégralité des résultats 

window.matchMedia, MediaQuery en Javascript

Résumé

Retourne un objet MediaQueryList représentant le résultat du pattern MediaQuery passé en paramètre.

Syntaxe 

mql = window.matchMedia(mediaQueryString)

Exemple

if (window.matchMedia("(min-width: 400px)").matches) {    /* the view port is at least 400 pixels wide */ } else {    /* the view port is less than 400 pixels wide */ }

Il est possible aussi d'ajouter dans le pattern Media Query, l'orientation : (orientation: portrait).

On peut aussi ajouter un observer implémantant l'interface MediaQueryListListener, pour être notifier du changement d'orientation par exemple comme ci-dessous :

var mql = window.matchMedia("(orientation:portrait)"); mql.addListener(handleOrientationChange); handleOrientationChange(mql); function handleOrientationChange(mql) {    if (mql.matches) {      /*The device is currently in portrait orientation */    } else {      /*The device is currently in landscape orientation */    } }

Cette fonction peut être très utile lorsque l'on gère directement le design en javascript. Car l'étude du User-Agent n'est quelque fois pas suffisant pour déterminer le style d'affichage notamment sur les tablettes 7''.
En paysage, on affichera plutôt le design dédié au tablette alors qu'en portrait on aura tendance à afficher le design Smartphone.

ASP.NET Forms Authentication Safari/Chrome sur IOS

Contexte

Je développe actuellement une Webapp HTML5 communiquant avec des services WCF. Pour les sécuriser, j'ai implémenté l'authentification ASP.NET par formulaire.
Certaines fois, sur iOS 6,  l'appel au webservice sécurisé était refusé. Sur ipad, je l'ai généralement rencontré en Webview, quand on ajoute la webapp sur le Homescreen.

Lors de la connexion de l'utilisateur à la Web App, on réalise le code ci-dessous :

1. FormsAuthentication.SetAuthCookie(userName, true /*createPersistentCookie*/);

La configuration de Web.config est la suivante :

1. <authentication mode="Forms" >
2. <forms loginUrl="../Login.html" timeout="2880" />
3. </authentication>

Solution

En analysant la réponse du serveur je me suis aperçu que finalement je n'étais pas authentifié. Alors que le web service d'authentification l'avait bien confirmé.
Certaines fois le cookie d'authentification n'est pas bien obtenu par le navigateur, notamment sur Safari et Chrome. Après beaucoup de recherches, j'ai finalement trouvé une solution.

Plusieurs étapes sont à réaliser :

1. Dans le Web.config, il faut ajouter la clé suivante, qui permet de forcer l'utilisation des cookies par le navigateur. Par défaut c'est UseDefault :
1. <authentication mode="Forms" >
2.        <forms loginUrl="../Login.html" timeout="2880" cookieless="UseCookies" />
3. </authentication>
2. Ensuite il peut aussi être utile de rajouter une MachineKey dans le Web.Config, pour éviter un problème dans le cryptage/décryptage du cookie d'authentification.
1. <system.web> 
2.       <machineKey validationKey='myKey' decryptionKey='myDecryptKey' validation='SHA1'/>
3. </system.web>

Pour générer une machineKey, vous pouvez aller directement sur ce site : Générateur de machineKey

Source : http://www.bloggersworld.com/index.php/2012/08/19/asp-net-forms-authentication-iphone-cookies/

HTML5 et les développeurs - Etude Appcelerator

Selon une étude réalisée par Appcelerator, éditeur de l’outil de développement d’applications mobiles Titanium, et le cabinet d’analystes IDC, HTML5 n’aurait pas encore convaincu les développeurs mobiles. Pire, les fonctionnalités proposées pour l’heure par le futur standard, ne satisferaient pas les développeurs. 

Selon les résultats de l’étude, les développeurs montrent une attitude de « neutre » à « insatisfait » pour les applications développées en HTML5 : 

1. 62 % l’expérience utilisateur 
2. 72,4% les performances 
3. 83,4% la monétisation 
4. 75,4% la fragmentation
5. 60,3% le contrôle de la distribution
6. 67,9% l’intemporalité des nouvelles mises à jour
7. 81,8% la sécurité.

En revanche, 58% développeurs sondés se disent pleinement satisfaits concernant les possibilités de développement cross plate-forme du langage, et un peu moins de 50% se positionnent de même pour les mises à jour.

Autre enseignement de cette étude : la baisse de popularité d’Android chez les développeurs  se poursuit. Dans cette édition, seulement 66% des développeurs interrogés affirment être très intéressés par les développements pour les tablettes Android et 76% par les smartphones. Une baisse légère, note l’étude – de 2 et 3 points respectivement – mais qui s’inscrit dans la durée. La plate-forme Apple reste encore la cible préférée des développeurs.

Source : http://www.lemagit.fr/technologie/architectures-logicielles-soa/langages/2012/11/23/html-5-ne-ravit-pas-les-developpeurs/

Rapport complet de l'étude : Appcelerator Report Q3 2012

4ème Meetup Windows Apps: Javascript, HTML5 et .NET

Vous êtes développeur d'applications sous Windows ou souhaitez vous lancer, venez rencontrer d'autres développeurs de la communauté.

Lieu :

IESA multimedia - Campus Opera

5 avenue de l'opera, 75001, Paris 

Programme :

1. Comment prendre soin de vos utilisateurs ?

Par Benjamin Baldacci, consultant .NET chez Wygwam.

• Itinérance des données
• Avertissement des erreurs
• Paramètres

    2. Optimisation d'une application Windows 8 développée avec javascript

Par David Catuhe, Technical Evangelist Lead for Windows Client chez Microsoft et David Rousset, Windows 8 & HTML5 Developer Evangelist chez Microsoft.

    3. Accéder aux Api de camera avec javascript pour Windows 8

Par David Catuhe, Technical Evangelist Lead for Windows Client chez Microsoft et David Rousset, Windows 8 & HTML5 Developer Evangelist chez Microsoft.

    4. Websockets: coder un chat en 10 minutes

Par Jean-Noël Gourdol, Jean-Michel Deruty et Florie Fauché.

Inscription Meetup

Pattern MVC BackboneJs

L'objectif de cet article est de proposer plusieurs modélisation UML d'un projet de WebApplication avec la librairie Javascript BackboneJs.

Router > View > Model

Tout d'abord une modélisation très simple, qui comprend un router, une view et un model. 

Modélisation UML Architecture simple Backbone

Cette modélisation est un bonne solution si on est dans un contexte relativement simple. C'est à dire que l'on a qu'un seul Model, que l'on affichera grâce à le View.

Le router permet d'instancier la view à laquelle il passera le model à afficher.

1. Router = Backbone.Router.extend({
2.   routes: {
3.          "Page1": "maPage1",   // http://monsite/#Page1
4.          "*actions" : "defaultRoute" //http://monsite/
5. },
6. maPage1 : function(){
7.      var view = new MaView({model : monModel, viewContainer : monContainer})
8. }
9. });

Router > Collection Model > View

Maintenant passons à une modélisation un peu plus complexe.

Modélisation UML avec une collection de model

 Cette fois on souhaite afficher une liste de model. Dans cette architecture, la View permet l'affichage d'une collection de Model. 

C'est à dire que dans la fonction Render(), nous allons faire un foreach() pour chaque élément de la liste, et générer directement le code HTML que l'on ajoutera à notre conteneur HTML de la liste.

1. render : function (){
2.      this.collection.each(function (item){
3.              myContainterListe.append($(template(item.toJSON())));
4.      }
5. }

Ce principe n'est pas optimal notamment si l'on souhaite gérer des évènements sur les items de la liste générée par le View. 

Router > Collection > View > Model > View 

L'architecture présentée ci-dessous à une granularité plus fine que celle ci-dessus. 

Modélisation UML avec une view pour la collection et une view par item

On souhaite toujours afficher une liste de Model, mais à la différence le modélisation précédente, on crée une view pour la collection et une view pour les items de la collection.

Cette fois la fonction render() de la View de la collection, va faire appel ,pour chaque item, à la fonction Render() de la view des items.

1. ListView = Backbone.View.extend({
2.         renderItem: function(model){
3.               var itemView = new ItemView({model : model});
4.               itemView.render();
5.         },
6.         render : function() {
7.                this.collection.each(this.renderItem);
8.         }
9. });

On pourra donc ajouter des évènements sur notre view Item, pour ajouter du comportement à nos items.

Pour ajouter des évènements sur une Backbone.View :

1.  events :
2. {
3.      "click .classname" : "mafonction"
4. }

(function ($) { }(jQuery)); vs $(function () {});

(function ($) {  }(jQuery)); vs $(function () {});

Un petit retour d'expérience, après être resté bloquer pendant quelques heures, sur une erreur liée à la librairie JqueryMobile. L'erreur est : $.mobile.loader of 'undefined' .

Contexte de l'erreur

• dans la fonction (function($) {} (jQuery)); je crée un model Backbone, une view Backbone et un routeur Backbone.
• dans cette même fonction j'instancie mon routeur et Backbone.history.start();

Lorsque je charge la page, je réalise un appel Ajax async pour obtenir une collection d'éléments. Pendant cette appel Ajax, j'utilise la "loading bar" de JQuery Mobile comme ci-dessous :

1. CollectionModel.fetch({
2.             beforeSend:function ()
3.             { $.mobile.loading('show');
4.             },
5.             complete: function () {
6.                 $.mobile.loading('hide');
7.             }, 
8.             success: callback
9.         });

Lors de cette appel, la méthode $mobile.loading n'est pas définit car la librairie JQueryMobile n'est pas encore ready.

Solution

Pour résoudre le problème, il faut tout simplement réaliser l'instanciation du Router et lancé Backbone.history.start() n'ont pas dans (function($) {}(jQuery)) mais plutôt dans $(function() {}); car dans ce cas, on est sur que la librairie $.mobile est chargée et disponible.

La fonction anonyme (function($) {}(jQuery) signifie que le DOM JQuery est ready mais il faut bien dissocier le DOM JQuery et le DOM du Document qui est représenté par la fonction suivante : 

1. $(function() {});

Récapitulatif

La déclaration des Models, des Views et des Routers Backbonejs doivent être placée dans la fonction anonyme :

1.  (function($) {} (jQuery)); 

Par contre l’instanciation du router doit être de préférence réalisé dans la fonction :

1. $(function() {}); 

Internet Mobile - Septembre 2012

Audience de l'internet Mobile en France - Sept 2012

L'institut Médiamétrie a publié hier ses statistiques concernant l'internet mobile. On y apprend qu'au 3 ème trimestre 2012, 41,2% des individus vivant en France se sont connectés à l'internet mobile par un site ou une application, 46,6% des Français sont équipés d'un smartphone.

Au niveau des systèmes d'exploitation, Android est en forte augmentation par rapport au même trimestre 2011.

En terme de répartition entre les accès via site ou application est stable : 92.1% des mobinautes ont visités un site sur mobile et 72.1% ont visités au moins une application sur smartphone.

Source :  L'audience de l'internet mobile en France en septembre 2012 - Médiamétrie

Backbone.js

Backone.js

Dans cet article, je vais vous présenter la librairie Backbone.js. L’API est disponible sur le site : http://backbonejs.org/

Backbone permet de mettre en place une architecture MVC en javascript, côté client. Cela va permettre d’avoir un code javascript mieux structuré.

Model

Un modèle est une représentation de vos données sous forme d’objet. Pour créer un modèle backbone, il est nécessaire d’étendre la class : Backbone.Model.extend() ;
  La déclaration d’un model « Personne » :

1. var html5webapp = {};
2. html5webapp.Personne = Backbone.Model.extend({
3.  defaults: {
4.    "Id" :"1",
5.    "Nom" : "Toto",
6.    "Prenom" : "Tata"
7.  },
8.  initialize : function Personne() {
9.   this.bind("error", function(model, error){
10.    console.log( error );
11.   });
12. }});

L’attribut defaults permet de mettre des valeurs par défaut aux propriétés de notre modèle.

Grâce à la console de développement Google Chrome, nous pouvons déclarer une variable pers comme ceci :

   Pour obtenir maintenant la valeur des propriétés :

   Il est aussi possible d’ajouter des méthodes à notre modèle, comme par exemple des accesseurs à nos propriétés :

1. getId : function() {
2.     return this.get('Id');
3. },
4. setId : function(value) {
5.    this.set({ Id : value });
6. },
7. getNom : function() {
8.     return this.get('Nom');
9. },
10. setNom : function(value) {
11.     this.set({ Nom : value });
12. },
13. getPrenom : function() {
14.     return this.get('Prenom');
15. },
16. setPrenom: function(value) {
17.     this.set({Prenom : value });
18. }

Utilisation des accesseurs set /get :

Afficher un modèle

   Pour afficher un modèle, on utilise ici la librairie Underscore.js comme ceci :

1. < script type="text/template" id="personne-template">
2. < ul data-role="listview" id="personne-field" data-inset="true">
3. < li >Id: <%= Id %>< /li>
4.  < li >Nom: <%= Nom %>
5. < li >Prenom: <%= Prenom %></ li>
6. < /ul>
7. < /script>

La déclaration du template « Underscore » est à faire dans une balise script. Puis on y ajoute les propriétés du modèle à afficher.

View

Afin de faire l’interface entre notre modèle et de notre template, on déclare une View. Dans cette view, on lui spécifie la template à utiliser via cette instruction : 

this.template = _.template($('#personne-template').html());

1. html5webapp.PersonneView = Backbone.View.extend({
2.   initialize: function(){
3.      this.template =
4.            _.template($('#personne-template').html());
5.          },
6.     render: function() {
7.     var container = this.options.viewContainer,
8.     personneModel = this.model,
9.     renderedContent = this.template(personneModel.toJSON());
10.     container.html(renderedContent);
11.      container.trigger('create');
12.     return this;
13.      }
14.    });

Puis lorsque la page HTML est prête, nous allons déclarer un conteneur dans lequel on souhaite afficher le modèle. Et enfin instancie la View en lui passant le conteneur et le modèle.

1. $(document).ready(function() {
2.  var personneContainer = $('#Personne').find(":jqmData(role='content')"),
3.          perosnneView;
4.  var persModel = new html5webapp.Personne();
5. personneView = new html5webapp.PersonneView({model : persModel,
6.  viewContainer: personneContainer});
7.    personneView.render();
8. });

La fonction render() va réaliser l’interprétation du template et du modèle.

Affichage du modèle avec les propriétés par défaut.

HTML5 - Jeu Mobile en Open Source

Pocket Island

La société Wooga, studio de développement de jeu, a récemment voulu créer un jeu mobile complet avec les technologies Web normées(html5 notamment).
Afin de faire un retour sur expérience, Wooga a publié le code source du jeu sur GitHub sous licence Open Source.
 Code source de Pocket Island

Wooga a également publié un article sur son blog, afin de décrire les leçons que les développeurs ont retirées à travers cette expérience.

L'article est disponible ici : http://www.wooga.com/2012/06/woogas-html5-adventure

Et enfin pour tester le jeu c'est par ici : Tester le jeu!

HTML5 - GoogleMap - Layer OpenStreetMap

OpenStreetMap avec Google Map

Dans cet article, je vais vous montrer comment afficher un layer OpenSteetMap grâce à l'API Google Map en javascript.Tout cela est bien évidement utilisable en HTML5 pour réaliser une WebApp.

Pour rappel, l'intégration de l'API Google Map en javascript est requise.Pour cela, copier la balise ci-dessous :

1. < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=yourKey&sensor=false" >< /script>
   

Ensuite, il est nécessaire d'ajouter une balise div permettant d'afficher la Map. Comme ceci :

1. < div id="map" /> < /div>

Maintenant, il faut créer la Map via l'API Google Map. Mais cette fois, on ne va pas mettre un map type Google Map comme par exemple celui des routes : google.maps.MapTypeId.ROADMAP

Mais cette  fois, c'est un type particulier : "OSM", de plus il faut le coupler avec un paramètre supplémentaire : mapTypeControlOptions

1. map = new google.maps.Map(element, {
2.    center: new google.maps.LatLng(me.latitude, me.longitude),
3.    zoom: 15,
4.    mapTypeId: "OSM",
5. mapTypeControlOptions: {
6.   mapTypeIds: ["OSM"]
7. }
8. });

Par rapport à un layer Google Map, il est nécessaire d'obtenir l'image OpenStreetMap. Voici le code javascript nécessaire pour afficher le visuel OpenStreetMap.

1. map.mapTypes.set("OSM", new google.maps.ImageMapType({
2.             getTileUrl: function(coord, zoom) {
3.                      return "http://tile.openstreetmap.org/" + zoom + "/"
4.                          + coord.x + "/" + coord.y + ".png";
5.                     },
6.                 tileSize: new google.maps.Size(256, 256),
7.                 name: "OpenStreetMap",
8.                 maxZoom: 18
9.        }));

C'est assez fun et puis c'est un avant goût de la prochaine cartographie d'IOS6. Apple a décidé d'abandonner Google Map au profit d'Open Street Map pour la prochaine mouture d'IOS.

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.

Fusion Tables & Google Map FusionTablesLayer

Présentation Fusion Tables

Je viens de découvrir une fonctionnalité de Google bien sympa c'est : Fusion Table. On peut le voir comme un type particulier de document dans Google Drive.

Dans ce document, on peut ajouter de l'information comme dans une table. On y retrouve les types Geometry et Location. On peut donc y stocker de l'information géographique. Comme des coordonnées géographiques ou encore du KML.

Il est aussi possible de géocoder une colonne contenant des adresses(numéro, rue code postal ville). Le géocodage va permettre de retrouver les coordonnées géographiques en fonction de l'adresse.

NB : Pour pouvoir accéder à une map via l'API Google Map, ne pas oublier de régler les accès en partageant le document.

Affichage sur Google Map : FusionTablesLayer

Maintenant avec l'API Google Map, on peut requêter cette table pour en afficher les éléments sur une carte. Le langage pour sélectionner les informations est le SQL.

1.       var layer = new google.maps.FusionTablesLayer({
2.              query: {
3.                       select: 'Adresse',
4.                       from: '1_8f7R92thvehMtNzFxtiWhz1JtFqZwJsaJ2yMVw',                                                                    where: "Arrondissement = '75013'"
5.                         },
                styles: [{
6.                  markerOptions: {
7.                          iconName: "small_green"
8.                 }
9.            }]
10.           });
11.           layer.setMap(map);

Il est aussi possible d'insérer, d'updater des données dans une table via l'API Fusion Tables. Mais cette partie sera développer dans un futur article sur cette API.

On peut rendre l'affichage différent en fonction d'une valeur avec le mot clé where :

1.      styles: [{
2.           where : "Arrondissement in ('75013', '75014')",
3.           markerOptions: {
4.           iconName: "small_yellow"
5.           }
6.      }]

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.

Facebook abandonne HTML5 pour son app iOS

L’application Facebook pour IPhone est lente, très lente même.

Sur l'App-store, sur les 38 000 personnes l’ayant noté, plus de 21 000 personnes n’ont accordé qu’une seule étoile,tous la décrivant comme lente, toujours en chargement, ou crashs répétitifs.

En faite il se dit que l'application Facebook est la plus lente des 500 000apps disponible sur IPhone.

Cette fois Facebook va utiliser directement le code natif : Objective-C.
Car dans la version actuel c'est une web-application html5 wrapper dans une web view afin de mutualiser le code entre Windows Phone, Android et IOS.

Concrètement, les fonctionnalités de l’application resteront les mêmes, ainsi que le design, mais elle sera plus optimisée, rapide, réactive et pourra tirer parti du hardware.

De quoi remettre en cause la rapidité du HTML5 sur mobile ? Qu'en pensez-vous?

Source : New York Times

HTML5 - Cartographie sur mobile - Partie 1

WebApp Html5 Localisation & Google Map

Dans cette article, je vais vous présenter quelques fonctionnalités de l'API Google Map que je trouve intéressante pour la mobilité. Aujourd'hui la mobilité a amené de nouveaux usages, comme par exemple trouver une information en fonction de sa position.(le boulanger le plus prés de moi). Mais on peux imaginer à une multitude d'autres utilisations...

API Geoloalisation

   Dans un premiers temps, il faut vérifier si le navigateur gère bien l'API.

1. if (navigator.geolocation){
2. }

    L'API de géolocalisation est disponible sur :

• Safari Mobile (depuis iOS 3.0)
• Android (depuis la verison 1.6)

De plus tous les grands navigateurs de bureau gère églament l'API :

• (Firefox (>= 3.5)
• Safari (>= 5.0)
• Google Chrome
• Opera(>= 10.60)
• Internet Explorer (>= IE 9))

Pour obtenir la position géographique :

1. navigator.geolocation.getCurrentPosition(function(position){
2.   var latitude = position.coords.latitude;
3.   var longitude = position.coords.longitude;
4.         alert('Latitude :' + latitude + ' Longitude : ' + longitude);
5.    },function(error){
6.            alert(error.Message);
7.    });

Le prototype de la méthode getCurrentPosition() est le suivant :

1. void getCurrentPosition(PositionCallback successCallback,
2.            optional PositionErrorCallback errorCallback,
3.            optional PositionOptions options);

API Google Map

Maintenant que l'on a obtenu notre localisation en coordonnée géographique, il peut être intéressant de l'afficher sur une map. Pour cela nous allons utiliser l'API Google Map.

Tout d'abord il faut intégrer l'API Google Map à la page.

1. < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=yourKey&sensor=false" >< /script>

Ensuite dans votre code HTML placez la balise suivante :

1. < div id="map" />

Cette section va permettre l'affiche de Map. Maintenant en javascript, nous allons instancier un élément google.maps.Map(mapDiv:Node, opts?:MapOptions) qui sera intégré à la balise div.

1. var element = document.getElementById("map");
2. map = new google.maps.Map(element, {
3.   center: new google.maps.LatLng(latitude, longitude),
4.   zoom:  15,
5.   mapTypeId: google.maps.MapTypeId.ROADMAP
6. });

L'option mapTypeId permet d'afficher les différents layers Google Map, comme satellite, plan

• HYBRID
• ROADMAP
• SATELLITE
• TERRAIN

Il est possible de passer d'autres paramètres comme un style,la possibilité ou non de zoomer...

Afficher une position

Pour afficher notre position, on utilise l'objet Marker(opts?:MarkerOptions). On lui affecte alors la position en type LatLng(latitude, longitude). Et on affecte notre map à la propriété du même nom.

1. var latlng = new google.maps.LatLng(latitude, longitude);
2. var marker = new google.maps.Marker({
3.                 position: latlng,
4.                 map: map
5.            });

Maintenant on va afficher une petite fenêtre dans laquelle on peut ajouter du code html.

1. var infowindow = new google.maps.InfoWindow();
2. infowindow.setContent('
3.           +latitude +','+longitude
4.           +'); 
5. infowindow.open(map, marker);

Conclusion

Nous avons pu voir dans cette article, qu'il n'est pas très difficile de mettre en place un système de géolocalisation sur son site web. Et en plus, cette fonctionnalité est cross-plateforme (iphone, ipad, android).

Dans la prochaine partie de cette article, on rentrera un peu plus en détail sur les différentes possibilités pour dessiner et afficher de l'information sur une map.

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.

HTML5 Cache Manifest

Cache.Manifest

 Présentation

Le cache.Manifest est un fichier permettant de mettre nos pages dans le cache du navigateur souhaitées, de spécifier les pages qui ont nécessairement besoin d’un accès réseau mais aussi de spécifier une page d’erreur en cas d’erreur réseau.Sur les mobiles, le cache.Manifest est disponible 

depuis les vesions IOs 2.1 et Android 2.0

 Structure du fichier

La structure du fichier Manifest doit commencer par :

1. CACHE MANIFEST

Puis on ajoute les fichiers que l’on souhaite mettre en cache :

1. CACHE:
2. Index.htmll
3. http://monsite.com/Index2.html

On peut saisir le chemin des pages en absolue ou en relative. Après le chargement des pages  dans le cache local du navigateur, lors de la prochaine visite sur le site, le navigateur chargera la page directement depuis le cache local, il n’y aura donc pas d’accès au serveur.

Pour les pages qui ont besoin d’avoir un accès réseau :

1. NETWORK :
2. Upload.html

Enfin pour personnaliser un message d’erreur dans le cas où la fonctionnalité n’est pas disponible en mode déconnecté :

1. FALLBACK :
2. / /offline.html

Il est aussi possible de mettre un message d’erreur différente par fonctionnalité, de cette façon :

1. /fonctionnalite1.html /offline1.html
2. /fonctionnalite2.html /offline2.html

Enfin il est possible de versionner son fichier manifest :

1. CACHE MANIFEST
2. #V13.72
3. CACHE:

Ce versionning permet au navigateur de savoir quand il doit mettre à jour ou non son cache.

Quelques règles

Il est possible d’ajouter des commentaires grâce au caractère « # ».

Les lignes vides sont ignorées.

Le manifeste doit utiliser le type MIME : text/cache-manifest. Toutes les ressources utilisant le type MIME  text/cache-manifest doivent utiliser la syntaxe décrite ci-dessus.

 Intégration à la page HTML

 Après avoir créé son fichier cache.Manifest , il suffit d’ajouter à la balise html la propriété manifest comme ci-dessous :

1. <html manifest="./cache.Manifest">

Mise à jour du cache

     Maintenant que l’on a créé et ajouté notre fichier Manifest  à notre site.
     Lorsqu’un utilisateur visite une page ayant déclaré un manifeste, le navigateur va essayer de mettre à jour le cache.
     Il le fait en allant chercher une copie de manifeste et , si le manifeste à changer depuis la dernière visite alors il re-télécharge toutes les ressources du manifeste et les mets de nouveau en cache.

Application Cache API

Il existe via javascript une interface permettant de manipuler le cache : ApplicationCache 

Pour obtenir l’objet ApplicationCache dans une windows : 

1. var cache = window.applicationCache

Pour obtenir le statut courant du cache applicatif, il suffit d’appeler la propriété : cache.status
     Le statut peut être :

• UNCACHED = 0
• IDLE = 1
• CHECKING = 2
• DOWNLOADING = 3
• UPDATEREADY = 4
• OBSOLETE = 5

Méthodes

3 méthodes sont disponibles sur cette interface :

• void update()

Permet d’invoker le processus de mise à jour du cache de l’application.Appeler cette méthode n’est pas forcément nécessaire car le user agents aura généralement pris le soin de mettre à jour le cache de l’application automatiquement.

Il peut être intéressant d’appeler cette méthode lorsqu’une application à une durée de vie longue.  

Par exemple : Un WebMail ouvert  dans un navigateur depuis 1 semaine. L’application peut alors tester chaque jour s’il y a une mise à jour du manifest.

• void abort()

Permet d’annuler me processus de mise à jour du cache de l’application.

• void swapCache()

Evénements

• checking

Levé lorsque le user agent est en cours de contrôle ou attend le téléchargement du manifeste pour la première fois.

Toujours le premier événement de la séquence.

• error

Le manifeste était une page 404 ou 410, donc la tentative de mettre en cache a été abandonnée. 

Le manifeste n’avait pas changé, mais la page référençant le manifeste n’a pas pu être téléchargée correctement.

Une erreur fatale s’est produite lors de l’extraction des ressources énumérées dans le manifeste.Le manifeste a changé alors que la mise à jour a été exécutée.

• noupdate

Le manifeste n’avait pas changé.

• dowloading

Le user agent a trouvé une mise à jour et est allé la chercher ou en cours de téléchargement des ressources listées dans le manifeste.

• progress

Le user agent en cours de téléchargement des ressources listées dans le manifeste.

• updateready

Les ressources listées dans le manifeste ont été nouvellement re-téléchargées, et le script peut utiliser swapCache() pour utiliser le nouveau cache.

• cached

Les ressources listées dans le manifeste ont été téléchargées et l’application est maintenant en cache.

• obsolete

Le manifeste constate qu’il est devenu une page 404 ou 410, donc le cache de l’application est en cours de suppression.

Conclusion

     Grâce au manifeste, il est donc possible de naviguer sur un site internet en mode Offline.

     Cette approche est intéressante notamment pour un site à destination des Devices car en mobilité on peut avoir des pertes de réseaux.


     Plus tard nous verrons comment construire le fichier cache.Manifest dynamiquement dans une architecture HTML5 + MVC  ASP. NET.