From 4d3d85b63153094409ad2a1abcc13e0581b64e27 Mon Sep 17 00:00:00 2001 From: Laurent Lyaudet Date: Thu, 3 Jun 2021 17:14:04 +0200 Subject: l10n-fr 7 typos in service_worker_api/using_service_workers/index.html (#1100) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 3 typos appleler -> appeler specification -> spécification doivent être passé -> doivent être passées * 1 typo nécessitées -> nécessaires J'ai eu un doute alors j'ai vérifié là : https://www.cnrtl.fr/definition/n%C3%A9cessit%C3%A9 que nécessité n'est utilisé que comme substantif et pas comme adjectif, même dans des formes anciennes. * 1 typo sont mise -> sont mises * 1 typo rend trivial la -> rend triviale la * 1 typo Elle ne sera activé*e* --- .../service_worker_api/using_service_workers/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files/fr/web/api') diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.html b/files/fr/web/api/service_worker_api/using_service_workers/index.html index dd37916c17..8225067a3b 100644 --- a/files/fr/web/api/service_worker_api/using_service_workers/index.html +++ b/files/fr/web/api/service_worker_api/using_service_workers/index.html @@ -114,7 +114,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers }); } -

On retourne une nouvelle promesse en utilisant le constructeur Promise(), qui prend en argument une fonction de rappel avec les paramètres resolve et reject. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appleler resolve en cas de succès, ou reject en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.

+

On retourne une nouvelle promesse en utilisant le constructeur Promise(), qui prend en argument une fonction de rappel avec les paramètres resolve et reject. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appeler resolve en cas de succès, ou reject en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.

Lorsqu'on appelle la fonction imgLoad(), on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :

@@ -144,7 +144,7 @@ imgLoad('myLittleVader.jpg').then(function(response) {

Démo de service workers

-

Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée sw-test, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la specification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !

+

Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée sw-test, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !



@@ -152,7 +152,7 @@ imgLoad('myLittleVader.jpg').then(function(response) { Vous pouvez consulter le code source sur GitHub, et voir l'exemple en direct. Le bout de code qui sera appelé est la promesse (voir app.js lines 17-42), qui est une version modifiée du code présenté ci-dessus, dans la démo du test de promesses. Il en diffère de la façon suivante :

    -
  1. Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans image-list.js). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passé avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle for(), cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)
    2. +
  2. Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans image-list.js). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passées avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle for(), cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)
  3. La promesse est résolue en réalité avec un tableau, puisqu'on veut rendre le blob de l'image chargée disponible à la fonction de résolution plus tard dans le code, mais aussi le nom de l'image, les crédits et le texte alternatif (voir app.js lines 26-29). Les promesses se résolvent seulement avec un seul argument, aussi si l'on souhaite la résoudre avec des valeurs multiples, on a besoin d'utiliser un tableau ou un objet.
  4. Pour accéder aux valeurs de la promesse résolue, on accède alors à cette fonction comme on peut s'y attendre (voir app.js lines 55-59.) Cela peut sembler un peu étrange au premier abord, mais c'est la manière dont les promesses fonctionnent.
@@ -209,7 +209,7 @@ imgLoad('myLittleVader.jpg').then(function(response) {

Après l'enregistrement du service worker, le navigateur tente d'installer puis d'activer le service worker sur la page ou le site.

- L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessitées pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.

+ L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.

Remarque : L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la démo Topeka de Google, ou peut-être stocker les ressources dans IndexedDB.

@@ -253,7 +253,7 @@ imgLoad('myLittleVader.jpg').then(function(response) {

Réponses personnalisées aux requêtes

-

Une fois que les ressources du site sont mise en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement fetch permet de gérer cela facilement.

+

Une fois que les ressources du site sont mises en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement fetch permet de gérer cela facilement.

Un événement fetch se déclenche à chaque fois qu'une ressource contrôlée par un service worker est retournée, ce qui inclut les documents à l'intérieur du contour spécifié, et toute ressource référencée dans ces documents (par exemple si index.html effectue une requête vers un autre domaine pour l'insertion d'une image, cela se fait encore au travers de son service worker.)

@@ -314,7 +314,7 @@ event.request.body

On vient de voir que caches.match(event.request) est important lorsqu'il y a correspondance avec le cache du service worker, mais qu'en est-il des cas où rien ne correspond ? Si aucune sorte de gestionnaire d'erreur n'est fourni, la promesse est rejetée et une erreur réseau est retournée lorsqu'aucune correspondance n'est trouvée.

-

Heureusement, la structure des service workers qui repose sur les promesses rend trivial la gestion des alternatives à une situation de succès. On pourrait faire ceci :

+

Heureusement, la structure des service workers qui repose sur les promesses rend triviale la gestion des alternatives à une situation de succès. On pourrait faire ceci :

this.addEventListener('fetch', function(event) {
   event.respondWith(
@@ -385,7 +385,7 @@ event.request.body

Mettre à jour le service worker

-

Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activé que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.

+

Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activée que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.

On souhaite mettre à jour l'écouteur d'événement install dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :

-- cgit v1.2.3-54-g00ecf