Fix md conversion error" (#3103)

9 files changed, 71 insertions, 94 deletions

diff --git a/files/fr/web/progressive_web_apps/add_to_home_screen/index.html b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html
index e84ba498a3..3a315c9568 100644
--- a/files/fr/web/progressive_web_apps/add_to_home_screen/index.html
+++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html
@@ -9,7 +9,7 @@ tags:
 translation_of: Web/Progressive_web_apps/Add_to_home_screen
 original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs
 ---
-<p class="summary">Ajouter à l’écran d’accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d’ajouter facilement et rapidement un raccourci à leur écran d’accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d’en tirer parti.</p>
+<p>Ajouter à l’écran d’accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d’ajouter facilement et rapidement un raccourci à leur écran d’accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d’en tirer parti.</p>
 
 <h2 id="Pourquoi_A2HS">Pourquoi A2HS?</h2>
 
@@ -25,38 +25,30 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs
 
 <p>Si vous avez Firefox pour Android, utilisez-le pour accéder à notre démonstration à <code>https://mdn.github.io/pwa-examples/a2hs/</code> . Vous verrez des images de renard, mais plus important encore, vous verrez une icône "accueil" avec une icône plus (+) à l'intérieur: il s'agit de l'icône "Ajouter à l'écran d'accueil" affichée pour tout site doté de A2HS.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15762/add-to-home-screen-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 64px; margin: 0px auto; width: 500px;"></p>
-
-<p> </p>
-
-<p> </p>
+<p><img alt="" src="add-to-home-screen-icon.png"></p>
 
 <p>Appuyez sur cette icône pour afficher une bannière de confirmation. Une pression sur le gros bouton + <em>AJOUTER À L'ÉCRAN D'ACCUEIL</em> termine l'action et ajoute l'application à l'écran d'accueil. (Dans Android 8 et versions ultérieures, une boîte de dialogue d'autorisation au niveau du système "Ajouter à l'écran d'accueil" s'affiche en premier.)</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15772/fx-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+<p><img alt="" src="fx-a2hs-banner.png"></p>
 
 <p>Si vous avez Mobile Chrome disponible, l'expérience est légèrement différente. lors du chargement du site, une bannière d’installation apparaît vous demandant si vous souhaitez ajouter cette application à votre écran d’accueil.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15771/chrome-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+<p><img alt="" src="chrome-a2hs-banner.png"></p>
 
 <div class="note">
-<p><strong>Note</strong> : Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .</p>
+<p><strong>Note :</strong> Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .</p>
 </div>
 
-<p> </p>
-
 <p>Si vous choisissez de ne pas l'ajouter à votre écran d'accueil à ce stade, vous pourrez le faire ultérieurement à l'aide de l'icône <em>Ajouter à l'écran d'accueil</em> dans le menu principal de Chrome.</p>
 
 <p>Quel que soit le navigateur que vous utilisez, lorsque vous choisissez d'ajouter l'application à votre écran d'accueil, celle-ci s'affiche avec un titre abrégé, de la même manière que les applications natives.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15770/a2hs-on-home-screen.png" style="border-style: solid; border-width: 1px; display: block; height: 243px; margin: 0px auto; width: 400px;"></p>
+<p><img alt="" src="a2hs-on-home-screen.png"></p>
 
 <p>Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus l'interface utilisateur du navigateur.</p>
 
 <h2 id="Que_faut-il_pour_utiliser_A2HS">Que faut-il pour utiliser A2HS?</h2>
 
-<p> </p>
-
 <p>Pour permettre à votre application d'être ajoutée à un écran d'accueil, vous devez disposer des éléments suivants:</p>
 
 <ul>
@@ -66,14 +58,12 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs
  <li>Chrome exige en outre que l'application ait un agent de service enregistré (par exemple, pour pouvoir fonctionner en mode hors connexion).</li>
 </ul>
 
-<p> </p>
-
 <h3 id="Manifest">Manifest</h3>
 
 <p>Le "manifest" est un fichier écrit au format JSON standard et doit être placé quelque part dans le répertoire de votre application (il est préférable que le <code><em>fichier.webmanifest</em></code> soit à la racine du site) avec le nom <code><em>fichier</em>.webmanifest</code> (nous avons choisi <code>manifest.webmanifest</code> ). Il contient plusieurs champs qui définissent certaines informations sur l'application Web et sur son comportement. .</p>
 
 <div class="note">
-<p><strong>Note</strong> : L'extension <code>.webmanifest</code> est spécifiée dans la section Enregistrement du type de fichier, mais les navigateurs prennent aussi en charge les manifest avec d'autres extensions appropriées, par exemple <code>.json</code> .</p>
+<p><strong>Note :</strong> L'extension <code>.webmanifest</code> est spécifiée dans la section Enregistrement du type de fichier, mais les navigateurs prennent aussi en charge les manifest avec d'autres extensions appropriées, par exemple <code>.json</code> .</p>
 </div>
 
 <p> </p>
@@ -116,11 +106,11 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs
 
 <p>Pour ce qui est de la conception de l’icône, vous devez suivre les mêmes pratiques que vous suivriez pour n’importe quelle icône Android (voir les directives de conception d’icône Android ).</p>
 
-<h3 class="highlight-spanned" id="Lier_le_code_HTML_au_manifest">Lier le code HTML au "manifest"</h3>
+<h3 id="Lier_le_code_HTML_au_manifest">Lier le code HTML au "manifest"</h3>
 
 <p>Pour terminer la configuration de votre "manifest", vous devez le référencer à partir du code HTML de la page d'accueil de votre application:</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt; link rel = " manifest " href = " </code></pre>
+<pre class="brush: html">&lt; link rel = " manifest " href = "</pre>
 
 <p>Les navigateurs prenant en charge A2HS sauront où chercher votre manifeste une fois celui-ci en place.</p>
 
@@ -137,12 +127,12 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs
 <p>Bien que conçu à l'origine pour améliorer l'expérience utilisateur sur les systèmes d'exploitation mobiles, il existe également une technique pour rendre les PWA installables sur les plates-formes de bureau.</p>
 
 <div class="note">
-<p><strong>Note</strong> : au moment de la rédaction de ce document, les fonctionnalités décrites ci-dessous n'étaient prises en charge que par les versions les plus récentes de Chrome: par défaut sous Windows et derrière l'indicateur <code>#enable-desktop-pwas</code> sous macOS.</p>
+<p><strong>Note :</strong> au moment de la rédaction de ce document, les fonctionnalités décrites ci-dessous n'étaient prises en charge que par les versions les plus récentes de Chrome: par défaut sous Windows et derrière l'indicateur <code>#enable-desktop-pwas</code> sous macOS.</p>
 </div>
 
 <p> </p>
 
-<h3 class="highlight-spanned" id="Ajout_d'un_bouton_d'installation">Ajout d'un bouton d'installation</h3>
+<h3 id="Ajout_d'un_bouton_d'installation">Ajout d'un bouton d'installation</h3>
 
 <p>Pour rendre notre PWA installable sur le bureau, nous avons d’abord ajouté un bouton à notre document pour permettre aux utilisateurs de procéder à l’installation. Ce bouton n’est pas automatiquement disponible sur les applications de bureau et l’installation doit être déclenchée par un geste de l’utilisateur:</p>
 
@@ -156,7 +146,7 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs
   left: 1px;
 }</pre>
 
-<h3 class="highlight-spanned" id="JavaScript_pour_gérer_l'installation">JavaScript pour gérer l'installation</h3>
+<h3 id="JavaScript_pour_gérer_l'installation">JavaScript pour gérer l'installation</h3>
 
 <p>Au bas de notre <a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js" rel="noopener">fichier <code>index.js</code></a> , nous avons ajouté du JavaScript pour gérer l'installation. Tout d'abord, nous déclarons une variable <code>deferredPrompt</code> (que nous expliquerons plus tard), obtenons une référence à notre bouton d'installation et le configurons pour <code>display: none</code>:</p>
 
@@ -215,16 +205,16 @@ addBtn.style.display = 'none';</pre>
 
 <p>Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16281/chrome-desktop-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 163px; margin: 0px auto; width: 300px;"></p>
+<p><img alt="" src="chrome-desktop-a2hs-banner.png"></p>
 
 <p>Si l'utilisateur sélectionne <em>Installer</em> , l'application est installée (disponible en tant qu'application de bureau autonome) et le bouton Installer ne s'affiche plus (l'événement <code>onbeforeinstallprompt</code> ne se déclenche plus si l'application est déjà installée). Lorsque vous ouvrez l'application, celle-ci apparaît dans sa propre fenêtre:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16280/a2hs-installed-desktop.png" style="border-style: solid; border-width: 1px; display: block; height: 296px; margin: 0px auto; width: 500px;"></p>
+<p><img alt="" src="a2hs-installed-desktop.png"></p>
 
 <p>Si l'utilisateur sélectionne <em>Annuler</em> , l'état de l'application revient à ce qu'il était avant le clic sur le bouton.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.</p>
+<p><strong>Note :</strong> Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.</p>
 </div>
 
 <h2 id="Voir_aussi">Voir aussi</h2>
diff --git a/files/fr/web/progressive_web_apps/app_structure/index.html b/files/fr/web/progressive_web_apps/app_structure/index.html
index a4e0a26e08..6c97975899 100644
--- a/files/fr/web/progressive_web_apps/app_structure/index.html
+++ b/files/fr/web/progressive_web_apps/app_structure/index.html
@@ -5,7 +5,7 @@ translation_of: Web/Progressive_web_apps/App_structure
 ---
 <div>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</div>
 
-<p class="summary">Maintenant que nous avons pris connaissances des principes théoriques sur lesquelles sont bâties les PWAs, penchons nous sur la structure recommandée d'une vraie application. Nous commencerons par analyser l'application <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire.</p>
+<p>Maintenant que nous avons pris connaissances des principes théoriques sur lesquelles sont bâties les PWAs, penchons nous sur la structure recommandée d'une vraie application. Nous commencerons par analyser l'application <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire.</p>
 
 <h2 id="Architecture_dune_application">Architecture d'une application</h2>
 
@@ -18,7 +18,7 @@ translation_of: Web/Progressive_web_apps/App_structure
 
 <p>Mélanger SSR et CSR peut permettre d'obtenir de meilleurs résultats - vous pouvez générer un site web côté serveur, mettre en cache son contenu puis mettre à jour le rendu côté client si et quand c'est nécessaire. Le chargement de la première page est rapide grâce au SSR et la navigation entre les pages est fluide car le client peut regénérer la page en ne modifiant que les parties qui ont changé.</p>
 
-<p>Les PWAs peuvent être construite en utilisant l'approche que vous préférez, mais certaines fonctionneront mieux que les autres. L'approche la plus populaire est celle utilisant le concept d' "app shell"; qui mélange SSR et CSR exactement comme cela a été décrit plus haut et se conforme de surcroit à la méthodologie "déconnectée d'abord" ("offline first") que nous expliquerons en détails dans de prochains articles et que nous utiliserons dans notre application exemple. Il existe également une nouvelle approche utilisant l'<a href="/en-US/docs/Web/API/Streams_API">API Streams</a> et dont nous parlerons brièvement.</p>
+<p>Les PWAs peuvent être construite en utilisant l'approche que vous préférez, mais certaines fonctionneront mieux que les autres. L'approche la plus populaire est celle utilisant le concept d' "app shell"; qui mélange SSR et CSR exactement comme cela a été décrit plus haut et se conforme de surcroit à la méthodologie "déconnectée d'abord" ("offline first") que nous expliquerons en détails dans de prochains articles et que nous utiliserons dans notre application exemple. Il existe également une nouvelle approche utilisant l'<a href="/fr/docs/Web/API/Streams_API">API Streams</a> et dont nous parlerons brièvement.</p>
 
 <h2 id="App_shell">App shell</h2>
 
@@ -26,11 +26,11 @@ translation_of: Web/Progressive_web_apps/App_structure
 
 <p>Cette structure est rapide et est également ressentie comme telle par l'utilisateur car il voit "quelque chose" instantanément, plutôt qu'un indicateur de chargement en train de tourner ou une page blanche. Cela permet également au site web d'être accessible en mode déconnecté si une connexion réseau n'est pas disponible.</p>
 
-<p>Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré dans le cache grâce à un <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> qui sera expliqué en détail dans le prochain article - pour le moment, concentrons-nous sur la structure en elle-même.</p>
+<p>Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré dans le cache grâce à un <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a> qui sera expliqué en détail dans le prochain article - pour le moment, concentrons-nous sur la structure en elle-même.</p>
 
 <h3 id="Pourquoi_dois-je_lutiliser">Pourquoi dois-je l'utiliser ?</h3>
 
-<p>Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">l'ajouter à l'écran d'accueil</a> ou <a href="/en-US/docs/Web/API/Push_API">l'envoi de notifications</a>, sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue.</p>
+<p>Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que <a href="/fr/docs/Web/Apps/Progressive/Add_to_home_screen">l'ajouter à l'écran d'accueil</a> ou <a href="/fr/docs/Web/API/Push_API">l'envoi de notifications</a>, sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue.</p>
 
 <p>Le site web se comporte comme une application native, offrant une interaction instantannée et de solides performances tout en conservant les avantages du web.</p>
 
@@ -41,12 +41,12 @@ translation_of: Web/Progressive_web_apps/App_structure
 <ul>
  <li>Accessible par un lien: Même s'il se comporte comme une application native, il reste un site web - vous pouvez cliquer sur les liens d'une page et envoyer une URL à quelqu'un si vous voulez le partager.</li>
  <li>Progressive: Commencer avec un "bon vieux site web basic” et ajouter progressivement de nouvelles fonctionnalités tout en se rappelant de détecter si elles sont disponibles dans le navigateur et de gérer proprement toute erreur qui pourrait survenir si la prise en charge n'est pas disponible. Par exemple, un mode déconnecté possible grâce aux service workers n'est qu'une caractéristique bonus qui améliore l'expérience sur le site web, mais ce dernier reste totalement fonctionnel sans elle.</li>
- <li>Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que  <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">les tags meta viewport</a>, <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">les reqêtes media CSS</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">les Flexbox</a> et les <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid CSS</a>.</li>
+ <li>Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que  <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">les tags meta viewport</a>, <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">les reqêtes media CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les Flexbox</a> et les <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grid CSS</a>.</li>
 </ul>
 
 <h2 id="Approche_différente_les_streams">Approche différente : les streams</h2>
 
-<p>Une approche totalement différente du rendu côté serveur - ou client - peut être obtenue à l'aide de l'<a href="/en-US/docs/Web/API/Streams_API">API Streams</a>. Avec un peu d'aide des service workers, les streams peuvent grandement améliorer la façon dont nous analysons le contenu.</p>
+<p>Une approche totalement différente du rendu côté serveur - ou client - peut être obtenue à l'aide de l'<a href="/fr/docs/Web/API/Streams_API">API Streams</a>. Avec un peu d'aide des service workers, les streams peuvent grandement améliorer la façon dont nous analysons le contenu.</p>
 
 <p>Le modèle app shell nécessite que toutes les ressources soient disponibles avant que le site puisse commencer à être rendu. C'est différent avec HTML pour lequel le navigateur diffuse immédiatement les données si bien que vous pouvez voir quand les éléments sont chargés et et rendus sur le site web. Pour que le JavaScript soit "opérationnel", cependant, il faut attendre qu'il ait été entièrement téléchargé au préalable.</p>
 
@@ -54,13 +54,13 @@ translation_of: Web/Progressive_web_apps/App_structure
 
 <p>En théorie, le flux est un meilleur modèle, mais il est également plus complexe et au moment de la rédaction (mars 2018), l'API Stream est toujours un travail en cours et pas encore totalement disponible pour l'ensemble des navigateurs principaux. Quand elle sera disponible, elle sera le moyen le plus rapide de servir le contenu - les bénéfices sont sur le point d'être énormes en terme de performance.</p>
 
-<p>Pour voir des exemples fonctionnels et disposer de davantage d'information, voir <a href="/en-US/docs/Web/API/Streams_API">la documention de l'API Streams</a>.</p>
+<p>Pour voir des exemples fonctionnels et disposer de davantage d'information, voir <a href="/fr/docs/Web/API/Streams_API">la documention de l'API Streams</a>.</p>
 
 <h2 id="Structure_de_notre_application_exemple">Structure de notre application exemple</h2>
 
 <p>La structure du site web <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> est plutôt simple: elle consiste en un simple fichier HTML (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/index.html">index.html</a>) avec un style CSS basique (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/style.css">style.css</a>) et quelques images, scripts et polices de caractères. La structure du répertoire ressemble à ceci:</p>
 
-<p><img alt="Folder structure of js13kPWA." src="https://mdn.mozillademos.org/files/15925/js13kpwa-directory.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 320px;"></p>
+<p><img alt="Folder structure of js13kPWA." src="js13kpwa-directory.png"></p>
 
 <h3 id="Le_HTML">Le HTML</h3>
 
diff --git a/files/fr/web/progressive_web_apps/index.html b/files/fr/web/progressive_web_apps/index.html
index 98885f3899..0d4f57a709 100644
--- a/files/fr/web/progressive_web_apps/index.html
+++ b/files/fr/web/progressive_web_apps/index.html
@@ -14,9 +14,9 @@ translation_of: Web/Progressive_web_apps
 ---
 <p>{{draft}}</p>
 
-<p class="summary"><img alt="PWA community logo" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; float: left; height: 188px; margin: 0px auto; padding-bottom: 1em; padding-right: 2em; width: 350px;">Les <strong>applications Web progressives</strong> utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et fournissent quelques fonctionnalités qui donnent à l'expérience utilisateur les mêmes avantages que les applications natives. Cet ensemble de documents explique tout ce qu'il faut savoir sur ces applications.</p>
+<p>Les <strong>applications Web progressives</strong> utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et fournissent quelques fonctionnalités qui donnent à l'expérience utilisateur les mêmes avantages que les applications natives. Cet ensemble de documents explique tout ce qu'il faut savoir sur ces applications.</p>
 
-<p>Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : <a href="/fr/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<strong>{{Glossary("HTTPS")}}</strong>), un ou plusieurs <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> et un <a href="/fr/docs/Web/Manifest">fichier manifest</a>.</p>
+<p>Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : <a href="/fr/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<strong>{{Glossary("HTTPS")}}</strong>), un ou plusieurs <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> et un <a href="/fr/docs/Web/Manifest">fichier manifest</a>.</p>
 
 <dl>
  <dt><a href="/fr/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<a href="/fr/docs/Glossaire/https">HTTPS</a>)</dt>
@@ -39,8 +39,8 @@ translation_of: Web/Progressive_web_apps
 
 <p>{{LandingPageListSubpages}}</p>
 
-<div class="blockIndicator warning">
-<p><strong>Tout ce qui se trouve en dessous de ce point est un reste de l'ancienne version de cette page et sera remanié au fur et à mesure de la révision des autres contenus.</strong></p>
+<div class="warning">
+<p><strong>Attention :</strong> ce qui se trouve en dessous de ce point est un reste de l'ancienne version de cette page et sera remanié au fur et à mesure de la révision des autres contenus.</p>
 </div>
 
 <h2 id="Guides_de_base_des_PWA">Guides de base des PWA</h2>
@@ -58,8 +58,6 @@ translation_of: Web/Progressive_web_apps
  <li><a href="https://github.com/pwafire/pwadev-tips">Mise en place de votre environnement de développement d'applications web progressives</a></li>
 </ol>
 
-<div class="column-container">
-<div class="column-half">
 <h2 id="Guides_technologiques">Guides technologiques</h2>
 
 <ul>
@@ -74,9 +72,6 @@ translation_of: Web/Progressive_web_apps
  <li><a href="/fr/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> – souvent, lors de la création de mises en page d'applications réactives, il est judicieux de créer la mise en page mobile par défaut, et de construire des mises en page plus larges par-dessus.</li>
  <li><a href="/fr/docs/Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs">Guide de l'ajout à l'écran d'accueil</a> – découvrez comment vos applications peuvent tirer profit de l'ajout à l'écran d'accueil (A2HS).</li>
 </ul>
-</div>
-
-<div class="column-half">
 <h2 id="Outils">Outils</h2>
 
 <ul>
@@ -88,11 +83,6 @@ translation_of: Web/Progressive_web_apps
  <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> – un petit script qui assure que votre site est toujours là pour vos utilisateurs.</li>
  <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> – une série d'excellentes recettes de service worker/push, montrant comment mettre en œuvre une application hors ligne, mais aussi bien plus.</li>
  <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">WA VS Code extension</a> – une collection de tous les extraits de code essentiels dont vous avez besoin pour créer des applications Web progressives dans votre environnement VS Code.</li>
-</ul>
-</div>
-</div>
-
-<ul>
  <li><a href="https://developers.google.com/web/progressive-web-apps">Apps web progressives</a> sur Google Developers.</li>
  <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Applications Web progressives : Échapper aux tabulations sans perdre son âme</a> par Alex Russell.</li>
  <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Liste de contrôle des applications Web progressives</a>.</li>
diff --git a/files/fr/web/progressive_web_apps/installable_pwas/index.html b/files/fr/web/progressive_web_apps/installable_pwas/index.html
index c782ba936f..012aa8ce8c 100644
--- a/files/fr/web/progressive_web_apps/installable_pwas/index.html
+++ b/files/fr/web/progressive_web_apps/installable_pwas/index.html
@@ -5,16 +5,16 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
 ---
 <div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
 
-<p class="summary">Dans l'article précédent, nous avons vu comment <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> fonctionne en mode déconnecté grâce à son <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>, mais nous pouvons aller encore plus loin et permettre aux utilisateurs d'installer l'application web sur les navigateurs mobiles pris en charge, comme s'il s'agissait d'une application native. Cet article explique comment réaliser ceci en utilisant un manifeste web et une fonctionnalité appelée "ajouter à l'écran d'accueil".</p>
+<p>Dans l'article précédent, nous avons vu comment <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> fonctionne en mode déconnecté grâce à son <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>, mais nous pouvons aller encore plus loin et permettre aux utilisateurs d'installer l'application web sur les navigateurs mobiles pris en charge, comme s'il s'agissait d'une application native. Cet article explique comment réaliser ceci en utilisant un manifeste web et une fonctionnalité appelée "ajouter à l'écran d'accueil".</p>
 
-<p class="summary">Ces technologies permettent à l'application d'être directement lancée depuis l'écran d'accueil de l'appareil au lieu de lancer manuellement le navigateur puis de saisir l'URL. Votre application web peut se trouver à côté des applications natives en tant qu'application de première catégorie. De ce fait, il est plus facile d'y accéder et vous pouvez également spécifier qu'une application doit s'exécuter en plein écran sans l'encadrement du navigateur hôte, ce qui la fait ressembler encore plus à une application native.</p>
+<p>Ces technologies permettent à l'application d'être directement lancée depuis l'écran d'accueil de l'appareil au lieu de lancer manuellement le navigateur puis de saisir l'URL. Votre application web peut se trouver à côté des applications natives en tant qu'application de première catégorie. De ce fait, il est plus facile d'y accéder et vous pouvez également spécifier qu'une application doit s'exécuter en plein écran sans l'encadrement du navigateur hôte, ce qui la fait ressembler encore plus à une application native.</p>
 
 <h2 id="Prérequis">Prérequis</h2>
 
 <p>Pour rendre un site web installable, il a besoin que les éléments suivants soient mis en place:</p>
 
 <ul>
- <li>Un manifeste web, avec les <a href="/en-US/Apps/Progressive/Add_to_home_screen#Manifest">bons champs renseignés</a></li>
+ <li>Un manifeste web, avec les <a href="/fr/Apps/Progressive/Add_to_home_screen#Manifest">bons champs renseignés</a></li>
  <li>Le site web à servir depuis un domaine sécurisé (HTTPS)</li>
  <li>Un icone représentant l'application sur l'appareil</li>
  <li>Un service worker enregistré pour permettre à l'application de fonctionner en mode déconnecté (ceci n'est actuellement imposé que par Chrome pour Android)</li>
@@ -31,7 +31,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
 <pre class="brush: html">&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Il existe quelques extensions courantes qui ont été utilisées pour les manifestes par le passé: <code>manifest.webapp</code> fut populaire pour les manifestes des applications Firefox OS et nombreux sont ceux qui utilisent <code>manifest.json</code> pour les manifestes web attendu que le contenu est organisé sous forme d'une structure JSON. Cependant, l'extension <code>.webmanifest</code> est explicitement mentionnée dans la <a href="https://w3c.github.io/manifest/">W3C relative au manifeste</a>, donc conformons nous à cela.</p>
+<p><strong>Note :</strong> Il existe quelques extensions courantes qui ont été utilisées pour les manifestes par le passé: <code>manifest.webapp</code> fut populaire pour les manifestes des applications Firefox OS et nombreux sont ceux qui utilisent <code>manifest.json</code> pour les manifestes web attendu que le contenu est organisé sous forme d'une structure JSON. Cependant, l'extension <code>.webmanifest</code> est explicitement mentionnée dans la <a href="https://w3c.github.io/manifest/">W3C relative au manifeste</a>, donc conformons nous à cela.</p>
 </div>
 
 <p>Le contenu d'un fichier ressemble à ceci:</p>
@@ -72,7 +72,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
  <li><code>background_color</code>: Une couleur de fond utilisée lors de l'installation et pour l'écran de chargement.</li>
 </ul>
 
-<p>Le minimum requis pour un manifeste web est le nom (<code>name</code>) et au moins un icone (avec <code>src</code>, <code>size</code> et <code>type</code>). <code>description</code>, <code>short_name</code> et <code>start_url</code> sont recommandés. Il existe même plus de champs que ceux listés ci-dessus et que vous pouvez utiliser — voir <a href="/en-US/docs/Web/Manifest">la réference du Manifeste des Web Apps</a> pour avoir davatange de détails.</p>
+<p>Le minimum requis pour un manifeste web est le nom (<code>name</code>) et au moins un icone (avec <code>src</code>, <code>size</code> et <code>type</code>). <code>description</code>, <code>short_name</code> et <code>start_url</code> sont recommandés. Il existe même plus de champs que ceux listés ci-dessus et que vous pouvez utiliser — voir <a href="/fr/docs/Web/Manifest">la réference du Manifeste des Web Apps</a> pour avoir davatange de détails.</p>
 
 <h2 id="Ajout_à_lécran_daccueil">Ajout à l'écran d'accueil</h2>
 
@@ -80,19 +80,19 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
 
 <p>Quand l'utilisateur navigue sur la PWA en utilisant un navigateur les prenant en charge, il doit voir s'afficher une banière indiquant qu'il est possible d'installer l'application en tant que PWA.</p>
 
-<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+<p><img alt="Add to Home screen popup of js13kPWA." src="js13kpwa-icon.png"></p>
 
 <p>Après que l'utilisateur a cliqué sur cette banière, la banière d'installation est affichée. Cette banière est automatiquement créée par le navigateur en se basant sur les informations contenues dans le fichier manifeste — le nom et l'icone sont visibles dans la boîte de dialogue.</p>
 
-<p><img alt="Install banner of js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+<p><img alt="Install banner of js13kPWA." src="js13kpwa-banner.png"></p>
 
 <p>Si l'utilisateur clique sur le bouton, il y a une dernière étape montrant à quoi l'application ressemble et permettant à l'utilisateur de confirmer qu'il veut vraiment ajouter l'application.</p>
 
-<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+<p><img alt="Add to Home screen popup of js13kPWA." src="js13kpwa-add.png"></p>
 
 <p>Une fois la confirmation donnée, l'application sera installée sur l'écran d'accueil.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="js13kpwa-installed.png"></p>
 
 <p>APrès cela, l'utlisateur peut la lancer et commencer à l'utiliser immédiatement. Notez que parfois (selon le navigateur ou le système d'exploitation mobile que vous utilisez) les PWA ont une petite image de navigateur dans le coin inférieur droit de leur icone pour informer l'utilisateur de leur nature web.</p>
 
@@ -100,7 +100,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
 
 <p>Avec certains navigateurs, un écran de démarrage est également généré à partir des informations issues du manifeste et qui est affiché quand la PWA est lancée.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="js13kpwa-splash.png"></p>
 
 <p>L'icone et les couleurs du thème et du fond sont utilisés pour créer cet écran.</p>
 
@@ -108,7 +108,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
 
 <p>Dans cet article, nous avons appris comment nous pouvons rendre une PWA installable en utilisant un manisfeste web et l'écran "Ajouter à l'écran d'accueil".</p>
 
-<p>Pour plus d'information sur l'écran "Ajout à l'écran d'accueil", reportez-vous au <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">guide d'ajout à l'écran d'accueil</a>. La prise en charge des navigateurs est actuellement limitée à Firefox pour Android 58+, Mobile Chrome et Android Webview 31+ et Opera pour Android 32+, mais ceci doit s'améliorer dans un proche avenir.</p>
+<p>Pour plus d'information sur l'écran "Ajout à l'écran d'accueil", reportez-vous au <a href="/fr/docs/Web/Apps/Progressive/Add_to_home_screen">guide d'ajout à l'écran d'accueil</a>. La prise en charge des navigateurs est actuellement limitée à Firefox pour Android 58+, Mobile Chrome et Android Webview 31+ et Opera pour Android 32+, mais ceci doit s'améliorer dans un proche avenir.</p>
 
 <p>Maintenant voyons la dernière pièce du puzzle PWA puzzle — ré-engagement via les notifications poussées.</p>
 
diff --git a/files/fr/web/progressive_web_apps/introduction/index.html b/files/fr/web/progressive_web_apps/introduction/index.html
index 48ad9b808c..894bfc00ff 100644
--- a/files/fr/web/progressive_web_apps/introduction/index.html
+++ b/files/fr/web/progressive_web_apps/introduction/index.html
@@ -11,7 +11,7 @@ translation_of: Web/Progressive_web_apps/Introduction
 ---
 <div>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</div>
 
-<p class="summary">Cet article fournit une introduction aux Progressive Web Apps (PWA), présentant ce qui les caractérise, et les avantages qu'elles apportent par rapport à de simples applications web.</p>
+<p>Cet article fournit une introduction aux Progressive Web Apps (PWA), présentant ce qui les caractérise, et les avantages qu'elles apportent par rapport à de simples applications web.</p>
 
 <h2 id="Quest-ce_quune_Progressive_Web_App">Qu'est-ce qu'une Progressive Web App?</h2>
 
@@ -36,14 +36,14 @@ translation_of: Web/Progressive_web_apps/Introduction
 <p>Il y a des principes clés qu'une application web devrait suivre afin d'être identifée comme une PWA. Elle doit être:</p>
 
 <ul>
- <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Discoverable">Discoverable</a>, afin que le contenu soit trouvé à l'aide de moteurs de recherche.</li>
- <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Installable">Installable</a>, afin d'être disponible sur l'écran d'accueil de l'appareil.</li>
- <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Linkable">Linkable</a>, afin que vous puissiez la partager simplement en envoyant un lien. </li>
- <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Network_independent">Network independent</a>, afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet.</li>
- <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Progressive">Progressive</a>, afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers.</li>
- <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Re-engageable">Re-engageable</a>, afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible.</li>
- <li><a href="/en-US/docs/web/Progressive_web_apps/Advantages#Responsive">Responsive</a>, afin q'uelle soit fonctionnelle sur n'importe quel appareil et résolution d'écran — téléphones mobiles, tablettes, ordinateurs portables, télévisions, réfrigérateurs, etc.</li>
- <li><a href="/en-US/docs/web/Progressive_web_apps/Advantages#Safe">Safe</a>, afin que le connexion entre vous et l'application soit sécurisée et prévienne n'importe quel tiers d'accéder à vos données.</li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Discoverable">Discoverable</a>, afin que le contenu soit trouvé à l'aide de moteurs de recherche.</li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Installable">Installable</a>, afin d'être disponible sur l'écran d'accueil de l'appareil.</li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Linkable">Linkable</a>, afin que vous puissiez la partager simplement en envoyant un lien. </li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Network_independent">Network independent</a>, afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet.</li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Progressive">Progressive</a>, afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers.</li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Re-engageable">Re-engageable</a>, afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible.</li>
+ <li><a href="/fr/docs/web/Progressive_web_apps/Advantages#Responsive">Responsive</a>, afin q'uelle soit fonctionnelle sur n'importe quel appareil et résolution d'écran — téléphones mobiles, tablettes, ordinateurs portables, télévisions, réfrigérateurs, etc.</li>
+ <li><a href="/fr/docs/web/Progressive_web_apps/Advantages#Safe">Safe</a>, afin que le connexion entre vous et l'application soit sécurisée et prévienne n'importe quel tiers d'accéder à vos données.</li>
 </ul>
 
 <h3 id="Est-ce_que_ça_vaut_le_coup_de_faire_tout_ça">Est-ce que ça vaut le coup de faire tout ça ?</h3>
@@ -51,7 +51,7 @@ translation_of: Web/Progressive_web_apps/Introduction
 <p>Absolument! Avec relativement peu d'effort pour implémenter l'essentiel des fonctionnalités requises par une PWA, les bénéfices sont énormes. Par exemple:</p>
 
 <ul>
- <li>Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>, s'accompagnant aussi par une économie précieuse de bande passante et de temps.</li>
+ <li>Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a>, s'accompagnant aussi par une économie précieuse de bande passante et de temps.</li>
  <li>La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une  application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau.</li>
  <li>Une sensation d'utilisation et une apparence plus proche d'une application native— icônes d'applications sur l'écran d'accueil, des applications qui s'ouvrent en plein écran, etc.</li>
  <li>Les utilisateurs sont plus engagés grâce à un système de notifications et de messages <em>push</em>, créant des utlisateurs plus impliqués apportant des taux de conversion plus élevés.</li>
@@ -75,9 +75,9 @@ translation_of: Web/Progressive_web_apps/Introduction
 
 <p>Comme expliqué précédemment, les PWA ne reposent pas sur une seule API, mais plutôt sur plusieurs technologies pour atteindre l'objectif de délivrer la meilleure expérience web possible.</p>
 
-<p>L'ingrédient clé requis pour les PWA est le support des <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>. Heureusement les <em>service workers</em> sont <a href="https://jakearchibald.github.io/isserviceworkerready/">désormais supportés sur tous les principaux navigateurs</a>, sur ordinateur et sur téléphone mobile.</p>
+<p>L'ingrédient clé requis pour les PWA est le support des <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>. Heureusement les <em>service workers</em> sont <a href="https://jakearchibald.github.io/isserviceworkerready/">désormais supportés sur tous les principaux navigateurs</a>, sur ordinateur et sur téléphone mobile.</p>
 
-<p>D'autres fonctionnalités telles que <a href="/en-US/docs/Web/Manifest">Web App Manifest</a>, <a href="/en-US/docs/Web/API/Push_API">Push</a>, <a href="/en-US/docs/Web/API/Notifications_API">Notifications</a>, et <a href="/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen">Add to Home Screen</a> bénéficient également d'un large support. Juqu'à présent Safari a limité le support du <em>Web App Manifest</em> et <em>Add to Home Screen</em>, et ne supporte pas les notifications web <em>push</em>. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités.</p>
+<p>D'autres fonctionnalités telles que <a href="/fr/docs/Web/Manifest">Web App Manifest</a>, <a href="/fr/docs/Web/API/Push_API">Push</a>, <a href="/fr/docs/Web/API/Notifications_API">Notifications</a>, et <a href="/fr/docs/Web/Progressive_web_apps/Add_to_home_screen">Add to Home Screen</a> bénéficient également d'un large support. Juqu'à présent Safari a limité le support du <em>Web App Manifest</em> et <em>Add to Home Screen</em>, et ne supporte pas les notifications web <em>push</em>. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités.</p>
 
 <p>Certaines de ces API sont expérimentales, et accompagnées d'une documenation toujours à l'état de brouillon, mais les histoires à succès comme celles de Flibkart et AliExpress devraient d'ores et déjà suffire à vous convaincre d'essayer et d'implémenter certaines de ces fonctionnalités dans votre application web.</p>
 
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
 ---
 <div>{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}</div>
 
-<p class="summary">Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> une Progressive Web App: <a href="en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Workers</a>, <a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs">Manifestes Web</a>, <a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">Notifications et Push</a>. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.</p>
+<p>Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> une Progressive Web App: <a href="en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Workers</a>, <a href="/fr/docs/Web/Progressive_web_apps/Installable_PWAs">Manifestes Web</a>, <a href="/fr/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">Notifications et Push</a>. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.</p>
 
 <h2 id="Première_visualisation_signifiante">Première visualisation signifiante</h2>
 
@@ -78,7 +78,7 @@ const loadImages = (image) =&gt; {
 
 <p>Pour rendre le processus visuellement plus attractif, le conteneur est flouté via CSS.</p>
 
-<p><img alt="Screenshot of placeholder images in the js13kPWA app." src="https://mdn.mozillademos.org/files/15992/js13kpwa-placeholders.png" style="height: 684px; width: 675px;"></p>
+<p><img alt="Screenshot of placeholder images in the js13kPWA app." src="js13kpwa-placeholders.png"></p>
 
 <p>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:</p>
 
@@ -97,11 +97,11 @@ article img {
 
 <p>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<em> toutes</em> les images en une fois, même si l'utilisateur ne verra que les deux ou trois premières au chargement de la page.</p>
 
-<p>Ce problème peut être résolu avec la nouvelle <a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.</p>
+<p>Ce problème peut être résolu avec la nouvelle <a href="/fr/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.</p>
 
 <h3 id="Intersection_Observer">Intersection Observer</h3>
 
-<p>Ceci est une amélioration progressive à l'exemple fonctionnel précédent — <a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a> téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.</p>
+<p>Ceci est une amélioration progressive à l'exemple fonctionnel précédent — <a href="/fr/docs/Web/API/Intersection_Observer_API">Intersection Observer</a> téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.</p>
 
 <p>Voici à quoi le code correspondant ressemble:</p>
 
@@ -143,7 +143,7 @@ article img {
 
 <h2 id="Dernières_réflexions">Dernières réflexions</h2>
 
-<p>C'est fini pour ces séries de tutoriels — nous avons examiné le <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">code source code de l'exemple d'application js13kPWA</a> et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une <a href="/en-US/docs/Web/Progressive_web_apps/Introduction">Introduction</a>, <a href="/en-US/docs/Web/Progressive_web_apps/App_structure">la structure des PWA, </a><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">la disponibilité en mode déconnectégrâce aux Service Workers</a>, <a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs">les PWAs installable</a> et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du <a href="https://serviceworke.rs/">Service Worker Cookbook</a>. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API ntersection Observer</a>.</p>
+<p>C'est fini pour ces séries de tutoriels — nous avons examiné le <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">code source code de l'exemple d'application js13kPWA</a> et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une <a href="/fr/docs/Web/Progressive_web_apps/Introduction">Introduction</a>, <a href="/fr/docs/Web/Progressive_web_apps/App_structure">la structure des PWA, </a><a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">la disponibilité en mode déconnectégrâce aux Service Workers</a>, <a href="/fr/docs/Web/Progressive_web_apps/Installable_PWAs">les PWAs installable</a> et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du <a href="https://serviceworke.rs/">Service Worker Cookbook</a>. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'<a href="/fr/docs/Web/API/Intersection_Observer_API">API ntersection Observer</a>.</p>
 
 <p>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.</p>
 
diff --git a/files/fr/web/progressive_web_apps/offline_service_workers/index.html b/files/fr/web/progressive_web_apps/offline_service_workers/index.html
index 6edb63fc27..760f697a53 100644
--- a/files/fr/web/progressive_web_apps/offline_service_workers/index.html
+++ b/files/fr/web/progressive_web_apps/offline_service_workers/index.html
@@ -12,13 +12,13 @@ translation_of: Web/Progressive_web_apps/Offline_Service_workers
 ---
 <div>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div>
 
-<p class="summary">Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que nous avons configuré et exécuté la structure de base, voyons comment sont implémentées les fonctionnalités en mode déconnecté mettant en oeuvre Service Worker. Dans cet article, nous examinerons comment cela est utilisé dans notre <a href="https://mdn.github.io/pwa-examples/js13kpwa/">exemple js13kPWA</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">voir également le code source</a>). Nous examinerons comment ajouter la fonctionnalité mode déconnecté.</p>
+<p>Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que nous avons configuré et exécuté la structure de base, voyons comment sont implémentées les fonctionnalités en mode déconnecté mettant en oeuvre Service Worker. Dans cet article, nous examinerons comment cela est utilisé dans notre <a href="https://mdn.github.io/pwa-examples/js13kpwa/">exemple js13kPWA</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">voir également le code source</a>). Nous examinerons comment ajouter la fonctionnalité mode déconnecté.</p>
 
 <h2 id="Les_Service_workers_expliqués">Les Service workers expliqués</h2>
 
 <p>Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion.</p>
 
-<p>Ils s'exécutent dans un processus séparé de celui du code JavaScript principal de notre page et n'ont aucun accès à la structure DOM. Cela introduit une approche différente de celle de la programmation web traditionnelle — l'API est non bloquante et peut émettre et recevoir de la communication entre différents contextes. Vous pouvez donner à un Service Worker quelque chose à faire et recevoir le résultat quand il est prêt en utilisant une approche basée sur les <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.</p>
+<p>Ils s'exécutent dans un processus séparé de celui du code JavaScript principal de notre page et n'ont aucun accès à la structure DOM. Cela introduit une approche différente de celle de la programmation web traditionnelle — l'API est non bloquante et peut émettre et recevoir de la communication entre différents contextes. Vous pouvez donner à un Service Worker quelque chose à faire et recevoir le résultat quand il est prêt en utilisant une approche basée sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.</p>
 
 <p>Ils peuvent faire beaucoup plus que "simplement" offrir des capacités en mode déconnecté, comme gérer des notifications, exécuter des calculs intensifs dans des processus séparés, etc. Les Service Workers sont assez puissants car ils peuvent prendre le contrôle de requêtes réseau, les modifier, fournir des réponses personnalisées récupérées du cache ou générer complètement des réponses.</p>
 
@@ -112,9 +112,9 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre>
 
 <p>Le service worker ne s'installe pas tant que le code de <code>waitUntil</code> n'est pas exécuté. Il renvoie une promesse — Cette approche est nécessaire car l'installation peut prendre du temps, donc nous devons attendre qu'elle soit terminée.</p>
 
-<p><code>caches</code> est un objet {{domxref("CacheStorage")}} spécial accessible dans la portée du Service Worker et qui permet d'enregistrer les données — l'enregistrement dans le <a href="/en-US/docs/Web/API/Web_Storage_API">web storage</a> ne fonctionnera pas, parce que le web storage fonctionne de façon synchrone. Avec les Service Workers, nous utilisons l'API Cache à la place. Ici, nous ouvrons un cache sous un nom donné, puis nous lui ajoutons tous les fichiers que notre app utilise, de telle sorte qu'ils soient disponibles la prochaine fois qu'il sera chargé (identifié par l'URL de la requête).</p>
+<p><code>caches</code> est un objet {{domxref("CacheStorage")}} spécial accessible dans la portée du Service Worker et qui permet d'enregistrer les données — l'enregistrement dans le <a href="/fr/docs/Web/API/Web_Storage_API">web storage</a> ne fonctionnera pas, parce que le web storage fonctionne de façon synchrone. Avec les Service Workers, nous utilisons l'API Cache à la place. Ici, nous ouvrons un cache sous un nom donné, puis nous lui ajoutons tous les fichiers que notre app utilise, de telle sorte qu'ils soient disponibles la prochaine fois qu'il sera chargé (identifié par l'URL de la requête).</p>
 
-<p>Vous avez remarqué que nous n'avons pas mis en cache le fichier <code>game.js</code>. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : <a href="/en-US/docs/Web/API/Web_Periodic_Background_Synchronization_API">Web_Periodic_Background_Synchronization_API</a> .</p>
+<p>Vous avez remarqué que nous n'avons pas mis en cache le fichier <code>game.js</code>. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : <a href="/fr/docs/Web/API/Web_Periodic_Background_Synchronization_API">Web_Periodic_Background_Synchronization_API</a> .</p>
 
 <h4 id="Activation">Activation</h4>
 
@@ -191,7 +191,7 @@ self.addEventListener('install', (e) =&gt; {
   );
 });</pre>
 
-<p>Ceci nous assure que nous avons seulement les fichiers dont nous avons besoin dans le cache, de telle sorte que nous ne laissions pas de déchets derrière nous; l'<a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">espace de cache disponible dans le navigateur est limité</a>, c'est donc une bonne idée de nettoyer derrière nous.</p>
+<p>Ceci nous assure que nous avons seulement les fichiers dont nous avons besoin dans le cache, de telle sorte que nous ne laissions pas de déchets derrière nous; l'<a href="/fr/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">espace de cache disponible dans le navigateur est limité</a>, c'est donc une bonne idée de nettoyer derrière nous.</p>
 
 <h2 id="Autres_cas_dusage">Autres cas d'usage</h2>
 
@@ -199,9 +199,9 @@ self.addEventListener('install', (e) =&gt; {
 
 <h2 id="Résumé">Résumé</h2>
 
-<p>Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez  la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'<a href="/en-US/docs/Web/API/Service_Worker_API">API Service Worker</a> et comment l'exploiter au mieux.</p>
+<p>Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez  la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'<a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a> et comment l'exploiter au mieux.</p>
 
-<p>Les Service Workers sont également utilisés pour gérer les <a href="https://developer.mozilla.org/fr/docs/Web/API/Push_API">push notifications </a><a href="/fr/docs//Web/API/Push_API"> </a>— ceci sera expliqué dans un prochain article.</p>
+<p>Les Service Workers sont également utilisés pour gérer les <a href="/fr/docs/Web/API/Push_API">push notifications </a><a href="/fr/docs//Web/API/Push_API"> </a>— ceci sera expliqué dans un prochain article.</p>
 
 <p>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p>
 
diff --git a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html
index 85b8b6332a..ae414470b6 100644
--- a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html
+++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html
@@ -8,11 +8,11 @@ original_slug: Web/Progressive_web_apps/Relancer_Via_Notifications_Push
 ---
 <div>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</div>
 
-<p class="summary">Avoir la possibilité de mettre en cache le contenu d'une application pour travailler en mode déconnecté est une formidable fonctionnalité. Donner la possibilité à l'utilisateur d'installer l'application web sur son écran d'accueil est encore mieux. Mais plutôt que de s'en remettre seulement aux actions de l'utilisateur, nous pouvons faire plus, en utilisant des messages poussés et des notifications pour le relancer automatiquement et fournir des nouveaux contenus à chaque fois qu'ils sont disponibles.</p>
+<p>Avoir la possibilité de mettre en cache le contenu d'une application pour travailler en mode déconnecté est une formidable fonctionnalité. Donner la possibilité à l'utilisateur d'installer l'application web sur son écran d'accueil est encore mieux. Mais plutôt que de s'en remettre seulement aux actions de l'utilisateur, nous pouvons faire plus, en utilisant des messages poussés et des notifications pour le relancer automatiquement et fournir des nouveaux contenus à chaque fois qu'ils sont disponibles.</p>
 
 <h2 id="Deux_APIs_un_seul_but">Deux APIs, un seul but</h2>
 
-<p>L'<a href="/en-US/docs/Web/API/Push_API">API Push</a> et l'<a href="/en-US/docs/Web/API/Notifications_API">API Notifications</a> sont deux APIs distinctes mais elles fonctionnent bien ensemble quand vous souhaitez fournir une fonction de relance dans votre application. Push est utilisée pour délivrer un nouveau contenu à votre application depuis le serveur sans aucune intervention côté client et cette opération est gérée par le service worker de l'application. Les notifications peuvent être utilisées par le service worker pour afficher les nouvelles informations à l'utilisateur, ou, au moins, le prévenir que quelque chose a été mis à jour.</p>
+<p>L'<a href="/fr/docs/Web/API/Push_API">API Push</a> et l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> sont deux APIs distinctes mais elles fonctionnent bien ensemble quand vous souhaitez fournir une fonction de relance dans votre application. Push est utilisée pour délivrer un nouveau contenu à votre application depuis le serveur sans aucune intervention côté client et cette opération est gérée par le service worker de l'application. Les notifications peuvent être utilisées par le service worker pour afficher les nouvelles informations à l'utilisateur, ou, au moins, le prévenir que quelque chose a été mis à jour.</p>
 
 <p>Cela s'exécute hors de la fenêtre du navigateur, juste comme les service workers, si bien que des mises à jour peuvent être poussées et des notifications peuvent être affichées quand la page de l'application n'a pas le focus voire fermée.</p>
 
@@ -35,7 +35,7 @@ button.addEventListener('click', function(e) {
 
 <p>Ceci affiche une popup en utilisant le propre service de notification du système d'exploitation:</p>
 
-<p><img alt="Notification of js13kPWA." src="https://mdn.mozillademos.org/files/15930/js13kpwa-notification.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+<p><img alt="Notification of js13kPWA." src="js13kpwa-notification.png"></p>
 
 <p>Une fois que l'utilisateur a confirmé qu'il veut recevoir des notifications, l'application peut alors lui afficher. Le résultat de l'action de l'utilisateur peut être default (défault), granted (autorisé) ou denied (interdit). L'option default est choisi quand l'utilisateur n'a pas fait de choix et les deux autres sont sélectionnées selon que l'utilisateur a respectivement cliqué sur oui ou non.</p>
 
@@ -66,7 +66,7 @@ button.addEventListener('click', function(e) {
 
 <p>La technologie en est toujours à ses tous débuts — certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">VAPID</a> (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les <a href="https://serviceworke.rs/push-payload.html">exemples du Cookbook des Service Workers</a>, essayer de mettre en place un serveur d'émission de messages utilisant <a href="https://firebase.google.com/">Firebase</a> ou construire votre propre serveur (en utilisant Node.js par exemple).</p>
 
-<p>Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article  <a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers</a>. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.</p>
+<p>Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article  <a href="/fr/docs/Web/Apps/Progressive/Offline_Service_workers">Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers</a>. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.</p>
 
 <pre class="brush: js">registration.pushManager.getSubscription() .then( /* ... */ );</pre>
 
diff --git a/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html
index 1c4f5401b9..0e809a6294 100644
--- a/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html
+++ b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html
@@ -11,18 +11,15 @@ translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_b
 translation_of_original: Web/Progressive_web_apps/Responsive
 original_slug: Web/Progressive_web_apps/Adaptative
 ---
-<div class="column-container summary">
-<div class="column-11">Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.</div>
 
-<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div>
-</div>
+<p>Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.</p>
 
 <h2 id="Guides">Guides</h2>
 
 <dl>
- <dt><a href="/fr/Apps/app_layout/responsive_design_building_blocks" lang="fr">Les fondations du design adaptatif</a></dt>
+ <dt><a href="/fr/Apps/app_layout/responsive_design_building_blocks">Les fondations du design adaptatif</a></dt>
  <dd>Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.</dd>
- <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first" lang="en">Mobile avant tout (<em>Mobile first</em>)</a></dt>
+ <dt><a href="/fr/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile avant tout (<em>Mobile first</em>)</a></dt>
  <dd>Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges.</dd>
 </dl>
 
@@ -72,8 +69,8 @@ original_slug: Web/Progressive_web_apps/Adaptative
 <h2 id="Voir_aussi">Voir aussi</h2>
 
 <dl>
- <dt><a href="/fr/Apps/Design/Design_graphique_pour_les_sites_responsiveGraphics_for_responsive_sites" lang="en">Graphiques dans les sites adaptatifs</a></dt>
+ <dt><a href="/fr/Apps/Design/Design_graphique_pour_les_sites_responsiveGraphics_for_responsive_sites">Graphiques dans les sites adaptatifs</a></dt>
  <dd>Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.</dd>
- <dt><a href="/fr/Apps/Design/Patrons_navigation_adaptative" lang="en">Modèle de navigation adaptative</a></dt>
+ <dt><a href="/fr/Apps/Design/Patrons_navigation_adaptative">Modèle de navigation adaptative</a></dt>
  <dd>Comment faire une interface aussi ressemblante et fonctionnelle sur téléphone mobile que sur bureau? Apprenez comment concevoir des interfaces qui changent pour s'adapter à l'écran de l'utilisateur.</dd>
 </dl>