HTML5 avancés et les API JavaScriptBY MOHAMED ELLOUZE

1

Web WorkersJAVASCRIPT API

2

3

Présentation et enjeux

JavaScript dispose historiquement d’une limitation importante : Il est mono-thread, touteson exécution s’effectue dans un seul et même thread. C’est plutôt ballot à l’heure desprocesseurs multi-cœurs comme les Core i5/i7 proposant jusqu’à 8 cœurs logiques

Exposé du problème

Cette limitation historique de JavaScript implique qu’un traitement important va bloquer lafenêtre principale d’affichage (la page web en cours d’utilisation). Conséquence, la page sefige et l’utilisateur ne peut plus interagir avec l’application. Ce dernier finit naturellement partuer l’onglet ou l’instance du navigateur en cours.

Solution : Les Web Workers

Avec HTML5, de nombreuses nouvelles fonctionnalités ont été ajoutées en JavaScript. Parmicelles-ci se trouvent les web-workers ou la possibilité d'exécuter du code en parallèle enJavaScript.

Utilisation des Web Workers

Invoquer un worker

Les Web Workers permettent d'exécuter du code en tâche de fond. Cela va donc vouspermettre d’exécuter des traitements sur des threads séparés vivant donc à côté de lapage principale et n’ayant pas d’impact sur ses performances d’affichage

Utilisation des Web Workers

Comme les Web Workers vont être exécutés surdes threads séparés, il faut que leur code soithébergé dans un fichier séparé de la pageprincipale. Ensuite, pour les appeler, oninstancie un objet de type Worker.

Puis, on démarre le worker en lui envoyant unpremier message :

4

5

Mon premier Web Worker

Une fois créé, un worker peut envoyer des messages à son processus parent en envoyantdes messages qui seront réceptionnés par un gestionnaire d'événement spécifié à lacréation. Ces messages doivent être formés par des chaines de caractères classiques ouvia des objets JSON.

Si vous souhaitez pouvoir recevoir desinformations du worker, instancier l'attributonmessage avec une fonction de gestiond'événement.

DEMO

Browsers supports

6

Web SocketsJAVASCRIPT API

7

8

Les limitations du protocol HTTP

Exposé du problème

HTTP est un protocole standard utilisé pour le Web qui fonctionne sur le modèlerequête/réponse. Il répond à de nombreux besoins mais il y a une lacune majeure dans leprotocole. En effet, ce dernier a été initialement conçu pour fournir des documents et desfichiers simples pour les navigateurs Web, mais pas pour une interaction complexe en tempsréel.

o half duplex : un client tel un navigateur Web, doit ouvrir une connexion sur un serveur,faire une demande, attendre une réponse, et fermer la connexion. La transmission dedonnées ne peut se faire que dans une direction en même temps.

o verbeux : chaque requête et réponse HTTP doit avoir un en-tête (header) contenantplus au moins d'informations qui fait parti des données échangées, ce qui augmente letrafic sur le réseau.

o Il n'est pas possible d'utiliser un mode push de la part du serveur (le serveur envoie àson initiative des données au client).

9

Sans WebSockets

Les développeurs n’ont pas attendu les WebSockets pour contourner cette limitation.Plusieurs techniques ont été élaborées afin de permettre le push de données depuis leserveur toujours en utilisant HTTP :

Polling : le client effectue périodiquement desrequêtes synchrones au serveur pour obtenir desdonnées ou pas selon qu'il y en ait de disponible.

Cette technique est simple mais peu efficace carelle nécessite beaucoup de connexions selon lafréquence utilisée par le client pour obtenirpotentiellement peu de données.

10

Sans WebSockets

long polling : le client ouvre une connexion etenvoie une requête HTTP au serveur qui ne renvoiela réponse que si un événement force l'envoi dedonnées au client ou après un certain timeout. Lenombre de requêtes/réponses peut ainsi être réduitsauf si le nombre d'événements est très important

Streaming : le client envoie une requête auserveur qui maintient le flux de la réponseouvert en y envoyant des données au besoin.Cette technique reposant sur HTTP, elle posegénéralement des soucis avec certains élémentsréseaux comme les firewalls ou les proxys

11

Pourquoi les WebSockets ?

Différentes techniques sont donc utiliser pour permettre à unserveur d'envoyer à son initiative des données à unnavigateur sans que celui-ci l’ait explicitement demandé.Cependant, il était nécessaire de définir un standard quipermette la communication entre les clients et le serveur demanière bi-directionnelle.

En 2011, le W3C et l’IETF (Internet Engineering Task Force) ont défini leprotocole Websocket. Ce dernier permet à un client Web de créer une connexion, lamaintenir ouverte tant qu’il veut, et à la fois envoyer et recevoir des données en continu

Cette spécification permet donc d’ouvrir une connexion bi-directionnelle permanente

entre un client et un serveur, afin de résoudre certains problèmes posés par le caractèreunidirectionnel et déconnecté du protocole HTTP.

12

Qu’est ce que les WebSockets ?

Définitition wikipédia

Le protocole WebSocket est un standard du web désignant un protocole réseau de la coucheapplication visant à développer un canal de communication full-duplex (bidirectionnel) surun socket TCP pour les navigateurs et les serveurs web.

Elles requièrent moins de bande passante car elles nerequièrent pas d'en-tête dans chaque message

La latence est réduite.

Elles permettent de mettre en place des solutions quasitemps réel pour recevoir des données

Les WebSockets sont plus efficaces et sont plus performantes que les autres solutions :

13

La connexion à une WebSocket

Lorsque le serveur répond, la connexion est établie et le client et le serveur peuventenvoyer et recevoir des messages.

Une connexion WebSocket est initialisée en utilisantle protocole HTTP : chaque connexion à uneWebSocket débute par une requête HTTP qui utilisel'option upgrade dans son en-tête. Cette optionpermet de préciser que le client souhaite que laconnexion utilise un autre protocole, en l'occurrencele protocole WebSocket.

Cette requête HTTP s'appelle handshake dans lecas de l'utilisation d'une WebSocket.

14

La connexion à une WebSocket

GET /demo HTTP/1.1

Host: example.com

Connection: Upgrade

Sec-WebSocket-Key2: 12998 5 Y3 1 .P00

Sec-WebSocket-Protocol: sample

Upgrade: WebSocket

Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5

Origin: http://example.com

L'étape de connexion (Opening Handshake) requiert un unique échange HTTP(requête/réponse) entre le client qui initie la connexion et le serveur. La requête HTTP utilisel'option Upgrade qui permet de demander le changement du protocole utilisé pour leséchanges.

La réponse HTTP contient le code 101 pour indiquer que le serveur a changé de protocole

pour utiliser le protocole WebSocket.

HTTP/1.1 101 WebSocket Protocol Handshake

Upgrade: WebSocket

Connection: Upgrade

Sec-WebSocket-Origin: http://example.com

Sec-WebSocket-Location: ws://example.com/demo

Sec-WebSocket-Protocol: sample

15

2- data transfer

La fermeture de la connexion peut être à l'initiative du endpoint client ou serveur pourpermettre de passer la WebSocket à l'état deconnected.

Si la connexion réussie, l'état de la WebSocket passe à l'état connected. Des donnéespeuvent alors être échangées entre les deux endpoints de manière bi-directionnelle enmode full-duplex.

NB: Le protocole HTTP n'est utilisé que pour établir la connexion d'une WebSocket : Une foisque le serveur a validé l'utilisation du protocole WebSocket, il n'est plus possible d'utiliser leprotocole HTTP et tous les échanges suivants doivent utiliser le protocole WebSocket.

La connexion à une WebSocket

16

Utilisation de l’API WebSocket

En JavaScript, il faut d'abord instancier un objet Websocket qui prend pour paramètre uneURL vers un serveur websocket contenant le protocole ws:// pour une connexion simple(ou wss:// pour une connexion sécurisée.)

Côté Client

L'objet envoie des données au serveur sous forme de chaîneavec la méthode send.

On pourra également envoyer les données d’unemanière beaucoup plus structurées, il suffit de lesconvertir en chaîne de caractères pour la transmission.

17

Utilisation de l’API WebSocket

L’interface WebSocket comporte les attributs fonctionnels permettant de gérer lesévènements associés:

Les messages envoyés par le serveur sont notifiés par l’événement onmessage contenantle message du serveur sous forme de chaîne.

o onopen : ouverture d’une WebSocket

o onmessage : réception d’un message

o onerror : erreur(s) survenue(s)

o onclose : fermeture de WebSocket

La construction de l’objet WebSocket provoquera une tentative de connexion au serveur. Sila connexion est établie l’évènement open sera levé. Si la connexion échouealors error sera levé, ainsi que close.

18

Utilisation de l’API WebSocket

Il est possible de consulter l’état de laconnexion à n’importe quel moment grâce àla propriété readyState.

Valeurs de readyState Value Signification

WebSocket.CONNECTING 0 La tentative de connexion est en cours.

WebSocket.OPEN 1 La connexion est établie.

WebSocket.CLOSING 2 La tentative de déconnexion est en cours.

WebSocket.CLOSED 3 Le canal est fermé.

19

Utilisation de l’API WebSocket

DEMO

20

Browsers supports

http://caniuse.com/#feat=websockets

HTML5 et la GéolocalisationJAVASCRIPT API

21

22

Une des nouvelles fonctionnalités intéressantes que HTML 5 fournit est la capacité de géo-localiser l’utilisateur peu importe la plateforme sur laquelle l’application s’exécute.

Présentation et enjeux

Dans l'espace, trois coordonnées sont nécessaires :

Latitude

Longitude

Altitude (facultative selon les besoins, la plupart des humains se déplaçant sur un mêmeplan en deux dimensions à la surface de notre planète)

De quelles informations a-t-on besoin pour se géolocaliser ?

Présentation

23

Quels moyens pour se géolocaliser ?

Différentes techniques sont mises à contribution avec plus ou moins de précision pour obtenir lescoordonnées de géolocalisation. Elles peuvent être combinées pour affiner le résultat au cours dutemps

Par Satellite GPS (mobile)

Par triangulation GSM/3G (mobiles)

Par triangulation WIFI (mobiles etbases de données adresses MAC)

Par adresse IP

24

Obtenir la localisation d’un utilisateur

Disponibilité de l’API ?

L'API repose sur l'objet geolocation membre de navigator.

Pour des raisons évidentes de confidentialité,le navigateur ne communiquera pas voscoordonnées géographiques sans votreconsentement explicite. Un appel aux deuxfonctions précitées provoquera nécessairementun message d'avertissement pour l'utilisateur.

Confidentialité

25

Obtenir la localisation de l’utilisateur

Obtenir la localisation d’un utilisateur

HTML 5 fournit deux fonctionnalités de géo-localisation : soit obtenir la position actuelleou effectuer un suivi de la position dans le cas où la personne se déplace (watch).

getCurrentPosition : permettant un ciblage ponctuel

watchPosition : pour un suivi continu

26

La méthode getCurrentPosition() peutprendre un second paramètre le callbackd’erreur. Il sera appelée dans les cas où:

L’utilisateur refuse l’autorisationd’accès à sa position

L’emplacement de l’utilisateur n’aitpas pu être déterminé

Le service de géolocalisation neréponde pas assez vite

Gestion des erreurs de localisation

Les retours d'erreurs potentiels sont très importants et méritent d'être pris en compte danstoute application web. Ils permettent de savoir si l'utilisateur a refusé d'être géolocalisé, ousi la position n'a pu être obtenue.

27

Enfin, le 3ème paramètre de getCurrentPosition() sert à indiquer certaines optionsparticulières, écrites de la forme suivante : {nom:valeur, nom:valeur, …}.

On peut ainsi spécifier :

L’utilisation du GPS pour obtenir des coordonnées beaucoup plus précises

Un Timeout si l’on a besoin d’une réponse avant un certain délai

La durée de vie maximale d’une coordonnée envoyée par l’utilisateur

Options de localisation

28

Dans de nombreux cas, on aimerait mettre à jour la position de l’utilisateur si celui-ci se déplace.Avec HTML5, il suffit simplement de remplacer la méthode getCurrentPosition() parwatchPosition()

Comme on veut permettre à l’utilisateur d’arrêter le suivi de ses déplacements, on ajoute unsimple lien effectuant un appel à clearWatch().

Suivre les déplacements

29

Google Maps API

L'API Google Maps V3 est très aisée à exploiter en combinaison à la géolocalisation. Ellecomprend de nombreuses fonctionnalités pour afficher une carte géographique, positionnée etéquipée de marqueurs.

30

Demo

HTML5 et la Géolocalisation

Drag&DropJAVASCRIPT API

31

Grâce au HTML5, il est maintenant possible de permettre un déplacement de texte, defichier ou d'autres éléments depuis n'importe quelle application jusqu'à votre navigateur.

Rendre un élément déplaçable

32

Présentation

En temps normal, un élément d'une page Web ne peut pas être déplacé. Vous ne pourrezfaire qu'une sélection du contenu.

Afin de rendre un élément

déplaçable, il vous suffit d'utiliser sonattribut draggable et de le mettre àtrue.

NB : L’attribut draggable peut avoir une des trois valeurs suivantes : (true, false, auto). Dansle cas ou c’est auto (qui est la valeur par défaut), c’est le navigateur qui décidera si l’élémentest déplaçable.

Drag Events

33

Les évènements de l’objet Drag

L’API Drag&Drop fournit un ensemble d’événements permettant de mieux gérer certainsdetails.

dragstart : se déclenche lorsque l’élément ciblécommence à être déplacé

drag : invoqué tout au long du déplacement

dragend : permet de signaler à l’objet déplacéque son déplacement est terminé

Démo

34

Les évènements de l’objet Drop

Drop Events

dragenter : se déclenche lorsqu’un objet entre dans une zone drag n’drop

dragover : se déclenche lorsqu’un objet survole une zone drag n’drop

dragleave : se déclenche lorsqu’un objet quitte la zone drag n’drop

drop: se déclenche lorsqu’un objet est laché dans une zone drag n’drop

Par défaut, le comportement des évenements dragenter et dragover veille à ce qu’onne puisse pas déposer des objets.

Il faudra donc annuler le comportement par défaut de ses deux évenements.

35

Drag&Drop

Démo

36

Drag&Drop

Initialiser un déplacement avec l'objet dataTransfer

L’objet dataTransfer permet de définir et de récupérer les informations relatives au coursd'une opération de glisser-déposer

Défini l'objet à transférer grâce à la méthode setData()

Récupérer l'objet à transférer grâce à la méthode getData()

L'objet dataTransfer a deux rôles importants lors de la fin d'un drag & drop :

Drag&Drop

effectAllowed : Indique les effets qui sont autorisés pour ce déplacer. Il peut êtrespécifié dans l'évènement dragstart pour définir les effets souhaités pour la source, etdans les événements dragenter et dragover pour définir les effets souhaités pour la cible

copy: Une copie de l'élément source peut être faite à son nouvel emplacement. move: Un élément peut être déplacé vers un nouvel emplacement. link: Un lien peut être établi vers la source depuis le nouvel emplacement. copyLink: Une opération copy ou link est autorisée. copyMove: Une opération copy ou move est autorisée. linkMove: Une opération link ou move est autorisée. all: Toutes les opérations sont autorisées. none: l'élément ne peut être déposé. uninitialized: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.

Valeurs possibles :

37

setDragImage() est extrêmement utile pour quisouhaite personnaliser l'affichage de sa page Web !Elle permet de définir une image qui se placera sousle curseur pendant le déplacement de l'élémentconcerné.

Drag&Drop

38

Web StorageJAVASCRIPT API

39

Cette fonctionnalité est similaire au cookies de session HTTP mais permet de sauvegarderles données voulues dans une "base de données" coté client (c'est a dire au niveau dunavigateur).

La fonctionnalité Storage est une nouveauté HTML5, Ce procédé va permettre desimplifier le processus de sauvegarde et de persistance des données.

On peut enregistrer des données même quand la connexion internet est coupé(le storage étant dans le navigateur).

On peut gérer des données par session (si vous avez 2 fenêtres sur le même site, une actionsur le sessionStorage sera répercuté sur l'autre).

On peut gérer des données par page (localStorage)

Intérêt du storage

NB : Le storage a pour but de répondre à une des limites des cookies, c'est a dire leur taille (4 kopour les cookies et jusqu'à 10Mo pour le storage!).

40

Web Storage

41

L'interface sessionStorge mémorise les données surla durée d'une session de navigation, et sa portée estlimitée à la fenêtre ou l'onglet actif. Lors de sa fermeture,les données sont effacées.

L'interface localStorage mémorise les données sans limite de durée de vie. Contrairementà sessionStorage, elles ne sont pas effacées lors de la fermeture d'un onglet ou dunavigateur. La portée de localStorage est de facto plus large : il est possible de l'exploiter àtravers plusieurs onglets ouverts pour le même domaine ou plusieurs fenêtres ; à partir dumoment où il s'agit bien sûr du même navigateur.

HTML

LocalStorage sessionStorage

Web Storage met à disposition deux interfaces nommées sessionStorage etlocalStorage dont la seule différence concerne la persistance des données.

Web Storage

42

Demo

Web Storage

Offline Web ApplicationJAVASCRIPT API

43

Application Web Offline HTML5

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”.

Qu’est ce qu’une application offline ?

EXEMPLE :

Vous rédigez un mail sur votre iPhone ou votre Android alors que vous étiez en Métro ou en

train sans la précieuse connexion à internet. Que se passe t-il ?

Rien !!! L’application (Gmail, Safari, …) continue à fonctionner en mode « offline ». L’émail

envoyé sera en attente localement puis réellement envoyé dès que vous récupérer votre

connexion

On est donc face à des applications hybrides qui fonctionnent à la fois en mode offline et online

DÉFINITION

44

I- Web SQL DataBase APIJAVASCRIPT API

45

46

L'API Web SQL permet de créer une base de donnée, ajouter une table, insérer des données, … Avoir une base de données utilisable via le navigateur. Elle peut être accessible en mode

"offline".

Web SQL DataBase

Ouvrir une connection

Principe

Pour ouvrir une connection vers la base dedonnées, il suffit d’exécuter le script suivant:

La fonction callBack est optionnel, on pourrapar exemple l’utiliser pour changer de version

47

Une fois la connection établie, on utilisera le mot clé transaction pour pouvoir exécuter desrequêtes SQL (création, insertion, update, …) sur notre base. Cela se fait via transaction() oureadTransaction().

Transaction

readTransaction() : pour un mode en lecture uniquement.

transaction() : pour un mode en lecture/ecriture.

Ces 2 methodes prennent les mêmes arguments

48

executeSql()

Select

Le code ci-dessus présente 2 propriétés de l'objet rows:

item(index) : retourne l’objet de résultat de la requête à l'index

length : permet de connaître le nombre de résultat de la requête.

executeSql() permet d'exécuterune requête SQL sur notre base dedonnée.

49

executeSql()

Create

Insert

rowsAffected : retourne le nombre de résultats affecté par la requête.

Dans le cas d’un INSERT, on pourra utiliser les deux propriétés suivantes :

insertId : retourne le dernier ID inséré dans la table lors d'un INSERT.

Pour ajouter une table à notre BDD, on exécute le script ci-dessous:

50

executeSql()

Delete

Pour visualiser la base de données sous chrome, il suffit de se rendre dans les "outils de développement" dans l'onglet « Ressurces ».

Visualiser sous Chrome votre Base de donnée

Demo

51

Demo

52

Browsers Supports

2- Indexed DataBase APIJAVASCRIPT API

53

54

Indexed DataBase

IndexedDB est un moyen pour stocker des données dans le navigateur d'un utilisateur, demanière persistante. Ses fonctions de recherche avancées permettent de créer des applicationsqui fonctionnent tant connecté que déconnecté.

Vue d’ensemble d’IndexedDB

IndexedDB est une alternative à l'API WebSQL Database, qui a été dépréciée par le W3C le 18novembre 2010.

WebSQL Database est un système d'accès à une base de données relationnelle

IndexedDB est un système à table indexée.

55

Les concepts de Bases d’IndexedDB

Les bases d'IndexedDB stockent des pairesclé-valeur. Les valeurs peuvent êtres des objetsstructurés, et les clés peuvent être des propriétésde ces objets. Vous pouvez créer des indexes àpartir de n'importe quelle propriété des objets, pourfaciliter la recherche et l'énumération ordonnée.

Les concepts basiques d’IndexedDB

IndexedDB est orienté objet. IndexedDB n'est pas une base de données relationnelle, avecdes tables, des colonnes et des lignes.

Avec IndexedDB on crée un espace de stockage d'objets pour un type de données particulier, et

on persiste tout simplement des objets JavaScript dans cet espace.

56

Les concepts de Bases d’IndexedDB

IndexedDB ne s'utilise pas avec le langageSQL. On utilise des recherches sur un index pourobtenir un curseur, que l'on utilise ensuite pourparcourir l'ensemble des résultats.

IndexedDB est construit autour d'un modèlede base de données transactionnelle. Tout ceque vous faites avec IndexedDB se passe dans lecontexte d'une transaction.

L'API IndexedDB est majoritairementasynchrone. L'API ne retourne aucune valeurs,vous auriez donc besoin d’une fonction de callbackpour récupérer les données.

57

Les concepts de Bases d’IndexedDB

IndexedDB respecte la politique de sécurité utilisant l'origne (same-origin policy):vous ne pouvez pas accéder aux données de domaines différents.

L’API IndexedDB est en cours d’évolution, il faudra donc utiliser les préfixes propre à chaquenavigateur au moment de l’implémentation.

58

IndexedDB – Creation d’une Base

Avant que nous puissions insérer des données auniveau de notre base de données , nous devonsl’ouvrir en utilisant la méthode open():

onsuccess handler

L’évenement onsuccess sera déclenché quandtout s’est bien déroulé

onerror handler

L’évenement onerror sera déclenché quand uneerreur est générée.

NB: Si jamais on aura besoin de mettre à jour, de modifier ou de supprimer notre base, on aurabesoin dans ce cas d’implémenter l’événement Onupgradeneeded

59

Ajouter manuellement des données

Voici un exemple d’utilisation de l’événementonupgradeneeded correspondant à lacréation d’un objet store « techdays » quisera ajouter à notre BDD

Une fois notre objet store crée, on pourra luiajouter manuellement des données grâce àla méthode add().

60

Browsers supports

3- Offline Application HTTP cacheJAVASCRIPT API

61

Application Web Offline HTML5

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 sans connexion internet

D’améliorer la vitesse de chargement des pages puisque les fichiers sont présent en local

De réduire la charge du serveur, puisqu’en effet, il n’enverra que les fichiers qui aurontchangé depuis le dernier passage de l’utilisateur

62

Que le navigateur soit en ligne ou hors-ligne, il n’y a plus aucun impact sur l’affichage de la

page qui vient directement du cache.

NB : Le cache d’une application est limité à 5Mo

Application Web Offline HTML5

COMPATIBILITÉ :

Les applications offline fonctionnent déjà avec tousles navigateurs sauf Internet Explorer (même IE9ne supportera pas cette fonctionnalité non plus).

Les applications offline sont principalementdestinées aux smartphones et tablettes tactiles etles navigateurs Android et iPhone supportent déjàcette fonctionnalité.

Aucun problème donc du côté de la compatibilité.

63

Application Web Offline HTML5

PRINCIPE DE FONCTIONNEMENT

L’application cache repose principalement sur l’utilisation d’un fichier “manifest” à ajouteraux pages HTML de votre site. Celui-ci liste les URL des ressources à mettre dans le cache.Quand le navigateur charge la page pour la première fois, il va télécharger toutes les URL dumanifest et les stocke dans le cache. Tous les chargements suivants se feront directement àpartir du cache sans passer par le serveur.

Le navigateur va vérifier la version de son fichier manifest auprès du serveur. En cas de miseà jour, le navigateur va télécharger l’intégralité des ressources dans un nouveau cache, quisera utilisé pour tous les chargements suivants

64

Application Web Offline HTML5

LE FICHIER CACHE MANIFEST

Le fichier cache manifest est un simplefichier texte encodé en UTF-8 qui référencietous les fichiers de votre application quidoivent (ou ne doivent pas) être mis encache.

Le fichier cache manifest peut avoir n’importe quel nom ouextension :

Il doit obligatoirement commencer par la ligne CACHEMANIFEST.

On peut également ajouter des lignes de commentaires.Chaque ligne doit commencer par #.

manifest.appcache

65

Application Web Offline HTML5

Le fichier manifest peut se décomposer en trois sections :

CACHE : C’est la section par défaut, elle contient les URLs que le navigateur doit

impérativement mettre en cache.

NETWORK : Liste les URLs qui doivent toujours être consultées sur le serveur. Ce

sera par exemple le cas des ressources AJAX et des ressources externes

(publicité, …).

FALLBACK : Cette section permet d’associer des préfixes d’URL à des ressources

alternatives utilisées en cas d’indisponibilité.

66

Application Web Offline HTML5

Le navigateur doit donc conserver en

cache les ressources statiques du site

(css, js, images, …) ainsi que index.html

La page online.html sera toujours

consultée sur le serveur.

En cas d’indisponibilité de la page

online.html ou n’importe quel autres

pages HTML, le navigateur affichera la

page offline.html à la place.

67

Application Web Offline HTML5

Par défaut, seules les ressources listées dans le cache explicite sont disponibles.

Par exemple : si vous oubliez de lister une image, celle-ci ne sera pas affichée dans la page.

Il faut donc lister toutes les ressources, ou bien ajouter le joker ‘*’ dans la section NETWORK

afin de permettre le téléchargement des ressources manquantes.

REMARQUE :

Les ressources listées dans la section CACHE sont toujours

prioritaires sur les autres. De ce fait, le joker n’a aucune

incidence sur la mise en cache, il permet seulement

d’accéder à d’autres ressources, y compris sur des domaines

différents.

68

Application Web Offline HTML5

Pour activer le cache, il va falloir declarer le MIME type du fichier manifest. Ceci se fait via

l’intermédiaire du fichier de configuration.

TYPE MIME DU FICHIER CACHE MANIFEST

Ainsi tous les fichiers qui ont

l’extension « .appcache » ont pour

type text/cache-manifest

69

Application Web Offline HTML5

L’Application Cache sera mis à jour si :

MISE À JOUR DU CACHE :

Le cache est mis à jour avec du code Javascript.

L’utilisateur vide son cache manuellement.

Le fichier manifest change.

Tiens bizarre, vous venez de modifier votre fichier index.html mais lorsque vous rechargez la

page, vous ne voyez pas vos modifications ! C’est normal si vous avez mis en cache votre fichier

index.html ! C’est bien là le principe du cache. Du coup si vous voulez que votre navigateur

mette à jour son cache avec votre nouveau fichier, vous devez modifier le fichier cache

manifest.

70

Application Web Offline HTML5

Le commentaire version n’est pas là par hasard : le cache

n’est mis à jour que quand le manifest change, avec une

correspondance d’octet à octet.

Si jamais vous changer le contenu de l’image logo.png

tout en gardant le même nom au niveau du header, il va

falloir signaler au navigateur qu’il doit rafraichir le cache

en modifiant quelque chose au niveau du header. D’où

l’utilité d’avoir un numéro de version au niveau du fichier

manifest.

NB : 1- Si le téléchargement de l’un des fichiers échoue, alors l’ensemble du téléchargement échoue.

2- N’utilisez pas le manifest lui-même dans le fichier de cache : il vous serait alors quasiment

impossible d’informer le navigateur lors de la mise à jour du manifest.

71

Application Web Offline HTML5

Le cache ne doit jamais contenir de données confidentielles.

Les pages de login et tous services de sécurité doivent être exclus du cache

N’utilisez pas le manifest lui-même dans le fichier de cache manifest.

Versionnez le manifest avec un commentaire

Minimisez le nombre de pages référençant le manifest

Stockez uniquement les ressources statiques du site.

Les pages implicites qui déclarent le manifest sans être listées dans ce dernier y sont

ajoutées et seront téléchargées elles aussi lors de la mise à jour du cache.

Pour optimiser l’utilisation du cache, il faut le considérer comme la vue statique de

l’application qui évoluera au gré des changements de l’interface et non au gré du

contenu.

A SAVOIR :

72

Retour d’expérience : MS70-480CERTIFICATION MICROSOFT

73

74

Description Certif MS70-480

Microsoft Certification MS70-480

Description

75

Bien préparer votre certification

Microsoft Virtual Academy

Quels sites pour bien préprer sa certification

76

Bien préparer votre certification

Training Guide

Livres

Exam Ref 70-480

77

Bien préparer votre certification

Tests d’entraînemets

axiommanifold.comExam Collection

78

Télécharger vos Certifications

Accéder à ses certifications

Vous pouvez télécharger voscertifications ainsi que vos relevésde notes sur le site de Microsoft.

https://www.microsoft.com/learning/fr-fr/dashboard.aspx

79

La Suite … ?

MCSD : Applications Web

Visez l’excellence en préparant la Certification MCSD : Applications Web

80

NB: Merci de joindre votre CV en copie du mail.

Pour ceux qui souhaitent récupérer les slides, vous pouvez m’envoyer un mail àl’adresse suivante :

med_ellouze@yahoo.fr

81

Prochain TechDays

14/04/2015 (A confirmer)