Pour l’édition 2013 du salon Vinexpo, nous avons réalisé une application Web destinée aux mobiles basée sur les technologies HTML 5 pour offrir de la disponibilité en mode déconnecté. L’application doit être disponible même si le smartphone perd sa connexion réseau.
Parmi les fonctionnalités de la WebApp réalisée en 2013, on notera :
- une section “Mon Vinexpo” qui permet à l’utilisateur de se construire des listes de favoris pour les évènements du programme auxquels il souhaite assister et les exposants qu’il souhaite visiter. Cette section fonctionne en mode déconnecté mais permet aussi de synchroniser ses favoris entre le smartphone et la version desktop du site Vinexpo (www.vinexpo.com) via un système de connexion par login / mot de passe. Il est aussi possible de créer son compte en ligne “Mon Vinexpo” directement depuis la WebApp.
- l’affichage du programme par date et par thème
- l’affichage du catalogue des exposants (sous forme de liste) par lettre, par pays,par type de produit (ex : vins tranquilles, vins effervescents,…), autres exposants (ex : organismes)
- le plan du salon réalisé par la société minimap
- les informations pratiques du salon (section Visiter)
- un mode “hors connexion”, principe même d’une “WebApp”
Bases techniques de la WebApp
La réalisation technique de la WebApp s’est faite au moyen de 3 ressources HTML 5 aujourd’hui gérées par la plupart des navigateurs de smartphone :
L’AppCache a permis de disposer de toutes les pages de la WebApp en mode déconnecté. Références :
- Safari Developer Library HTML5 – Offline Application Cache
- W3Schools – HTML5 Application Cache
- Wikipedia – AppCache
Le LocalStorage ou WebStorage a permis de stocker en local, les données du programme, du catalogue, de “Mes événements” (gestion des événements du programme favoris de l’utilisateur) et de “Mes exposants” (gestion des exposants favoris de l’utilisateur)
AppCache dans Vinexpo WebApp
L’appcache de la WebApp Vinexpo permet de stocker en local l’ensemble des pages de la WebApp. Les utilisateurs peuvent ainsi accéder aux pages de la WebApp sans accès à Internet.
Les ressources HTML stockées dans les caches sont celle indiquées dans un fichier appcache.manifest. Ce fichier est construit dynamiquement via une vue et un template Django. On y trouve les parties suivantes :
CACHE MANIFEST
Il est mis à jour à chaque fois que l’on souhaite indiquer aux navigateurs qu’au moins une ressource en cache a été modifiée ou que le contenu même du cache a changé (ex : ressource en plus ou en moins). Il contient simplement la date et le numéro de version du manifest
CACHE
Stocke les éléments suivants :
- fichiers statiques
- home page
- pages “Mon Vinexpo”
- pages Programme
- pages Catalogue
- page de la map
- pages Visiter
- page Aide
FALLBACK
Ces urls requièrent effectivement l’accès à Internet.
- page de login
- logout
- page de création de compt
NETWORK
Tout le reste
AppCache et Map : En réalité, le plan du salon se base sur l’API Google et requiert nécessairement l’accès au réseau par le téléphone pour fonctionner. La page principale du plan du salon a tout de même été mise en cache pour les cas d’utilisation où le débit réseau est faible.
LocalStorage dans Vinexpo WebApp
Le LocalStorage est un espace de stockage d’informations mis à la disposition des sites web par le navigateur. C’est un simple dictionnaire clé-valeur de chaines de caractères.
Lors de la réalisation de la WebApp, il a été constaté que le LocalStorage ne pouvait stocker guère plus de 5 Mo (constaté sous Chrome). Nous avons donc cherché à optimiser au maximum l’utilisation du LocalStorage pour éviter des dépassements. Un dépassement de l’espace de stockage du LocalStorage empêchait de charger les données dans leur intégralité et provoquait un dysfonctionnement de la WebApp.
Afin de minimiser le plus possible la taille des données gérée par l’appcache, seule la structure HTML des pages de la WebApp est stockée. Les données au format JSON sont chargées dans le LocalStorage puis affichées dans les pages HTML par traitement javascript.
Grâce à ce processus, un utilisateur voit le résultat suivant :
- Chargement initial des programmes et catalogue lors de la première visite sur la WebApp.
- Mise à jour des programes et du catalogue à chaque première visite quotidienne.
Le mécanisme de mise à jour est nécessaire afin d’éviter de recharger les catalogue et programme en entier à chaque fois que l’utilisateur lance l’application. L’opération de chargement initial est longue (de l’ordre d’une minute et plus) étant donnée la taille des données à charger (de l’ordre de 4 Mo, catalogue et programme compris).
Contextualisation de la navigation parmi les évènements – SessionStorage
La page d’affichage d’un évènement présente des boutons “Précédent” et “Suivant”. Les évènements précédent et suivant n’étant pas les mêmes selon que l’utilisateur se trouve dans un contexte par date ou par thème, il est nécessaire de stocker en session le mode de navigation de l’utilisateur parmi les événements pour pouvoir définir correctement le comportement des boutons “Événement Précédent” et “Événement Suivant”.
Pour cela, on stocke dans le SessionStorage les clés « programme.navigation.mode » (valeurs possibles : ‘theme’ ou ‘date’) et ‘programme.navigation.param‘ (valeur : <theme_id> lorsque le mode de navigation est 'theme', undefined sinon)
Synchronisation de “Mes événements”
La synchronisation des évènements favoris d’un utilisateur suit le processus suivant :
- Récupération sur le smartphone des ajouts / suppressions d’évènements réalisés sur le site desktop
- Envoi vers le site desktop des ajouts / suppressions d’évènements réalisés sur le smartphone
- Gestion des conflits d’ajout / suppression.
On utilise LocalStorage pour stocker :
- la liste des événements de l’utilisateur en local.
Cette liste est modifiée lors des ajouts / enlèvements d’événements favoris (clic sur le bouton “Favoris” dans les détails d’un événement. - une copie de la liste des événements de l’utilisateur présente sur le site desktop.
Cette liste va permettre par comparaison avec la version locale de réaliser la synchronisation
“Les évènements de l’utilisateur” stockés dans ces champs sont en réalité des actions utilisateur.
{"datetime":"2013-05-15T08:36:55.000Z","evenement":60,"status":"ADD"}
Cela permet de connaitre quelles sont les actions les plus récentes et d’ainsi gérer correctement les conflits.
Cet article Une webapp pour Vinexpo est apparu en premier sur WSB agency.
