From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../web/progressive_web_apps/adaptative/index.html | 78 ---- .../add_to_home_screen/index.html | 240 +++++++++++++ .../ajouter_a_lecran_daccueil_a2hs/index.html | 240 ------------- .../web/progressive_web_apps/chargement/index.html | 151 -------- .../progressive_web_apps/identifiable/index.html | 60 ---- .../independante_du_reseau/index.html | 95 ----- .../progressive_web_apps/installable/index.html | 48 --- .../fr/web/progressive_web_apps/loading/index.html | 151 ++++++++ .../progressive_web_apps/partageable/index.html | 32 -- .../progressive_web_apps/progressive/index.html | 31 -- .../progressive_web_apps/re-engageable/index.html | 81 ----- .../re-engageable_notifications_push/index.html | 245 +++++++++++++ .../relancer_via_notifications_push/index.html | 245 ------------- .../responsive/media_types/index.html | 396 +++++++++++++++++++++ .../responsive_design_building_blocks/index.html | 78 ++++ .../web/progressive_web_apps/securisee/index.html | 34 -- 16 files changed, 1110 insertions(+), 1095 deletions(-) delete mode 100644 files/fr/web/progressive_web_apps/adaptative/index.html create mode 100644 files/fr/web/progressive_web_apps/add_to_home_screen/index.html delete mode 100644 files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html delete mode 100644 files/fr/web/progressive_web_apps/chargement/index.html delete mode 100644 files/fr/web/progressive_web_apps/identifiable/index.html delete mode 100644 files/fr/web/progressive_web_apps/independante_du_reseau/index.html delete mode 100644 files/fr/web/progressive_web_apps/installable/index.html create mode 100644 files/fr/web/progressive_web_apps/loading/index.html delete mode 100644 files/fr/web/progressive_web_apps/partageable/index.html delete mode 100644 files/fr/web/progressive_web_apps/progressive/index.html delete mode 100644 files/fr/web/progressive_web_apps/re-engageable/index.html create mode 100644 files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html delete mode 100644 files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html create mode 100644 files/fr/web/progressive_web_apps/responsive/media_types/index.html create mode 100644 files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html delete mode 100644 files/fr/web/progressive_web_apps/securisee/index.html (limited to 'files/fr/web/progressive_web_apps') diff --git a/files/fr/web/progressive_web_apps/adaptative/index.html b/files/fr/web/progressive_web_apps/adaptative/index.html deleted file mode 100644 index f29786204c..0000000000 --- a/files/fr/web/progressive_web_apps/adaptative/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Adaptative -slug: Web/Progressive_web_apps/Adaptative -tags: - - Applications - - Design adaptatif - - Media Queries - - flexbox - - viewport -translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -translation_of_original: Web/Progressive_web_apps/Responsive ---- -
-
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
-
Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.
-
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.
-
- -

Technologies

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Media queriesPermet de définir des conditions permettant aux styles d'être appliqués aux contenus en fonction de l'affichage disponible (viewport), de la résolution, de l'orientation, etc.Répandu sur les navigateurs modernes (plus de détails)Media Queries Level 4
@viewport/viewport meta tagContrôler la configuration du viewport, principalement sur les appareils mobiles.@viewport: Expérimental (plus de détails)
- Viewport meta tag: Répandu sur les appareils mobiles modernes		CSS Device Adaptation Module Level 1
FlexboxUne fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative.Répandu sur les navigateurs modernes (plus de détail)CSS Flexible Box Layout Module Level 1
- -

Outils

- -
-
Modernizr
-
Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées.
-
css3-mediaqueries-js
-
Un polyfill en JavaScript pour assurer le support de media query aux anciennes versions de IE (5+.)
-
- -

Voir aussi

- -
-
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
-
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.
-
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 new file mode 100644 index 0000000000..65f077b50d --- /dev/null +++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html @@ -0,0 +1,240 @@ +--- +title: Ajouter à l'écran d'accueil +slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs +tags: + - Ajouter à l'écran d'accueil + - HTML + - Manifest + - PWA +translation_of: Web/Progressive_web_apps/Add_to_home_screen +--- +

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?

+ +

On pense que A2HS fait partie de la philosophie des applications Web progressives : offrir aux applications Web les mêmes avantages en matière d'expérience utilisateur que les applications natives. Cela fait partie du simple geste d’accéder à une application en appuyant sur son icône sur votre écran d’accueil, puis en l’affichant proprement dans sa propre fenêtre. A2HS rend cela possible.

+ +

Quels navigateurs prennent en charge A2HS?

+ +

A2HS est pris en charge par Mobile Chrome / Android Webview depuis la version 31, Opera pour Android depuis la version 32 et Firefox pour Android depuis la version 58 .

+ +

Comment l'utiliser?

+ +

Nous avons écrit un exemple de site Web très simple ( voir la démo, et le code source ) qui ne fait pas grand chose, mais qui a été développé avec le code nécessaire pour pouvoir l'ajouter à un écran d'accueil. en tant qu'agent de service enregistré pour lui permettre d'être utilisé en mode hors connexion. L'exemple montre une série d'images de renard.

+ +

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 .

+
+ +

 

+ +

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 .

+
+ +

 

+ +

Les champs nécessaires pour A2HS sont les suivants:

+ + + +

Le fichier "manifest" de notre exemple ressemble à ceci:

+ +
{
+  "background_color": "purple",
+  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "icon/fox-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "name": "Awesome fox pictures",
+  "short_name": "Foxes",
+  "start_url": "/pwa-examples/a2hs/index.html"
+}
+ +

Icône

+ +

 

+ +

Comme indiqué dans le "manifest" ci-dessus, nous incluons une icône de 192 x 192 px. Vous pouvez inclure plus de tailles si vous le souhaitez. Android choisira la taille la plus appropriée pour chaque cas d'utilisation différent. Vous pouvez également décider d'inclure différents types d'icônes afin que les appareils puissent utiliser le meilleur qu'ils puissent (par exemple, Chrome prend déjà en charge le format WebP).

+ +

Notez que le membre de type dans l'objet de chaque icône spécifie le type MIME de l'icône, afin que le navigateur puisse rapidement identifier le type de l'icône, puis l'ignorer et passer à une autre icône s'il ne le prend pas en charge.

+ +

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"

+ +

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 = "
+ +

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

+ +

Qu'est-ce que A2HS ne vous donne pas?

+ +

 

+ +

N'oubliez pas que lorsque vous ajoutez une application à votre écran d'accueil, cela la rend simplement facilement accessible. Elle ne télécharge pas les ressources et les données de l'application sur votre appareil et ne la rend pas disponible hors connexion, ou quelque chose du genre. Pour que votre application fonctionne en mode hors connexion, vous devez utiliser l' API Service Worker pour gérer le stockage hors connexion et, si nécessaire, le stockage Web ou IndexedDB pour stocker ses données.

+ +

Dans notre exemple d'application, nous venons d'utiliser un agent de service pour stocker tous les fichiers nécessaires. Le fichier index.js est inscrit sur le site avec le bloc de code final dans le fichier index.js . Nous mettons ensuite en cache toutes les ressources du site à l'aide de l' API de cache et les servons à partir du cache plutôt que du réseau à l'aide du code contenu dans le fichier sw.js.

+ +

A2HS sur le bureau

+ +

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.

+
+ +

 

+ +

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:

+ +
<button class="add-button">Add to home screen</button>
+ +

Nous lui avons ensuite donné un style simple:

+ +
.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}
+ +

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:

+ +
let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';
+ +

Nous masquons le bouton initialement car le PWA ne sera pas disponible pour l’installation tant qu’il ne respectera pas les critères A2HS. Lorsque cela se produit, les navigateurs prenant en charge déclenchent un événement beforeinstallprompt . Nous pouvons ensuite utiliser un gestionnaire comme celui ci-dessous pour gérer l'installation:

+ +

 

+ +
window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI to notify the user they can add to home screen
+  addBtn.style.display = 'block';
+
+  addBtn.addEventListener('click', (e) => {
+    // hide our user interface that shows our A2HS button
+    addBtn.style.display = 'none';
+    // Show the prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});
+ +

 

+ +

Ici il faut:

+ + + +

Le gestionnaire de clics contient les étapes suivantes:

+ + + +

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.

+
+ +

Voir aussi

+ +

 

+ + + +

 

diff --git a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html b/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html deleted file mode 100644 index 65f077b50d..0000000000 --- a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Ajouter à l'écran d'accueil -slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs -tags: - - Ajouter à l'écran d'accueil - - HTML - - Manifest - - PWA -translation_of: Web/Progressive_web_apps/Add_to_home_screen ---- -

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?

- -

On pense que A2HS fait partie de la philosophie des applications Web progressives : offrir aux applications Web les mêmes avantages en matière d'expérience utilisateur que les applications natives. Cela fait partie du simple geste d’accéder à une application en appuyant sur son icône sur votre écran d’accueil, puis en l’affichant proprement dans sa propre fenêtre. A2HS rend cela possible.

- -

Quels navigateurs prennent en charge A2HS?

- -

A2HS est pris en charge par Mobile Chrome / Android Webview depuis la version 31, Opera pour Android depuis la version 32 et Firefox pour Android depuis la version 58 .

- -

Comment l'utiliser?

- -

Nous avons écrit un exemple de site Web très simple ( voir la démo, et le code source ) qui ne fait pas grand chose, mais qui a été développé avec le code nécessaire pour pouvoir l'ajouter à un écran d'accueil. en tant qu'agent de service enregistré pour lui permettre d'être utilisé en mode hors connexion. L'exemple montre une série d'images de renard.

- -

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 .

-
- -

 

- -

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 .

-
- -

 

- -

Les champs nécessaires pour A2HS sont les suivants:

- - - -

Le fichier "manifest" de notre exemple ressemble à ceci:

- -
{
-  "background_color": "purple",
-  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
-  "display": "fullscreen",
-  "icons": [
-    {
-      "src": "icon/fox-icon.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
-  "name": "Awesome fox pictures",
-  "short_name": "Foxes",
-  "start_url": "/pwa-examples/a2hs/index.html"
-}
- -

Icône

- -

 

- -

Comme indiqué dans le "manifest" ci-dessus, nous incluons une icône de 192 x 192 px. Vous pouvez inclure plus de tailles si vous le souhaitez. Android choisira la taille la plus appropriée pour chaque cas d'utilisation différent. Vous pouvez également décider d'inclure différents types d'icônes afin que les appareils puissent utiliser le meilleur qu'ils puissent (par exemple, Chrome prend déjà en charge le format WebP).

- -

Notez que le membre de type dans l'objet de chaque icône spécifie le type MIME de l'icône, afin que le navigateur puisse rapidement identifier le type de l'icône, puis l'ignorer et passer à une autre icône s'il ne le prend pas en charge.

- -

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"

- -

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

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

- -

Qu'est-ce que A2HS ne vous donne pas?

- -

 

- -

N'oubliez pas que lorsque vous ajoutez une application à votre écran d'accueil, cela la rend simplement facilement accessible. Elle ne télécharge pas les ressources et les données de l'application sur votre appareil et ne la rend pas disponible hors connexion, ou quelque chose du genre. Pour que votre application fonctionne en mode hors connexion, vous devez utiliser l' API Service Worker pour gérer le stockage hors connexion et, si nécessaire, le stockage Web ou IndexedDB pour stocker ses données.

- -

Dans notre exemple d'application, nous venons d'utiliser un agent de service pour stocker tous les fichiers nécessaires. Le fichier index.js est inscrit sur le site avec le bloc de code final dans le fichier index.js . Nous mettons ensuite en cache toutes les ressources du site à l'aide de l' API de cache et les servons à partir du cache plutôt que du réseau à l'aide du code contenu dans le fichier sw.js.

- -

A2HS sur le bureau

- -

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.

-
- -

 

- -

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:

- -
<button class="add-button">Add to home screen</button>
- -

Nous lui avons ensuite donné un style simple:

- -
.add-button {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-}
- -

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:

- -
let deferredPrompt;
-const addBtn = document.querySelector('.add-button');
-addBtn.style.display = 'none';
- -

Nous masquons le bouton initialement car le PWA ne sera pas disponible pour l’installation tant qu’il ne respectera pas les critères A2HS. Lorsque cela se produit, les navigateurs prenant en charge déclenchent un événement beforeinstallprompt . Nous pouvons ensuite utiliser un gestionnaire comme celui ci-dessous pour gérer l'installation:

- -

 

- -
window.addEventListener('beforeinstallprompt', (e) => {
-  // Prevent Chrome 67 and earlier from automatically showing the prompt
-  e.preventDefault();
-  // Stash the event so it can be triggered later.
-  deferredPrompt = e;
-  // Update UI to notify the user they can add to home screen
-  addBtn.style.display = 'block';
-
-  addBtn.addEventListener('click', (e) => {
-    // hide our user interface that shows our A2HS button
-    addBtn.style.display = 'none';
-    // Show the prompt
-    deferredPrompt.prompt();
-    // Wait for the user to respond to the prompt
-    deferredPrompt.userChoice.then((choiceResult) => {
-        if (choiceResult.outcome === 'accepted') {
-          console.log('User accepted the A2HS prompt');
-        } else {
-          console.log('User dismissed the A2HS prompt');
-        }
-        deferredPrompt = null;
-      });
-  });
-});
- -

 

- -

Ici il faut:

- - - -

Le gestionnaire de clics contient les étapes suivantes:

- - - -

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.

-
- -

Voir aussi

- -

 

- - - -

 

diff --git a/files/fr/web/progressive_web_apps/chargement/index.html b/files/fr/web/progressive_web_apps/chargement/index.html deleted file mode 100644 index 72ce203f4f..0000000000 --- a/files/fr/web/progressive_web_apps/chargement/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Chargement progressif -slug: Web/Progressive_web_apps/Chargement -tags: - - Chargement -translation_of: Web/Progressive_web_apps/Loading ---- -
{{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.

- -

Première visualisation signifiante

- -

Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible  — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné.

- -

Ceci peut être réalisé grâce au chargement progressif — également appelé Lazy loading. Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience.

- -

Mise en paquet versus éclatement

- -

De nombreux visiteurs ne naviguerons pas sur la totalité des pages d'un site web bien que l'approche habituelle consiste à mettre dans un paquet toutes les fonctionnalités que nous avons dans un seul gros fichier. Un fichier bundle.js peut peser plusieurs megaoctets et un unique paquet style.css peut tout contenir, depuis les définitions de base des structures CSS à tous les styles possibles de toutes les versions d'un site: mobile, tablette, ordinateur de bureau, pour l'impression, etc.

- -

Il est plus rapide de télécharger toutes les informations sous la forme d'un unique fichier plutôt que beaucoup de petits, mais si l'utilisateur n'a pas besoin de tout au tout début, nous pourrions ne télécharger que ce qui est crucial puis gérer les autres ressources quand elles sont nécessaires.

- -

Render-blocking resources

- -

Créer des paquets est un problème car le navigateur doit charger le HTML, le CSS et le JavaScript avant qu'il ne puisse afficher le rendu du résultat à l'écran. Pendant les quelques secondes séparant l'accès l'initial au site web et la fin du téléchargement, l'utilisateur voit une page blanche ce qui est une mauvaise expérience.

- -

Pour corriger ça, nous pouvons, par exemple, ajouter defer aux fichiers JavaScript:

- -
<script src="app.js" defer></script>
-
- -

Ils seront téléchargés et exécutés après que le document lui-même a été analys"si bien qu'il ne bloquera pas le rendu de la structure HTML. Nous pouvons également éclater les fichiers css et leur ajouter des types de media:

- -
<link rel="stylesheet" href="style.css">
-<link rel="stylesheet" href="print.css" media="print">
-
- -

Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie.

- -

Dans notre application de démonstration js13kPWA, le CSS est suffisamment simple pour tout laisser dans un seul fichier sans règle spécifique sur la façon de les charger. Nous pourrions même aller plus loin et déplacer tout ce qui se trouve dans style.css dans la balise <style> dans le <head> de index.html — ceci améliorerait encore plus la performance mais pour la lisibilité de l'exemple, nous nous passerons aussi de cette approche.

- -

Images

- -

En plus du JavaScript et du CSS, les sites web contiendront certainement un certain nombre d'images. Quand vous incluez des éléments {{htmlelement("img")}} dans votre HTML, chaque image référencée est alors recherchée et téléchargée lors de l'accès initial au site web. Il n'est pas inhabituel d'avoir des mégaoctets de données d'images à télécharger avant d'annoncer que le site est prêt, mais ceci, une nouvelle fois, crée une mauvaise perception de performance. Nous n'avons pas besoin de toutes les images dans la meilleure qualité possible au tout début de la consultation du site.

- -

Ceci peut être optimisé. Tout d'abord, vous devriez utiliser des outils ou des services tels que TinyPNG qui réduit la taille de fichier de vos images sans trop en altérer la qualité. Si vous avez dépassé ce stade, vous pouvez alors commencer à penser à optimiser le chargement des images en utilisant JavaScript. Nous expliquerons cela plus loin.

- -

Image conteneur

- -

Plutôt que d'avoir toutes les captures d'écran des jeux référencés dans les attributs src des éléments <img>, ce qui forcera le navigateur à les télécharger automatiquement, nous pouvons le faire de manière sélective via JavaScript. L'application js13kPWA utilise à la place une image conteneur qui est petite et légère tandis que les chemins d'accès définitifs vers les images cibles sont stockées dans les attributs data-src:

- -
<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
-
- -

Ces images seront téléchargées via JavaScript après que le site aura fini de construire la structure HTML. L'image conteneur est dimensionnée de la même façon que les images originales le sont, si bien qu'elle occupera le même espace et n'obligera pas le navigateur à redessiner l'agencement quand les images sont téléchargées.

- -

Chargement via JavaScript

- -

Le fichier app.js traite les attributs data-src comme ceci:

- -
let imagesToLoad = document.querySelectorAll('img[data-src]');
-const loadImages = (image) => {
-  image.setAttribute('src', image.getAttribute('data-src'));
-  image.onload = () => {
-    image.removeAttribute('data-src');
-  };
-};
- -

La variable imagesToLoad contient des références à toutes les images, tandis que la fonction loadImages déplace le chemin d'accès de data-src à src. Quand toutes les images sont effectivement téléchargées, nous supprimons leur attribut data-src attendu qu'ls ne sont désormais plus nécessaires. Ensuite, nous bouclons sur chacune des images et nous la chargeons:

- -
imagesToLoad.forEach((img) => {
-  loadImages(img);
-});
- -

Flou en CSS

- -

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

- -

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:

- -
article img[data-src] {
-  filter: blur(0.2em);
-}
-
-article img {
-  filter: blur(0em);
-  transition: filter 0.5s;
-}
- -

Ceci supprimera l'effet de flou en une demie seconde, ce qui paraît assez bien pour l'effet de "chargement".

- -

Chargement à la demande

- -

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.

- -

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.

- -

Voici à quoi le code correspondant ressemble:

- -
if('IntersectionObserver' in window) {
-  const observer = new IntersectionObserver((items, observer) => {
-    items.forEach((item) => {
-      if(item.isIntersecting) {
-        loadImages(item.target);
-        observer.unobserve(item.target);
-      }
-    });
-  });
-  imagesToLoad.forEach((img) => {
-    observer.observe(img);
-  });
-} else {
-  imagesToLoad.forEach((img) => {
-    loadImages(img);
-  });
-}
- -

Si l'objet {{domxref("IntersectionObserver")}} est pris en charge, l'application en crée une nouvelle instance. La fonction passée en paramètre gère le cas où un ou plusieurs objets ont une intersection avec l'observer (i.e. apparaît à l'intérieur du viewport). Nous pouvons itérer sur chaque cas et réagir en conséquence — quand l'image est visible, nous chargeons l'image correcte et nous arrêtons de l'observer vu que nous n'avons désormais plus le faire.

- -

Répétons notre avertissement précédent concernant l'amélioration progressive — le code est écrit de telle sorte que l'application fonctionnera que l'Intersection Observer soit pris en charge ou pas. S'il ne l'est pas, nous chargeons simplement les images en utilisant une approche plus basique présentée précédemment.

- -

Améliorations

- -

Rappelez-vous qu'il y a de nombreuses façons d'optimiser les temps de chargement et cet exemple explore seulement l'une d'elles. Vous pourriez essayer de blinder davantage votre application en lui permettant de fonctionner sans JavaScript — soit en utilisant {{htmlelement("noscript")}} pour afficher l'image avec le src final déjà renseigné ou en enrobant les balises <img> avec des éléments {{htmlelement("a")}} pointant vers les images cibles de telle sorte que l'utilisateur puisse cliquer pour y accéder quand il le souhaite.

- -

Nous ne le ferons pas car l'application elle-même dépend de JavaScript — sans lui, la liste des jeux ne sera même pas chargée et le code du Service Worker ne s'exécutera pas.

- -

Nous pourrions réécrire le processus de chargement  pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs.

- -

Conclusion

- -

Moins de fichiers à charger initialement, de plus petits fichiers répartis en modules, l'utilisation de conteneurs de placement et le chargement de davantage de contenu à la demande — ceci aidera à obtenir des temps de chargement initiaux plus rapides, ce qui profite au créateur de l'application et offre une expérience plus fluide à l'utilisateur.

- -

Rappelez-vous de ce que nous avons dit concernant l'approche d'amélioration progressive — offrir un produit utilisable quel que soit l'appareil ou la plateforme, mais s'assurer d'enrichir l'expérience pour ceux qui utilisent des navigateurs modernes.

- -

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.

- -

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.

- -

{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}

- -

{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}

diff --git a/files/fr/web/progressive_web_apps/identifiable/index.html b/files/fr/web/progressive_web_apps/identifiable/index.html deleted file mode 100644 index 3bea56aaa7..0000000000 --- a/files/fr/web/progressive_web_apps/identifiable/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Identifiable -slug: Web/Progressive_web_apps/Identifiable -tags: - - Applications - - Identifiable - - Manifeste - - Manifeste Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Discoverable ---- -
-
Dès lors que vous publiez une application web, vous voulez que le monde le sache. Les moteurs de recherche le font, mais souvent on souhaite plus de contrôle sur comment l'application sera affichée dans les résultats de la recherche. Le nouveau manifeste du W3C pour les applications web peut aider à cela, ainsi que pour d'autres fonctionnalités.
- -
-
- -

Objectifs éventuels des applications web:

- - - -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Manifeste des applications webDéfinit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, pour une utilisation dans un contexte comme l'affichage sur une liste d'applications ou sur l'écran d'accueil de l'appareil.Expérimental, supporté dans Chrome, support limité dans Firefox (plus de détails){{SpecName('Manifest')}}
- -

Outils

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussi

- -
-
Open Graph
-
Un standard, defacto, fournissant un format pour spécifier des méta-données similaires dans la balise HTML <head> en utilisant les meta tags. Supporté par Facebook et d'autres domaines.
-
diff --git a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html b/files/fr/web/progressive_web_apps/independante_du_reseau/index.html deleted file mode 100644 index 52bcf0a121..0000000000 --- a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Indépendante du réseau -slug: Web/Progressive_web_apps/Independante_du_reseau -tags: - - App shell - - Applications - - IndexedDB - - Indépendante du réseau - - Service Workers - - hors-ligne - - localStorage -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Network_independent ---- -
-
Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.
- -
-
- -

Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :

- - - -

Guides

- -
-
Utiliser les service workers
-
Un guide simple pour débutant à l'API Service Worker.
-
Utiliser IndexedDB
-
Les bases concernant IndexedDB, expliquées en détails.
-
Utiliser l'API Web Storage
-
L'API Web Storage en toute simplicité.
-
Chargement rapide des applications web avec l'architecture App Shell
-
Un guide pour utiliser le coding pattern App Shell pour créer des applications qui se chargent rapidement.
-
- -

Technologies

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Service workersJavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (fetch) et l'envoi (push) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.Expérimental : Chrome et Firefox (plus de détails){{SpecName('Service Workers')}}
IndexedDBUn système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.Répandu dans les navigateurs modernes (plus de détails){{SpecName('IndexedDB')}}
Web StorageUne API simple de stockage de clé/valeurs côté client.Répandu (plus de détails){{SpecName('Web Storage')}}
- -

Outils

- -
-
localForage
-
Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.
-
ServiceWorkerWare
-
Un micro-framework similaire à Express pour le développement simple d'un service worker.
-
oghliner
-
Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.
-
sw-precache
-
Un module Node pour générer le code d'un service worker qui va mettre en pré-cache des ressources spécifiques.
-
upup
-
Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.
-
- -

Voir aussi

- -
-
The service worker cookbook
-
Une série de très bonnes ressources concernant les services workers, montrant comment implémenter une application web hors-ligne, et plus encore.
-
diff --git a/files/fr/web/progressive_web_apps/installable/index.html b/files/fr/web/progressive_web_apps/installable/index.html deleted file mode 100644 index 1692b10b1d..0000000000 --- a/files/fr/web/progressive_web_apps/installable/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Installable -slug: Web/Progressive_web_apps/Installable -tags: - - Applications - - Installable - - Manifeste -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Installable ---- -
-
Une partie basique de l'expérience avec l'application, pour un utilisateur, est d'avoir l'icône sur l'écran d'accueil et être capable de l'ouvrir dans son propre conteneur avec une bonne intégration avec la plateforme système sous-jacente. Les applications web modernes peuvent avoir ce sentiment d'application native.
- -
-
- -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Manifeste des applications webDéfinit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, pour une utilisation dans un contexte comme l'affichage sur une liste d'applications ou sur l'écran d'accueil de l'appareil.Expérimental, supporté dans Chrome, support limité dans Firefox (plus de détails){{SpecName('Manifest')}}
- -

Outils

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussi

- -

Ajouter un lien vers des informations liées.

diff --git a/files/fr/web/progressive_web_apps/loading/index.html b/files/fr/web/progressive_web_apps/loading/index.html new file mode 100644 index 0000000000..72ce203f4f --- /dev/null +++ b/files/fr/web/progressive_web_apps/loading/index.html @@ -0,0 +1,151 @@ +--- +title: Chargement progressif +slug: Web/Progressive_web_apps/Chargement +tags: + - Chargement +translation_of: Web/Progressive_web_apps/Loading +--- +
{{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.

+ +

Première visualisation signifiante

+ +

Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible  — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné.

+ +

Ceci peut être réalisé grâce au chargement progressif — également appelé Lazy loading. Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience.

+ +

Mise en paquet versus éclatement

+ +

De nombreux visiteurs ne naviguerons pas sur la totalité des pages d'un site web bien que l'approche habituelle consiste à mettre dans un paquet toutes les fonctionnalités que nous avons dans un seul gros fichier. Un fichier bundle.js peut peser plusieurs megaoctets et un unique paquet style.css peut tout contenir, depuis les définitions de base des structures CSS à tous les styles possibles de toutes les versions d'un site: mobile, tablette, ordinateur de bureau, pour l'impression, etc.

+ +

Il est plus rapide de télécharger toutes les informations sous la forme d'un unique fichier plutôt que beaucoup de petits, mais si l'utilisateur n'a pas besoin de tout au tout début, nous pourrions ne télécharger que ce qui est crucial puis gérer les autres ressources quand elles sont nécessaires.

+ +

Render-blocking resources

+ +

Créer des paquets est un problème car le navigateur doit charger le HTML, le CSS et le JavaScript avant qu'il ne puisse afficher le rendu du résultat à l'écran. Pendant les quelques secondes séparant l'accès l'initial au site web et la fin du téléchargement, l'utilisateur voit une page blanche ce qui est une mauvaise expérience.

+ +

Pour corriger ça, nous pouvons, par exemple, ajouter defer aux fichiers JavaScript:

+ +
<script src="app.js" defer></script>
+
+ +

Ils seront téléchargés et exécutés après que le document lui-même a été analys"si bien qu'il ne bloquera pas le rendu de la structure HTML. Nous pouvons également éclater les fichiers css et leur ajouter des types de media:

+ +
<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="print.css" media="print">
+
+ +

Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie.

+ +

Dans notre application de démonstration js13kPWA, le CSS est suffisamment simple pour tout laisser dans un seul fichier sans règle spécifique sur la façon de les charger. Nous pourrions même aller plus loin et déplacer tout ce qui se trouve dans style.css dans la balise <style> dans le <head> de index.html — ceci améliorerait encore plus la performance mais pour la lisibilité de l'exemple, nous nous passerons aussi de cette approche.

+ +

Images

+ +

En plus du JavaScript et du CSS, les sites web contiendront certainement un certain nombre d'images. Quand vous incluez des éléments {{htmlelement("img")}} dans votre HTML, chaque image référencée est alors recherchée et téléchargée lors de l'accès initial au site web. Il n'est pas inhabituel d'avoir des mégaoctets de données d'images à télécharger avant d'annoncer que le site est prêt, mais ceci, une nouvelle fois, crée une mauvaise perception de performance. Nous n'avons pas besoin de toutes les images dans la meilleure qualité possible au tout début de la consultation du site.

+ +

Ceci peut être optimisé. Tout d'abord, vous devriez utiliser des outils ou des services tels que TinyPNG qui réduit la taille de fichier de vos images sans trop en altérer la qualité. Si vous avez dépassé ce stade, vous pouvez alors commencer à penser à optimiser le chargement des images en utilisant JavaScript. Nous expliquerons cela plus loin.

+ +

Image conteneur

+ +

Plutôt que d'avoir toutes les captures d'écran des jeux référencés dans les attributs src des éléments <img>, ce qui forcera le navigateur à les télécharger automatiquement, nous pouvons le faire de manière sélective via JavaScript. L'application js13kPWA utilise à la place une image conteneur qui est petite et légère tandis que les chemins d'accès définitifs vers les images cibles sont stockées dans les attributs data-src:

+ +
<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
+
+ +

Ces images seront téléchargées via JavaScript après que le site aura fini de construire la structure HTML. L'image conteneur est dimensionnée de la même façon que les images originales le sont, si bien qu'elle occupera le même espace et n'obligera pas le navigateur à redessiner l'agencement quand les images sont téléchargées.

+ +

Chargement via JavaScript

+ +

Le fichier app.js traite les attributs data-src comme ceci:

+ +
let imagesToLoad = document.querySelectorAll('img[data-src]');
+const loadImages = (image) => {
+  image.setAttribute('src', image.getAttribute('data-src'));
+  image.onload = () => {
+    image.removeAttribute('data-src');
+  };
+};
+ +

La variable imagesToLoad contient des références à toutes les images, tandis que la fonction loadImages déplace le chemin d'accès de data-src à src. Quand toutes les images sont effectivement téléchargées, nous supprimons leur attribut data-src attendu qu'ls ne sont désormais plus nécessaires. Ensuite, nous bouclons sur chacune des images et nous la chargeons:

+ +
imagesToLoad.forEach((img) => {
+  loadImages(img);
+});
+ +

Flou en CSS

+ +

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

+ +

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:

+ +
article img[data-src] {
+  filter: blur(0.2em);
+}
+
+article img {
+  filter: blur(0em);
+  transition: filter 0.5s;
+}
+ +

Ceci supprimera l'effet de flou en une demie seconde, ce qui paraît assez bien pour l'effet de "chargement".

+ +

Chargement à la demande

+ +

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.

+ +

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.

+ +

Voici à quoi le code correspondant ressemble:

+ +
if('IntersectionObserver' in window) {
+  const observer = new IntersectionObserver((items, observer) => {
+    items.forEach((item) => {
+      if(item.isIntersecting) {
+        loadImages(item.target);
+        observer.unobserve(item.target);
+      }
+    });
+  });
+  imagesToLoad.forEach((img) => {
+    observer.observe(img);
+  });
+} else {
+  imagesToLoad.forEach((img) => {
+    loadImages(img);
+  });
+}
+ +

Si l'objet {{domxref("IntersectionObserver")}} est pris en charge, l'application en crée une nouvelle instance. La fonction passée en paramètre gère le cas où un ou plusieurs objets ont une intersection avec l'observer (i.e. apparaît à l'intérieur du viewport). Nous pouvons itérer sur chaque cas et réagir en conséquence — quand l'image est visible, nous chargeons l'image correcte et nous arrêtons de l'observer vu que nous n'avons désormais plus le faire.

+ +

Répétons notre avertissement précédent concernant l'amélioration progressive — le code est écrit de telle sorte que l'application fonctionnera que l'Intersection Observer soit pris en charge ou pas. S'il ne l'est pas, nous chargeons simplement les images en utilisant une approche plus basique présentée précédemment.

+ +

Améliorations

+ +

Rappelez-vous qu'il y a de nombreuses façons d'optimiser les temps de chargement et cet exemple explore seulement l'une d'elles. Vous pourriez essayer de blinder davantage votre application en lui permettant de fonctionner sans JavaScript — soit en utilisant {{htmlelement("noscript")}} pour afficher l'image avec le src final déjà renseigné ou en enrobant les balises <img> avec des éléments {{htmlelement("a")}} pointant vers les images cibles de telle sorte que l'utilisateur puisse cliquer pour y accéder quand il le souhaite.

+ +

Nous ne le ferons pas car l'application elle-même dépend de JavaScript — sans lui, la liste des jeux ne sera même pas chargée et le code du Service Worker ne s'exécutera pas.

+ +

Nous pourrions réécrire le processus de chargement  pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs.

+ +

Conclusion

+ +

Moins de fichiers à charger initialement, de plus petits fichiers répartis en modules, l'utilisation de conteneurs de placement et le chargement de davantage de contenu à la demande — ceci aidera à obtenir des temps de chargement initiaux plus rapides, ce qui profite au créateur de l'application et offre une expérience plus fluide à l'utilisateur.

+ +

Rappelez-vous de ce que nous avons dit concernant l'approche d'amélioration progressive — offrir un produit utilisable quel que soit l'appareil ou la plateforme, mais s'assurer d'enrichir l'expérience pour ceux qui utilisent des navigateurs modernes.

+ +

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.

+ +

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.

+ +

{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}

+ +

{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}

diff --git a/files/fr/web/progressive_web_apps/partageable/index.html b/files/fr/web/progressive_web_apps/partageable/index.html deleted file mode 100644 index 98ad67f276..0000000000 --- a/files/fr/web/progressive_web_apps/partageable/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Partageable -slug: Web/Progressive_web_apps/Partageable -tags: - - Applications - - Applications web modernes - - Applications web progressives - - Partageable -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Linkable ---- -
-
Une des fonctions les plus puissantes du Web est d'être capable de relier une application web à un lien URL spécifique — pas besoin de plateforme d'application, pas de processus complexe d'installation. Cela a toujours été comme ça.
- -
-
- -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- -

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !

- -

Outils

- -

Ajouter un lien vers un outil ou une bibliothèque utile.

- -

Voir aussi

- -

Ajouter un lien vers des informations liées.

diff --git a/files/fr/web/progressive_web_apps/progressive/index.html b/files/fr/web/progressive_web_apps/progressive/index.html deleted file mode 100644 index d4c0de5453..0000000000 --- a/files/fr/web/progressive_web_apps/progressive/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Progressive -slug: Web/Progressive_web_apps/Progressive -tags: - - Amélioration progressive - - Applications - - Design adaptatif -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Progressive ---- -
-
Les applications web modernes peuvent être développées pour fournir une experience vraiment agréable avec les navigateurs complètement compatibles, et une expérience correcte (mais pas aussi brillante) avec les navigateurs moins aptes. Nous avons fait cela pendant des années avec de bonnes pratiques comme l'amélioration progressive, donc gardons cette bonne manière de faire les choses.
- -
-
- -

GuidesEdit

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

TechnologiesEdit

- -

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça depuis longtemps !

- -

OutilsEdit

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussiEdit

- -

Ajouter un lien vers des informations liées.

diff --git a/files/fr/web/progressive_web_apps/re-engageable/index.html b/files/fr/web/progressive_web_apps/re-engageable/index.html deleted file mode 100644 index 729faa93e9..0000000000 --- a/files/fr/web/progressive_web_apps/re-engageable/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Re-engageable -slug: Web/Progressive_web_apps/Re-engageable -tags: - - Applications - - Notifications - - Push - - Service Workers - - Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Re-engageable ---- -
-
Un des principaux avantages des plateformes natives est la facilité avec laquelle les utilisateurs peuvent se retrouver de nouveaux attirés par des mises-à-jour et du nouveau contenu, même quand ils ne sont pas en train de regarder l'application ou d'utiliser leur appareil. Les applications web modernes peuvent désormais le faire aussi, en utilisant de nouvelles technologies comme l'API Web Push.
- -
-
- -

Guides

- -
-
Utiliser l'API service workers
-
Un guide simple pour débutant à l'API Service Worker.
-
Utiliser l'API Push
-
Apprendre les bases de l'API Web Push.
-
Utiliser l'API Notifications
-
Un résumé sur les notifications Web.
-
- -

Technologies

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Service workers -

JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur sous certaines circonstances comme la récupération (fetch) et l'envoi (push) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toutes les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elles ne soit servies.

- 		Expérimental: Chrome et Firefox (plus de détails){{SpecName('Service Workers')}}
API PushAprès s'être inscrit, le service Push fournit un point de terminaison utilisable par le serveur pour transmettre des messages à une application web controlée par un service worker particulier.Expérimental: chrome et Firefox (plus de détails){{SpecName("Push API")}}
API NotificationsLancer des notifications systèmes directement depuis les applications web.Répandu dans les navigateurs modernes  (plus de détails){{SpecName('Web Notifications')}}
- -

Outils

- -
-
ServiceWorkerWare
-
Un micro-framework similaire à Express pour le développement simple d'un service worker.
-
oghliner
-
Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.
-
sw-precache
-
Un module Node pour générer le code d'un service worker qui va mettre en pré-cache des ressources spécifiques.
-
- -

Voir aussi

- -
-
The service worker cookbook
-
Une série de très bonnes ressources concernant les service worker, montrant comment implémenter une application web hors-ligne, et plus encore.
-
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 new file mode 100644 index 0000000000..e656d29cde --- /dev/null +++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html @@ -0,0 +1,245 @@ +--- +title: >- + Comment faire pour que les PWAs relancent les utilisateurs en utilisant des + notifications et des messages poussés +slug: Web/Progressive_web_apps/Relancer_Via_Notifications_Push +translation_of: Web/Progressive_web_apps/Re-engageable_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.

+ +

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.

+ +

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.

+ +

Notifications

+ +

Commençons avec les notifications — elles peuvent fonctionner sans push, mais sont très utiles quand elles sont combinées avec. Voyons-les de façon isolée pour commencer.

+ +

Demande de permission

+ +

Pour afficher une notification, nous devons d'abord demander la permission de le faire. Cependant, au lieu de d'afficher la notification immédiatement, une meilleure pratique consiste à n'afficher la fenêtre popup quand l'utilisateur le demande en cliquant sur un bouton:

+ +
var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});
+ +

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

+ +

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.

+ +

Si la permission est donnée, elle vaut à la fois pour les notifications et les push.

+ +

Créer une notification

+ +

L'application exemple crée une notification en utilisant les données disponibles — un jeu est choisi au hasard et les données associées sont utilisées pour générer le contenu de la notification: le nom du jeu pour le titre, la mention de l'auteur dans le corps du texte et l'image pour l'icone:

+ +
function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Créé par '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}
+ +

Une nouvelle notification est créée au hasard toutes les 30 secondes jusqu'à ce que ça devienne trop pénible et que ce soit désactivé par l'utilisateur (pour une vraie application, les notifications devraient être moins fréquentes et plus utiles). L'avantage de l'API Notifications est qu'elle utilise la fonction de notification du système d'exploitation. Ceci signifie que les notifications peuvent être affichées à l'utilisateur même quand il ne regarde pas l'application et que les notifications ont le même aspect que celles affichées par les applications natives.

+ +

Push

+ +

Pousser (push) est plus compliqué que de faire des notifications — nous avons besoin de nous abonner à un serveur qui enverra ensuite les données en retour à l'application. Le Service Worker de l'application recevra les données du serveur qui les a poussées et pourra ensuite les afficher en utilisant le système de notifications ou un autre mécanisme si on le souhaite.

+ +

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

+ +
registration.pushManager.getSubscription() .then( /* ... */ );
+ +

Une fois que l'utilisateur est enrôlé, il peut recevoir des notifications poussées du serveur.

+ +

Du côté serveur, le processus tout entier doit être chiffré avec des clefs publique et privée par raison de sécurité — permettre à tout le monde d'envoyer des messages poussés non sécurisés en utilisant votre application serait une terrible idée. Voir la page de test de chffirement des données web poussées pour avoir des informations détaillées concernant la sécurisation du serveur. Le serveur enregistre toutes les informations reçues quand un utilisateur s'enregistre si bien que les messages peuvent être envoyés plus tard quand c'est nécessaire.

+ +

Pour recevoir des messages poussés, nous pouvons écouter l'événement {{event("push")}} dans le fichier du Service Worker:

+ +
self.addEventListener('push', function(e) { /* ... */ });
+ +

Les données peuvent être récupérées puis affichées immédiatement à l'utilisateur sous forme d'une notification. Ceci, par exemple, peut être utilisé pour rappeler à l'utilisateur quelque chose ou pour l'informer d'un nouveau contenu disponible dans l'application.

+ +

Exemple de Push

+ +

Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le Service Worker Cookbook — voir la démonstration de charge utile poussée.

+ +

Cette démonstration comporte trois fichiers:

+ + + +

Explorons tout ceci

+ +

index.js

+ +

Le fichier index.js commence par enregistrer le service worker:

+ +
navigator.serviceWorker.register('service-worker.js')
+.then(function(registration) {
+  return registration.pushManager.getSubscription()
+  .then(async function(registration) {
+      // partie relative à l'enregistrement
+  });
+})
+.then(function(subscription) {
+    // partie relative à l'abonnement
+});
+ +

C'est un petit peu plus compliqué que le service worker que nous avons vu dans la démonstration de js13kPWA. Dans ce cas particulier, après l'enregistrement, nous utilisons l'objet d'enregistrement pour s'abonner puis utiliser ensuite l'objet d'abonnement résultant pour achever le processus complet.

+ +

Dans la partie enregistrement, le code ressemble à ceci:

+ +
if(registration) {
+    return registration;
+}
+ +

Si l'utilisateur s'est déjà abonné, nous renvoyons alors l'objet de souscription et accède à la partir de la souscription. Si ce n'est pas le cas, nous initialisation une nouvelle souscription:

+ +
const response = await fetch('./vapidPublicKey');
+const vapidPublicKey = await response.text();
+const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
+ +

L'application récupère la clef publique du serveur et convertit la réponse sous forme de texte; puis cette réponse doit être convertie en un tableau de nombre entier non signé (Uint8Array (pour une prise en charge par Chrome). Pour en apprendre davantage sur les clefs VAPID, vous pouvez lire le message de blog Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla.

+ +

L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}}  — la première est userVisibleOnly: true, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est applicationServerKey, qui contient notre clef VAPID une fois récupérée et convertie avec succès.

+ +
return registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: convertedVapidKey
+});
+ +

Maintenant, allons voir la partie abonnement — l'application envoie d'abord les détails de l'abonnement au format JSON au serveur en utilisant Fetch.

+ +
fetch('./register', {
+    method: 'post',
+    headers: {
+        'Content-type': 'application/json'
+    },
+    body: JSON.stringify({
+        subscription: subscription
+    }),
+});
+ +

Puis la fonction {{domxref("onclick","GlobalEventHandlers.onclick")}} du bouton Abonnement est définie:

+ +
document.getElementById('doIt').onclick = function() {
+    const payload = document.getElementById('notification-payload').value;
+    const delay = document.getElementById('notification-delay').value;
+    const ttl = document.getElementById('notification-ttl').value;
+
+    fetch('./sendNotification', {
+        method: 'post',
+        headers: {
+            'Content-type': 'application/json'
+        },
+        body: JSON.stringify({
+            subscription: subscription,
+            payload: payload,
+            delay: delay,
+            ttl: ttl,
+        }),
+    });
+};
+ +

Quand le bouton est cliqué,  fetch demande au serveur d'envoyer la notification avec les paramètres suivants: payload est le contenu que la notification doir afficher, delay définit un délai en seconde avant que la notification soit affichée et ttl indique en seconde le temps que cette notification doit rester disponible sur le serveur.

+ +

Au tour maintenant du fichier Javascript suivant.

+ +

server.js

+ +

La partie serveur est écrite en Node.js et doit être hébergée à un endroit adapté, sujet qui fera l'objet d'un article qui lui entièrement consacré. Nous ne fournirons ici qu'un aperçu superficiel.

+ +

Le module web-pus est utilisé pour configurer les clefs VAPID keys et éventuellement les générer si elles ne sont pas encore disponibles.

+ +
const webPush = require('web-push');
+
+if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
+  console.log("Vous devez configurer les variables d'environnement " +
+  "VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY."+
+    "Vous pouvez utiliser celles-ci:");
+  console.log(webPush.generateVAPIDKeys());
+  return;
+}
+
+webPush.setVapidDetails(
+  'https://serviceworke.rs/',
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY
+);
+
+ +

Ensuite, un module définit et exporte toutes les routes que l'application doit prendre en charge: obtenir la clef publique VAPID, l'enregistrement puis l'envoi de notifications. Vous pouvez voir comment les variables du fichier index.js sont utilisées: payload, delay et ttl.

+ +
module.exports = function(app, route) {
+  app.get(route + 'vapidPublicKey', function(req, res) {
+    res.send(process.env.VAPID_PUBLIC_KEY);
+  });
+
+  app.post(route + 'register', function(req, res) {
+
+    res.sendStatus(201);
+  });
+
+  app.post(route + 'sendNotification', function(req, res) {
+    const subscription = req.body.subscription;
+    const payload = req.body.payload;
+    const options = {
+      TTL: req.body.ttl
+    };
+
+    setTimeout(function() {
+      webPush.sendNotification(subscription, payload, options)
+      .then(function() {
+        res.sendStatus(201);
+      })
+      .catch(function(error) {
+        console.log(error);
+        res.sendStatus(500);
+      });
+    }, req.body.delay * 1000);
+  });
+};
+ +

service-worker.js

+ +

Le dernier fichier que nous allons regarder est celui du service worker:

+ +
self.addEventListener('push', function(event) {
+    const payload = event.data ? event.data.text() : 'no payload';
+    event.waitUntil(
+        self.registration.showNotification('ServiceWorker Cookbook', {
+            body: payload,
+        })
+    );
+});
+ +

Tout ce qu'il est est d'ajouter une écoute sur l'événément {{event("push")}}, créer la variable de charge utile constituée du texte récupéré depuis les données (ou de créer une chaîne de caractères à utiliser si les données sont vides) puis d'attendre jusqu'à ce que la notfication soit montrée à l'utilisateur.

+ +

N'hésitez pas à explorer le reste des exemples du Service Worker Cookbook si vous voulez savoir comment ils sont gérés — le code source complet est disponible sur on GitHub. Il y a une vaste collection d'exemples fonctionnels démontrant l'usage général ainsi que le push webn les stratégies de mise en cache, la question des performances, le fonctionnement en mode déconnecté et plus encore.

+ +

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

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
diff --git a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html b/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html deleted file mode 100644 index e656d29cde..0000000000 --- a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: >- - Comment faire pour que les PWAs relancent les utilisateurs en utilisant des - notifications et des messages poussés -slug: Web/Progressive_web_apps/Relancer_Via_Notifications_Push -translation_of: Web/Progressive_web_apps/Re-engageable_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.

- -

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.

- -

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.

- -

Notifications

- -

Commençons avec les notifications — elles peuvent fonctionner sans push, mais sont très utiles quand elles sont combinées avec. Voyons-les de façon isolée pour commencer.

- -

Demande de permission

- -

Pour afficher une notification, nous devons d'abord demander la permission de le faire. Cependant, au lieu de d'afficher la notification immédiatement, une meilleure pratique consiste à n'afficher la fenêtre popup quand l'utilisateur le demande en cliquant sur un bouton:

- -
var button = document.getElementById("notifications");
-button.addEventListener('click', function(e) {
-    Notification.requestPermission().then(function(result) {
-        if(result === 'granted') {
-            randomNotification();
-        }
-    });
-});
- -

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

- -

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.

- -

Si la permission est donnée, elle vaut à la fois pour les notifications et les push.

- -

Créer une notification

- -

L'application exemple crée une notification en utilisant les données disponibles — un jeu est choisi au hasard et les données associées sont utilisées pour générer le contenu de la notification: le nom du jeu pour le titre, la mention de l'auteur dans le corps du texte et l'image pour l'icone:

- -
function randomNotification() {
-    var randomItem = Math.floor(Math.random()*games.length);
-    var notifTitle = games[randomItem].name;
-    var notifBody = 'Créé par '+games[randomItem].author+'.';
-    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
-    var options = {
-        body: notifBody,
-        icon: notifImg
-    }
-    var notif = new Notification(notifTitle, options);
-    setTimeout(randomNotification, 30000);
-}
- -

Une nouvelle notification est créée au hasard toutes les 30 secondes jusqu'à ce que ça devienne trop pénible et que ce soit désactivé par l'utilisateur (pour une vraie application, les notifications devraient être moins fréquentes et plus utiles). L'avantage de l'API Notifications est qu'elle utilise la fonction de notification du système d'exploitation. Ceci signifie que les notifications peuvent être affichées à l'utilisateur même quand il ne regarde pas l'application et que les notifications ont le même aspect que celles affichées par les applications natives.

- -

Push

- -

Pousser (push) est plus compliqué que de faire des notifications — nous avons besoin de nous abonner à un serveur qui enverra ensuite les données en retour à l'application. Le Service Worker de l'application recevra les données du serveur qui les a poussées et pourra ensuite les afficher en utilisant le système de notifications ou un autre mécanisme si on le souhaite.

- -

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

- -
registration.pushManager.getSubscription() .then( /* ... */ );
- -

Une fois que l'utilisateur est enrôlé, il peut recevoir des notifications poussées du serveur.

- -

Du côté serveur, le processus tout entier doit être chiffré avec des clefs publique et privée par raison de sécurité — permettre à tout le monde d'envoyer des messages poussés non sécurisés en utilisant votre application serait une terrible idée. Voir la page de test de chffirement des données web poussées pour avoir des informations détaillées concernant la sécurisation du serveur. Le serveur enregistre toutes les informations reçues quand un utilisateur s'enregistre si bien que les messages peuvent être envoyés plus tard quand c'est nécessaire.

- -

Pour recevoir des messages poussés, nous pouvons écouter l'événement {{event("push")}} dans le fichier du Service Worker:

- -
self.addEventListener('push', function(e) { /* ... */ });
- -

Les données peuvent être récupérées puis affichées immédiatement à l'utilisateur sous forme d'une notification. Ceci, par exemple, peut être utilisé pour rappeler à l'utilisateur quelque chose ou pour l'informer d'un nouveau contenu disponible dans l'application.

- -

Exemple de Push

- -

Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le Service Worker Cookbook — voir la démonstration de charge utile poussée.

- -

Cette démonstration comporte trois fichiers:

- - - -

Explorons tout ceci

- -

index.js

- -

Le fichier index.js commence par enregistrer le service worker:

- -
navigator.serviceWorker.register('service-worker.js')
-.then(function(registration) {
-  return registration.pushManager.getSubscription()
-  .then(async function(registration) {
-      // partie relative à l'enregistrement
-  });
-})
-.then(function(subscription) {
-    // partie relative à l'abonnement
-});
- -

C'est un petit peu plus compliqué que le service worker que nous avons vu dans la démonstration de js13kPWA. Dans ce cas particulier, après l'enregistrement, nous utilisons l'objet d'enregistrement pour s'abonner puis utiliser ensuite l'objet d'abonnement résultant pour achever le processus complet.

- -

Dans la partie enregistrement, le code ressemble à ceci:

- -
if(registration) {
-    return registration;
-}
- -

Si l'utilisateur s'est déjà abonné, nous renvoyons alors l'objet de souscription et accède à la partir de la souscription. Si ce n'est pas le cas, nous initialisation une nouvelle souscription:

- -
const response = await fetch('./vapidPublicKey');
-const vapidPublicKey = await response.text();
-const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
- -

L'application récupère la clef publique du serveur et convertit la réponse sous forme de texte; puis cette réponse doit être convertie en un tableau de nombre entier non signé (Uint8Array (pour une prise en charge par Chrome). Pour en apprendre davantage sur les clefs VAPID, vous pouvez lire le message de blog Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla.

- -

L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}}  — la première est userVisibleOnly: true, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est applicationServerKey, qui contient notre clef VAPID une fois récupérée et convertie avec succès.

- -
return registration.pushManager.subscribe({
-    userVisibleOnly: true,
-    applicationServerKey: convertedVapidKey
-});
- -

Maintenant, allons voir la partie abonnement — l'application envoie d'abord les détails de l'abonnement au format JSON au serveur en utilisant Fetch.

- -
fetch('./register', {
-    method: 'post',
-    headers: {
-        'Content-type': 'application/json'
-    },
-    body: JSON.stringify({
-        subscription: subscription
-    }),
-});
- -

Puis la fonction {{domxref("onclick","GlobalEventHandlers.onclick")}} du bouton Abonnement est définie:

- -
document.getElementById('doIt').onclick = function() {
-    const payload = document.getElementById('notification-payload').value;
-    const delay = document.getElementById('notification-delay').value;
-    const ttl = document.getElementById('notification-ttl').value;
-
-    fetch('./sendNotification', {
-        method: 'post',
-        headers: {
-            'Content-type': 'application/json'
-        },
-        body: JSON.stringify({
-            subscription: subscription,
-            payload: payload,
-            delay: delay,
-            ttl: ttl,
-        }),
-    });
-};
- -

Quand le bouton est cliqué,  fetch demande au serveur d'envoyer la notification avec les paramètres suivants: payload est le contenu que la notification doir afficher, delay définit un délai en seconde avant que la notification soit affichée et ttl indique en seconde le temps que cette notification doit rester disponible sur le serveur.

- -

Au tour maintenant du fichier Javascript suivant.

- -

server.js

- -

La partie serveur est écrite en Node.js et doit être hébergée à un endroit adapté, sujet qui fera l'objet d'un article qui lui entièrement consacré. Nous ne fournirons ici qu'un aperçu superficiel.

- -

Le module web-pus est utilisé pour configurer les clefs VAPID keys et éventuellement les générer si elles ne sont pas encore disponibles.

- -
const webPush = require('web-push');
-
-if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
-  console.log("Vous devez configurer les variables d'environnement " +
-  "VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY."+
-    "Vous pouvez utiliser celles-ci:");
-  console.log(webPush.generateVAPIDKeys());
-  return;
-}
-
-webPush.setVapidDetails(
-  'https://serviceworke.rs/',
-  process.env.VAPID_PUBLIC_KEY,
-  process.env.VAPID_PRIVATE_KEY
-);
-
- -

Ensuite, un module définit et exporte toutes les routes que l'application doit prendre en charge: obtenir la clef publique VAPID, l'enregistrement puis l'envoi de notifications. Vous pouvez voir comment les variables du fichier index.js sont utilisées: payload, delay et ttl.

- -
module.exports = function(app, route) {
-  app.get(route + 'vapidPublicKey', function(req, res) {
-    res.send(process.env.VAPID_PUBLIC_KEY);
-  });
-
-  app.post(route + 'register', function(req, res) {
-
-    res.sendStatus(201);
-  });
-
-  app.post(route + 'sendNotification', function(req, res) {
-    const subscription = req.body.subscription;
-    const payload = req.body.payload;
-    const options = {
-      TTL: req.body.ttl
-    };
-
-    setTimeout(function() {
-      webPush.sendNotification(subscription, payload, options)
-      .then(function() {
-        res.sendStatus(201);
-      })
-      .catch(function(error) {
-        console.log(error);
-        res.sendStatus(500);
-      });
-    }, req.body.delay * 1000);
-  });
-};
- -

service-worker.js

- -

Le dernier fichier que nous allons regarder est celui du service worker:

- -
self.addEventListener('push', function(event) {
-    const payload = event.data ? event.data.text() : 'no payload';
-    event.waitUntil(
-        self.registration.showNotification('ServiceWorker Cookbook', {
-            body: payload,
-        })
-    );
-});
- -

Tout ce qu'il est est d'ajouter une écoute sur l'événément {{event("push")}}, créer la variable de charge utile constituée du texte récupéré depuis les données (ou de créer une chaîne de caractères à utiliser si les données sont vides) puis d'attendre jusqu'à ce que la notfication soit montrée à l'utilisateur.

- -

N'hésitez pas à explorer le reste des exemples du Service Worker Cookbook si vous voulez savoir comment ils sont gérés — le code source complet est disponible sur on GitHub. Il y a une vaste collection d'exemples fonctionnels démontrant l'usage général ainsi que le push webn les stratégies de mise en cache, la question des performances, le fonctionnement en mode déconnecté et plus encore.

- -

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

- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
diff --git a/files/fr/web/progressive_web_apps/responsive/media_types/index.html b/files/fr/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..3926d7e225 --- /dev/null +++ b/files/fr/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,396 @@ +--- +title: Médias +slug: CSS/Premiers_pas/Médias +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

 

+

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

+

Cette page revient sur le but et la structure des feuilles de style CSS.

+

Information : les médias

+

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

+

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

+

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

+ + + + + + + +
+ Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. +

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

+

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

+
+ 
+@media print {
+  #nav-area {display: none;}
+  }
+
+
+
+

Voici certains des types de média courants :

+ + + + + + + + + + + + + + + + + + + +
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
+

 

+ + + + + + + +
+ Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. +

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

+

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

+

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

+

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

+

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

+
+

 

+

Impression

+

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

+

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

+

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

+

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

+ + + + + + + +
+ Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : +
+ 
+@page {margin: 2cm;}
+
+
+

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

+
+ 
+h1 {page-break-before: always;}
+
+
+
+

 

+ + + + + + + +
+ Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. +

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

+
+

 

+

Interfaces utilisateur

+

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

+

Il n'y a pas de type de média spécial pour ce type de périphériques.

+

Voici les cinq sélecteurs spéciaux :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
+

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

+ + + + + + + + + + + + + + + + + + + + + + + +
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
+


+ Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

+

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

+

 

+ + + + + + + +
+ Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : +
+ 
+.bouton-vert {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.bouton-vert[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.bouton-vert:active {
+  border-style: inset;
+  }
+
+
+

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

+ + + + + + +
+ + + + + + + + + + + + + + + + +
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
+
+

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

+
+ + + + + + + +
+ Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. +

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

+
+

Action : impression d'un document

+

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Exemple à imprimer</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
+</HEAD>
+
+<BODY>
+<H1>Section A</H1>
+<P>Ceci est la première section...</P>
+
+<H1>Section B</H1>
+<P>Ceci est la seconde section...</P>
+
+<DIV id="en-tete-impression">
+Titre pour les médias paginés
+</DIV>
+
+<DIV id="pied-de-page-impression">
+Page :
+</DIV>
+
+</BODY>
+</HTML>
+
+
+

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
/*** Exemple d'impression ***/
+
+/* Réglages par défaut pour l'écran */
+#en-tete-impression,
+#pied-de-page-impression {
+  display: none;
+  }
+
+/* Uniquement pour l'impression */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#en-tete-impression {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#pied-de-page-impression {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#pied-de-page-impression:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* fin des paramètres pour l'impression */
+
+
+

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

+

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

+ + + + + + + +
+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section A
+
+ Ceci est la première section...
+
+ Page : 1
+
+
+ 		+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section B
+
+ Ceci est la seconde section...
+
+ Page : 2
+
+
+
+

 

+ + + + + + + +
+ Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. +

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

+

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

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 new file mode 100644 index 0000000000..f29786204c --- /dev/null +++ b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html @@ -0,0 +1,78 @@ +--- +title: Adaptative +slug: Web/Progressive_web_apps/Adaptative +tags: + - Applications + - Design adaptatif + - Media Queries + - flexbox + - viewport +translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +translation_of_original: Web/Progressive_web_apps/Responsive +--- +
+
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
+
Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.
+
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.
+
+ +

Technologies

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TechnologieDescriptionRésumé du supportDernière spécification
Media queriesPermet de définir des conditions permettant aux styles d'être appliqués aux contenus en fonction de l'affichage disponible (viewport), de la résolution, de l'orientation, etc.Répandu sur les navigateurs modernes (plus de détails)Media Queries Level 4
@viewport/viewport meta tagContrôler la configuration du viewport, principalement sur les appareils mobiles.@viewport: Expérimental (plus de détails)
+ Viewport meta tag: Répandu sur les appareils mobiles modernes		CSS Device Adaptation Module Level 1
FlexboxUne fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative.Répandu sur les navigateurs modernes (plus de détail)CSS Flexible Box Layout Module Level 1
+ +

Outils

+ +
+
Modernizr
+
Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées.
+
css3-mediaqueries-js
+
Un polyfill en JavaScript pour assurer le support de media query aux anciennes versions de IE (5+.)
+
+ +

Voir aussi

+ +
+
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
+
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.
+
diff --git a/files/fr/web/progressive_web_apps/securisee/index.html b/files/fr/web/progressive_web_apps/securisee/index.html deleted file mode 100644 index c5c90869f4..0000000000 --- a/files/fr/web/progressive_web_apps/securisee/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Sécurisée -slug: Web/Progressive_web_apps/Securisee -tags: - - Applications - - Applications web modernes - - Applications web progressives - - HTTPS - - Sécurité - - Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Safe ---- -
-
La plateforme Web fournit un mécanisme sécurisé de livraison permettant d'éviter l'infiltration et s'assurer que le contenu n'a pas été altéré - aussi longtemps que vous bénéficiez de l'avantage du HTTPS et que vous développez votre application avec la sécurité à l'esprit.
- -
-
- -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- -

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !

- -

Outils

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussi

- -

Ajouter un lien vers des informations liées.

-- cgit v1.2.3-54-g00ecf