Vous allez découvrir une nouvelle série de vidéos dédiées à la création de jeux avec JavaScript, HTML 5 et l’API Canvas.
Mais avant d’entrer de le vif du sujet vous allez voir avec cette première vidéo comment gérer vos fichiers JavaScript pendant la phase de développement.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment éviter les problèmes de cache des fichiers JavaScript pendant votre développement
Bonjour à tous et bienvenu sur Développement Facile.
Ensemble on va attaquer une nouvelle série de cours, c’est-à-dire des cours dédiés à la création de jeux avec JavaScript, avec HTML 5 en utilisant l’API Canvas de JavaScript mais avant vous allez découvrir ce premier cours la gestion de vos fichiers JavaScript pendant la phase de développement, alors j’y viens dans un instant je m’explique.
La gestion du cache
Il s’agit de la gestion du cache, il faut savoir que le cache c’est une des premières erreurs qui prendre des heures et des heures avant vous en rendre compte, vous avez une application, vous modifiez un fichier JavaScript ou un fichier CSS ou une image ou HTML, vous envoyez tout ça sur votre site Internet pour mettre à jour votre application et lorsque vous chargez votre application, votre site Internet vous obtenez toujours l’ancien comportement et vous ne comprenez pas, vous re modifiez les fichiers, vous les remettez en ligne, et vous avez toujours le même comportement c’est comme si votre modification n’existait pas, c’est le cas votre modification n’est pas prise en compte car votre application utilise toujours les anciens fichiers et ça c’est un problème de cache qui va vous arriver, il m’est encore arrivé récemment ce problème de cache, donc du coup j’ai créé une fonctionnalité, une technique pour forcer le navigateur à éviter la mise en cache.
La mise en cache peut venir du cache de votre navigateur c’est-à-dire il met des fichiers JavaScript, CSS, les images dans son cache et donc il ne réinterroge pas le serveur, le cache de votre hébergeur du site Internet, votre hébergeur pour accélérer l’affichage de votre site, le temps de réponse mais les fichiers en cache, et donc du coup il prend pas en compte les nouvelles versions immédiatement, ou alors le cache peut provenir d’utilisation d’un serveur CDN, de plus en plus de monde sur les sites à fort trafic mettent des serveur CDN, qu’ils soient gérés par Amazon, soit par Mac CDN ou autre, et bien évidemment le serveur CDN n’interroge par en permanence votre compte FTP pour mettre à jour ses fichiers, du coup là aussi il y a un problème de cache, donc il y a d’autres raisons également et le plus efficace, pour éviter ce problème de cache c’est de faire croire à votre navigateur, au CDN, à votre hébergeur que le fichier est entièrement nouveau, alors que c’est le même fichier mais vous faites croire que c’est un nouveau fichier donc vous forcez le CDN, le navigateur, toutes ces chaînes ou il y a du cache à recharger les fichiers de vos applications, et là vous n’aurez plus de problème de cache, vos modifications seront bien prises en compte, à chaque fois que vous affichez votre application vous aurez les dernières versions de vos fichiers donc les nouvelles modifications et mises à jour que vous avez effectuées, je vous met en garde, ça c’est vraiment à effectuer dans une phase de développement d’une application ou de debugage parce que le cache c’est très intéressant pour accéler justement l’affichage de votre application, sont temps de réponse, ça vous le metteez en place uniquement pendant la phase de développement ou alors dans des cas spécifiques comme le chargement de fichiers XML, vous voulez vraiment avoir une nouvelle version à chaque fois mise à jour, mais sinon pensez à utiliser les fonctionnalités de cache de vos applications, de vos sites Web, de votre hébergeur du CDN.
Forcer le chargement des fichiers .js
Codes sources pouvant VOUS intéresser :
En phase de développement vous pouvez utiliser ça, c’est une technique très pratique pour gérer le cache des fichiers JavaScript, vous pouvez gérer de la même façon le cache des fichiers CSS, des images en utilisant toujours la même technique, pareil pour le cache des fichiers XML je vous montre tout ça à travers un exemple de code source.
Voici l’exemple pour gérer le cache donc comme je vous l’ai dit, il faut faire croire à votre navigateur qu’il doit recharger un nouveau fichier, donc tous ces fichiers seront dans le cache ils ne sauront pas rechargés une seule fois, par compte celui-là il va être rechargé à chaque fois il ne sera jamais dans le cache, pourquoi ?
Vous écrivez la ligne mais par contre pour ajouter un paramètre développement avec un nombre aléatoire, ce qui va tout simplement forcer le chargement du fichier parce que le navigateur va penser que c’est un nouveau fichier à chaque fois vu qu’il y a un nombre aléatoire, donc vous voyez, c’est facile, scripts avec le SRC et vous rajoutez cette ligne-là, donc vous pouvez utiliser cette méthode bien évidemment, pour link, donc c’est exactement le même principe de fonctionnement, il suffit, je vous montre rapidement comment ça marche, donc vous mettez ça en place, ici copier-coller, et voilà, votre nom il y a juste ici, ou il faut changer ça, supprimer ça, et voilà votre fichier CSS ne sera pas mis en cache parce que lui aussi il sera chargé à chaque fois par le navigateur donc script, vous rajoutez une variable avec un nombre aléatoire /script, c’est exactement la même ligne qui est au final écrite, pareil là vous avez link, les mêmes paramètres, le fichier CSS a charger avec la variable aléatoire qui va forcer le chargement, plus, à la fin l’écriture de votre fichier. Tout simplement c’est aussi simple que ça, et donc la ça va vous permettre d’éviter d’avoir des problèmes de cache avec que ce soit les fichiers CSS, les fichiers JavaScript, vous pouvez utiliser ça pour des images, là il n’y a pas d’images mais si vous avez des images pareil vous pouvez forcer le chargement de vos images donc c’est une technique toute simple mais qui va simplifier la vie pendant votre phase de développement.
Votre plan d’actions !
Maintenant voici votre plan d’action, pendant le développement de votre application pensez à forcer le téléchargement de vos fichiers que ce soit les fichiers JavaScript, CSS, HTML, les fichiers XML, vos images utilisez la technique que je vous ai donnée pour forcer le chargement de ces fichiers et désactiver le cache de ces fichiers CDN de votre hébergeur, de votre navigateur donc vous pouvez télécharger l’exemple de code source sous ce cours vidéo directement si vous avez des problèmes de cache, des questions utilisez la zone commentaires pour poser vos questions l’équipe développement facile vous répondra avec grand plaisir, maintenant je vous invite à regarder la deuxième vidéo, avec le développement JavaScript, la création de jeu vidéo avec l’API Canvas, avec en combinant JavaScript, HTML 5, je vous explique vraiment tout ça dans la deuxième vidéo, cliquez simplement sur le lien, sur l’image le lien lancez la deuxième vidéo et dans la deuxième vidéo vous allez apprendre à créer des stratégies très avancées en développement JavaScript avec l’API Canvas, avec HTML 5, avec CSS 3, combinez tout ça pour créer des applications performantes, très fluides, très rapides, que ce soit des jeux, bien évidemment vous allez apprendre à créer des jeux avec JavaScript, HTML 5, des applications de gestion des sites Internet, donc à travailler en équipe, à créer deux à trois fois plus rapidement grâce à la méthode développement facile, donc je vous donne tous le détail de la méthode développement facile des stratégies avancées de développement dans la deuxième vidéo, vous cliquez simplement sur la bannière, sur le lien juste au-dessus de moi lancer la deuxième vidéo je vous retrouve dès maintenant dans la deuxième vidéo à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Avez vous déjà rencontrer ces problèmes dans votre développement ?
Utilisez la zone commentaire pour venir expliquer les problèmes que vous avez déjà rencontrer dans votre développement.