From 4aff5bd4feec98acbe5a0ea12474aefd3916a606 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Mon, 15 Nov 2021 22:39:10 +0100 Subject: Fix md conversion error" (#3103) --- files/fr/web/progressive_web_apps/loading/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'files/fr/web/progressive_web_apps/loading') diff --git a/files/fr/web/progressive_web_apps/loading/index.html b/files/fr/web/progressive_web_apps/loading/index.html index 7dff2e546d..e1394252c4 100644 --- a/files/fr/web/progressive_web_apps/loading/index.html +++ b/files/fr/web/progressive_web_apps/loading/index.html @@ -8,7 +8,7 @@ original_slug: Web/Progressive_web_apps/Chargement ---
{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}
-

Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple js13kPWA une Progressive Web App: Service Workers, Manifestes Web, Notifications et Push. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.

+

Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple js13kPWA une Progressive Web App: Service Workers, Manifestes Web, Notifications et Push. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.

Première visualisation signifiante

@@ -78,7 +78,7 @@ const loadImages = (image) => {

Pour rendre le processus visuellement plus attractif, le conteneur est flouté via CSS.

-

Screenshot of placeholder images in the js13kPWA app.

+

Screenshot of placeholder images in the js13kPWA app.

Nous générons les images avec un flou au début si bien qu'une transition vers la version précise peut être réalkisée:

@@ -97,11 +97,11 @@ article img {

Le mécanisme de chargement des images présenté dans la section précédente fonctionne correctement — il charge les imges après que la structure HTML a été générée et applique un joli effet de transition au processus. Le problème est qu'il télécharge toujours toutes les images en une fois, même si l'utilisateur ne verra que les deux ou trois premières au chargement de la page.

-

Ce problème peut être résolu avec la nouvelle API Intersection Observer — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.

+

Ce problème peut être résolu avec la nouvelle API Intersection Observer — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.

Intersection Observer

-

Ceci est une amélioration progressive à l'exemple fonctionnel précédent — Intersection Observer téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.

+

Ceci est une amélioration progressive à l'exemple fonctionnel précédent — Intersection Observer téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.

Voici à quoi le code correspondant ressemble:

@@ -143,7 +143,7 @@ article img {

Dernières réflexions

-

C'est fini pour ces séries de tutoriels — nous avons examiné le code source code de l'exemple d'application js13kPWA et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une Introduction, la structure des PWA, la disponibilité en mode déconnectégrâce aux Service Workers, les PWAs installable et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du Service Worker Cookbook. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'API ntersection Observer.

+

C'est fini pour ces séries de tutoriels — nous avons examiné le code source code de l'exemple d'application js13kPWA et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une Introduction, la structure des PWA, la disponibilité en mode déconnectégrâce aux Service Workers, les PWAs installable et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du Service Worker Cookbook. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'API ntersection Observer.

N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques.

-- cgit v1.2.3-54-g00ecf