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) --- .../add_to_home_screen/index.html | 40 ++++++++-------------- .../progressive_web_apps/app_structure/index.html | 16 ++++----- files/fr/web/progressive_web_apps/index.html | 18 +++------- .../installable_pwas/index.html | 22 ++++++------ .../progressive_web_apps/introduction/index.html | 24 ++++++------- .../fr/web/progressive_web_apps/loading/index.html | 10 +++--- .../offline_service_workers/index.html | 14 ++++---- .../re-engageable_notifications_push/index.html | 8 ++--- .../responsive_design_building_blocks/index.html | 13 +++---- 9 files changed, 71 insertions(+), 94 deletions(-) (limited to 'files/fr/web/progressive_web_apps') 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 --- -

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.

+

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.

Pourquoi A2HS?

@@ -25,38 +25,30 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs

Si vous avez Firefox pour Android, utilisez-le pour accéder à notre démonstration à https://mdn.github.io/pwa-examples/a2hs/ . 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.

-

- -

 

- -

 

+

Appuyez sur cette icône pour afficher une bannière de confirmation. Une pression sur le gros bouton + AJOUTER À L'ÉCRAN D'ACCUEIL 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.)

-

+

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.

-

+

-

Note : Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .

+

Note : Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .

-

 

-

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 Ajouter à l'écran d'accueil dans le menu principal de Chrome.

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.

-

+

Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus l'interface utilisateur du navigateur.

Que faut-il pour utiliser A2HS?

-

 

-

Pour permettre à votre application d'être ajoutée à un écran d'accueil, vous devez disposer des éléments suivants:

-

 

-

Manifest

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 fichier.webmanifest soit à la racine du site) avec le nom fichier.webmanifest (nous avons choisi manifest.webmanifest ). Il contient plusieurs champs qui définissent certaines informations sur l'application Web et sur son comportement. .

-

Note : L'extension .webmanifest 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 .json .

+

Note : L'extension .webmanifest 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 .json .

 

@@ -116,11 +106,11 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs

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

-

Lier le code HTML au "manifest"

+

Lier le code HTML au "manifest"

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:

-
< link rel = " manifest " href = "
+
< link rel = " manifest " href = "

Les navigateurs prenant en charge A2HS sauront où chercher votre manifeste une fois celui-ci en place.

@@ -137,12 +127,12 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs

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.

-

Note : 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 #enable-desktop-pwas sous macOS.

+

Note : 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 #enable-desktop-pwas sous macOS.

 

-

Ajout d'un bouton d'installation

+

Ajout d'un bouton d'installation

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:

@@ -156,7 +146,7 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs left: 1px; } -

JavaScript pour gérer l'installation

+

JavaScript pour gérer l'installation

Au bas de notre fichier index.js , nous avons ajouté du JavaScript pour gérer l'installation. Tout d'abord, nous déclarons une variable deferredPrompt (que nous expliquerons plus tard), obtenons une référence à notre bouton d'installation et le configurons pour display: none:

@@ -215,16 +205,16 @@ addBtn.style.display = 'none';

Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît.

-

+

Si l'utilisateur sélectionne Installer , l'application est installée (disponible en tant qu'application de bureau autonome) et le bouton Installer ne s'affiche plus (l'événement onbeforeinstallprompt 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:

-

+

Si l'utilisateur sélectionne Annuler , l'état de l'application revient à ce qu'il était avant le clic sur le bouton.

-

Note: Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.

+

Note : Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.

Voir aussi

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 ---
{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}
-

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 js13kPWA et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire.

+

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 js13kPWA et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire.

Architecture d'une application

@@ -18,7 +18,7 @@ translation_of: Web/Progressive_web_apps/App_structure

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

-

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'API Streams et dont nous parlerons brièvement.

+

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'API Streams et dont nous parlerons brièvement.

App shell

@@ -26,11 +26,11 @@ translation_of: Web/Progressive_web_apps/App_structure

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.

-

Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré dans le cache grâce à un service worker qui sera expliqué en détail dans le prochain article - pour le moment, concentrons-nous sur la structure en elle-même.

+

Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré dans le cache grâce à un service worker qui sera expliqué en détail dans le prochain article - pour le moment, concentrons-nous sur la structure en elle-même.

Pourquoi dois-je l'utiliser ?

-

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 l'ajouter à l'écran d'accueil ou l'envoi de notifications, 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.

+

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 l'ajouter à l'écran d'accueil ou l'envoi de notifications, 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.

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.

@@ -41,12 +41,12 @@ translation_of: Web/Progressive_web_apps/App_structure

Approche différente : les streams

-

Une approche totalement différente du rendu côté serveur - ou client - peut être obtenue à l'aide de l'API Streams. Avec un peu d'aide des service workers, les streams peuvent grandement améliorer la façon dont nous analysons le contenu.

+

Une approche totalement différente du rendu côté serveur - ou client - peut être obtenue à l'aide de l'API Streams. Avec un peu d'aide des service workers, les streams peuvent grandement améliorer la façon dont nous analysons le contenu.

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.

@@ -54,13 +54,13 @@ translation_of: Web/Progressive_web_apps/App_structure

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.

-

Pour voir des exemples fonctionnels et disposer de davantage d'information, voir la documention de l'API Streams.

+

Pour voir des exemples fonctionnels et disposer de davantage d'information, voir la documention de l'API Streams.

Structure de notre application exemple

La structure du site web js13kPWA est plutôt simple: elle consiste en un simple fichier HTML (index.html) avec un style CSS basique (style.css) et quelques images, scripts et polices de caractères. La structure du répertoire ressemble à ceci:

-

Folder structure of js13kPWA.

+

Folder structure of js13kPWA.

Le HTML

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

{{draft}}

-

PWA community logoLes applications Web progressives 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.

+

Les applications Web progressives 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.

-

Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : Secure contexts ({{Glossary("HTTPS")}}), un ou plusieurs Service Workers et un fichier manifest.

+

Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : Secure contexts ({{Glossary("HTTPS")}}), un ou plusieurs Service Workers et un fichier manifest.

Secure contexts (HTTPS)
@@ -39,8 +39,8 @@ translation_of: Web/Progressive_web_apps

{{LandingPageListSubpages}}

-
-

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.

+
+

Attention : 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.

Guides de base des PWA

@@ -58,8 +58,6 @@ translation_of: Web/Progressive_web_apps
  • Mise en place de votre environnement de développement d'applications web progressives
    • -
    -

    Guides technologiques

      @@ -74,9 +72,6 @@ translation_of: Web/Progressive_web_apps
    • Mobile first – 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.
    • Guide de l'ajout à l'écran d'accueil – découvrez comment vos applications peuvent tirer profit de l'ajout à l'écran d'accueil (A2HS).
    -
    - -

    Outils

      @@ -88,11 +83,6 @@ translation_of: Web/Progressive_web_apps
    • upup – un petit script qui assure que votre site est toujours là pour vos utilisateurs.
    • The service worker cookbook – une série d'excellentes recettes de service worker/push, montrant comment mettre en œuvre une application hors ligne, mais aussi bien plus.
    • WA VS Code extension – 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.
      • -
    -
    -
    - -
    • Apps web progressives sur Google Developers.
    • Applications Web progressives : Échapper aux tabulations sans perdre son âme par Alex Russell.
    • Liste de contrôle des applications Web progressives.
      • 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 ---
      {{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}
      -

      Dans l'article précédent, nous avons vu comment js13kPWA fonctionne en mode déconnecté grâce à son service worker, 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".

      +

      Dans l'article précédent, nous avons vu comment js13kPWA fonctionne en mode déconnecté grâce à son service worker, 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".

      -

      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.

      +

      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.

      Prérequis

      Pour rendre un site web installable, il a besoin que les éléments suivants soient mis en place:

        -
      • Un manifeste web, avec les bons champs renseignés
        • +
      • Un manifeste web, avec les bons champs renseignés
      • Le site web à servir depuis un domaine sécurisé (HTTPS)
      • Un icone représentant l'application sur l'appareil
      • Un service worker enregistré pour permettre à l'application de fonctionner en mode déconnecté (ceci n'est actuellement imposé que par Chrome pour Android)
        • @@ -31,7 +31,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs 
        <link rel="manifest" href="js13kpwa.webmanifest">
        -

        Note: Il existe quelques extensions courantes qui ont été utilisées pour les manifestes par le passé: manifest.webapp fut populaire pour les manifestes des applications Firefox OS et nombreux sont ceux qui utilisent manifest.json pour les manifestes web attendu que le contenu est organisé sous forme d'une structure JSON. Cependant, l'extension .webmanifest est explicitement mentionnée dans la W3C relative au manifeste, donc conformons nous à cela.

        +

        Note : Il existe quelques extensions courantes qui ont été utilisées pour les manifestes par le passé: manifest.webapp fut populaire pour les manifestes des applications Firefox OS et nombreux sont ceux qui utilisent manifest.json pour les manifestes web attendu que le contenu est organisé sous forme d'une structure JSON. Cependant, l'extension .webmanifest est explicitement mentionnée dans la W3C relative au manifeste, donc conformons nous à cela.

        Le contenu d'un fichier ressemble à ceci:

        @@ -72,7 +72,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
      • background_color: Une couleur de fond utilisée lors de l'installation et pour l'écran de chargement.
      -

      Le minimum requis pour un manifeste web est le nom (name) et au moins un icone (avec src, size et type). description, short_name et start_url sont recommandés. Il existe même plus de champs que ceux listés ci-dessus et que vous pouvez utiliser — voir la réference du Manifeste des Web Apps pour avoir davatange de détails.

      +

      Le minimum requis pour un manifeste web est le nom (name) et au moins un icone (avec src, size et type). description, short_name et start_url sont recommandés. Il existe même plus de champs que ceux listés ci-dessus et que vous pouvez utiliser — voir la réference du Manifeste des Web Apps pour avoir davatange de détails.

      Ajout à l'écran d'accueil

      @@ -80,19 +80,19 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

      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.

      -

      Add to Home screen popup of js13kPWA.

      +

      Add to Home screen popup of js13kPWA.

      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.

      -

      Install banner of js13kPWA.

      +

      Install banner of js13kPWA.

      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.

      -

      Add to Home screen popup of js13kPWA.

      +

      Add to Home screen popup of js13kPWA.

      Une fois la confirmation donnée, l'application sera installée sur l'écran d'accueil.

      -

      +

      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.

      @@ -100,7 +100,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

      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.

      -

      +

      L'icone et les couleurs du thème et du fond sont utilisés pour créer cet écran.

      @@ -108,7 +108,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

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

      -

      Pour plus d'information sur l'écran "Ajout à l'écran d'accueil", reportez-vous au guide d'ajout à l'écran d'accueil. 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.

      +

      Pour plus d'information sur l'écran "Ajout à l'écran d'accueil", reportez-vous au guide d'ajout à l'écran d'accueil. 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.

      Maintenant voyons la dernière pièce du puzzle PWA puzzle — ré-engagement via les notifications poussées.

      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 ---
      {{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}
      -

      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.

      +

      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.

      Qu'est-ce qu'une Progressive Web App?

      @@ -36,14 +36,14 @@ translation_of: Web/Progressive_web_apps/Introduction

      Il y a des principes clés qu'une application web devrait suivre afin d'être identifée comme une PWA. Elle doit être:

        -
      • Discoverable, afin que le contenu soit trouvé à l'aide de moteurs de recherche.
        • -
      • Installable, afin d'être disponible sur l'écran d'accueil de l'appareil.
        • -
      • Linkable, afin que vous puissiez la partager simplement en envoyant un lien. 
        • -
      • Network independent, afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet.
        • -
      • Progressive, afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers.
        • -
      • Re-engageable, afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible.
        • -
      • Responsive, 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.
        • -
      • Safe, 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.
        • +
      • Discoverable, afin que le contenu soit trouvé à l'aide de moteurs de recherche.
        • +
      • Installable, afin d'être disponible sur l'écran d'accueil de l'appareil.
        • +
      • Linkable, afin que vous puissiez la partager simplement en envoyant un lien. 
        • +
      • Network independent, afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet.
        • +
      • Progressive, afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers.
        • +
      • Re-engageable, afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible.
        • +
      • Responsive, 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.
        • +
      • Safe, 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.

      Est-ce que ça vaut le coup de faire tout ça ?

      @@ -51,7 +51,7 @@ translation_of: Web/Progressive_web_apps/Introduction

      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:

        -
      • Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des Service Workers, s'accompagnant aussi par une économie précieuse de bande passante et de temps.
        • +
      • Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des Service Workers, s'accompagnant aussi par une économie précieuse de bande passante et de temps.
      • 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.
      • 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.
      • Les utilisateurs sont plus engagés grâce à un système de notifications et de messages push, créant des utlisateurs plus impliqués apportant des taux de conversion plus élevés.
        • @@ -75,9 +75,9 @@ translation_of: Web/Progressive_web_apps/Introduction

        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.

        -

        L'ingrédient clé requis pour les PWA est le support des service worker. Heureusement les service workers sont désormais supportés sur tous les principaux navigateurs, sur ordinateur et sur téléphone mobile.

        +

        L'ingrédient clé requis pour les PWA est le support des service worker. Heureusement les service workers sont désormais supportés sur tous les principaux navigateurs, sur ordinateur et sur téléphone mobile.

        -

        D'autres fonctionnalités telles que Web App Manifest, Push, Notifications, et Add to Home Screen bénéficient également d'un large support. Juqu'à présent Safari a limité le support du Web App Manifest et Add to Home Screen, et ne supporte pas les notifications web push. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités.

        +

        D'autres fonctionnalités telles que Web App Manifest, Push, Notifications, et Add to Home Screen bénéficient également d'un large support. Juqu'à présent Safari a limité le support du Web App Manifest et Add to Home Screen, et ne supporte pas les notifications web push. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités.

        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.

        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.

        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 ---
        {{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}
        -

        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 exemple js13kPWA (voir également le code source). Nous examinerons comment ajouter la fonctionnalité mode déconnecté.

        +

        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 exemple js13kPWA (voir également le code source). Nous examinerons comment ajouter la fonctionnalité mode déconnecté.

        Les Service workers expliqués

        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.

        -

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

        +

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

        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.

        @@ -112,9 +112,9 @@ var contentToCache = appShellFiles.concat(gamesImages);

        Le service worker ne s'installe pas tant que le code de waitUntil 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.

        -

        caches 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 web storage 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).

        +

        caches 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 web storage 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).

        -

        Vous avez remarqué que nous n'avons pas mis en cache le fichier game.js. 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 : Web_Periodic_Background_Synchronization_API .

        +

        Vous avez remarqué que nous n'avons pas mis en cache le fichier game.js. 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 : Web_Periodic_Background_Synchronization_API .

        Activation

        @@ -191,7 +191,7 @@ self.addEventListener('install', (e) => { ); }); -

        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'espace de cache disponible dans le navigateur est limité, c'est donc une bonne idée de nettoyer derrière nous.

        +

        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'espace de cache disponible dans le navigateur est limité, c'est donc une bonne idée de nettoyer derrière nous.

        Autres cas d'usage

        @@ -199,9 +199,9 @@ self.addEventListener('install', (e) => {

        Résumé

        -

        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'API Service Worker et comment l'exploiter au mieux.

        +

        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'API Service Worker et comment l'exploiter au mieux.

        -

        Les Service Workers sont également utilisés pour gérer les push notifications — ceci sera expliqué dans un prochain article.

        +

        Les Service Workers sont également utilisés pour gérer les push notifications — ceci sera expliqué dans un prochain article.

        {{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}

        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 ---
        {{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}
        -

        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.

        +

        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.

        Deux APIs, un seul but

        -

        L'API Push et l'API Notifications 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.

        +

        L'API Push et l'API Notifications 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.

        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.

        @@ -35,7 +35,7 @@ button.addEventListener('click', function(e) {

        Ceci affiche une popup en utilisant le propre service de notification du système d'exploitation:

        -

        Notification of js13kPWA.

        +

        Notification of js13kPWA.

        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.

        @@ -66,7 +66,7 @@ button.addEventListener('click', function(e) {

        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 VAPID (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les exemples du Cookbook des Service Workers, essayer de mettre en place un serveur d'émission de messages utilisant Firebase ou construire votre propre serveur (en utilisant Node.js par exemple).

        -

        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  Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.

        +

        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  Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.

        registration.pushManager.getSubscription() .then( /* ... */ );
        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 --- -
        -
        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.
        -
        -
        +

        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.

        Guides

        -
        Les fondations du design adaptatif
        +
        Les fondations du design adaptatif
        Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.
        -
        Mobile avant tout (Mobile first)
        +
        Mobile avant tout (Mobile first)
        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.
        @@ -72,8 +69,8 @@ original_slug: Web/Progressive_web_apps/Adaptative

        Voir aussi

        -
        Graphiques dans les sites adaptatifs
        +
        Graphiques dans les sites adaptatifs
        Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.
        -
        Modèle de navigation adaptative
        +
        Modèle de navigation adaptative
        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.
        -- cgit v1.2.3-54-g00ecf