diff options
9 files changed, 724 insertions, 710 deletions
diff --git a/files/fr/web/progressive_web_apps/add_to_home_screen/index.md b/files/fr/web/progressive_web_apps/add_to_home_screen/index.md index 3a315c9568..59875ebc2c 100644 --- a/files/fr/web/progressive_web_apps/add_to_home_screen/index.md +++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.md @@ -9,78 +9,71 @@ tags: translation_of: Web/Progressive_web_apps/Add_to_home_screen original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs --- -<p>Ajouter à l’écran d’accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d’ajouter facilement et rapidement un raccourci à leur écran d’accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d’en tirer parti.</p> +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. -<h2 id="Pourquoi_A2HS">Pourquoi A2HS?</h2> +## Pourquoi A2HS? -<p>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.</p> +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. -<h2 id="Quels_navigateurs_prennent_en_charge_A2HS">Quels navigateurs prennent en charge A2HS?</h2> +## Quels navigateurs prennent en charge A2HS? -<p>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 .</p> +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 . -<h2 id="Comment_l'utiliser">Comment l'utiliser?</h2> +## Comment l'utiliser? -<p>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.</p> +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. -<p>Si vous avez Firefox pour Android, utilisez-le pour accéder à notre démonstration à <code>https://mdn.github.io/pwa-examples/a2hs/</code> . Vous verrez des images de renard, mais plus important encore, vous verrez une icône "accueil" avec une icône plus (+) à l'intérieur: il s'agit de l'icône "Ajouter à l'écran d'accueil" affichée pour tout site doté de A2HS.</p> +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. -<p><img alt="" src="add-to-home-screen-icon.png"></p> + -<p>Appuyez sur cette icône pour afficher une bannière de confirmation. Une pression sur le gros bouton + <em>AJOUTER À L'ÉCRAN D'ACCUEIL</em> termine l'action et ajoute l'application à l'écran d'accueil. (Dans Android 8 et versions ultérieures, une boîte de dialogue d'autorisation au niveau du système "Ajouter à l'écran d'accueil" s'affiche en premier.)</p> +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.) -<p><img alt="" src="fx-a2hs-banner.png"></p> + -<p>Si vous avez Mobile Chrome disponible, l'expérience est légèrement différente. lors du chargement du site, une bannière d’installation apparaît vous demandant si vous souhaitez ajouter cette application à votre écran d’accueil.</p> +Si vous avez Mobile Chrome disponible, l'expérience est légèrement différente. lors du chargement du site, une bannière d’installation apparaît vous demandant si vous souhaitez ajouter cette application à votre écran d’accueil. -<p><img alt="" src="chrome-a2hs-banner.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .</p> -</div> +> **Note :** Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App . -<p>Si vous choisissez de ne pas l'ajouter à votre écran d'accueil à ce stade, vous pourrez le faire ultérieurement à l'aide de l'icône <em>Ajouter à l'écran d'accueil</em> dans le menu principal de Chrome.</p> +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. -<p>Quel que soit le navigateur que vous utilisez, lorsque vous choisissez d'ajouter l'application à votre écran d'accueil, celle-ci s'affiche avec un titre abrégé, de la même manière que les applications natives.</p> +Quel que soit le navigateur que vous utilisez, lorsque vous choisissez d'ajouter l'application à votre écran d'accueil, celle-ci s'affiche avec un titre abrégé, de la même manière que les applications natives. -<p><img alt="" src="a2hs-on-home-screen.png"></p> + -<p>Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus l'interface utilisateur du navigateur.</p> +Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus l'interface utilisateur du navigateur. -<h2 id="Que_faut-il_pour_utiliser_A2HS">Que faut-il pour utiliser A2HS?</h2> +## Que faut-il pour utiliser A2HS? -<p>Pour permettre à votre application d'être ajoutée à un écran d'accueil, vous devez disposer des éléments suivants:</p> +Pour permettre à votre application d'être ajoutée à un écran d'accueil, vous devez disposer des éléments suivants: -<ul> - <li>Un site en HTTPS - Internet est de plus en plus plus sécurisée et de nombreuses technologies modernes (A2HS incluses) ne fonctionneront que dans des contextes sécurisés.</li> - <li>Avoir un fichier "manifest" contenant les champs appropriés, lié à partir de l'en-tête HTML.</li> - <li>Avoir une icône disponible pour l'affichage sur l'écran d'accueil.</li> - <li>Chrome exige en outre que l'application ait un agent de service enregistré (par exemple, pour pouvoir fonctionner en mode hors connexion).</li> -</ul> +- Un site en HTTPS - Internet est de plus en plus plus sécurisée et de nombreuses technologies modernes (A2HS incluses) ne fonctionneront que dans des contextes sécurisés. +- Avoir un fichier "manifest" contenant les champs appropriés, lié à partir de l'en-tête HTML. +- Avoir une icône disponible pour l'affichage sur l'écran d'accueil. +- Chrome exige en outre que l'application ait un agent de service enregistré (par exemple, pour pouvoir fonctionner en mode hors connexion). -<h3 id="Manifest">Manifest</h3> +### Manifest -<p>Le "manifest" est un fichier écrit au format JSON standard et doit être placé quelque part dans le répertoire de votre application (il est préférable que le <code><em>fichier.webmanifest</em></code> soit à la racine du site) avec le nom <code><em>fichier</em>.webmanifest</code> (nous avons choisi <code>manifest.webmanifest</code> ). Il contient plusieurs champs qui définissent certaines informations sur l'application Web et sur son comportement. .</p> +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. . -<div class="note"> -<p><strong>Note :</strong> L'extension <code>.webmanifest</code> est spécifiée dans la section Enregistrement du type de fichier, mais les navigateurs prennent aussi en charge les manifest avec d'autres extensions appropriées, par exemple <code>.json</code> .</p> -</div> +> **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` . -<p> </p> -<p>Les champs nécessaires pour A2HS sont les suivants:</p> -<ul> - <li><code>background_color</code> : spécifie une couleur d'arrière-plan à utiliser dans certains contextes d'application. Le plus pertinent pour A2HS est l'écran de démarrage qui s'affiche lorsque l'icône de l'application sur l'écran d'accueil est activée et qu'elle commence à se charger (elle ne s'affiche actuellement que lorsque des applications ont été ajoutées à l'écran d'accueil par Chrome).</li> - <li><code>display</code> : Spécifie comment l'application doit être affichée. Pour que cela ressemble à une application distincte (et pas seulement à une page Web), vous devez choisir une valeur telle que <code>fullscreen</code> (aucune interface utilisateur n'est affichée) ou <code>standalone</code> (très similaire, mais des éléments d'interface utilisateur au niveau du système tels que la barre d'état. pourrait être visible).</li> - <li><code>icons</code> : spécifie les icônes à utiliser par le navigateur pour représenter l'application à différents endroits (par exemple sur le sélecteur de tâches ou, plus important encore, sur l'écran d'accueil). Nous n'en avons inclus qu'un dans notre démo.</li> - <li><code>name</code> et <code>short_name</code> : Ces champs fournissent un nom d'application à afficher lors de la représentation de l'application à différents endroits. <code>name</code> fournit le nom complet de l'application et <code>short_name</code> fournit un nom abrégé à utiliser lorsque l'espace disponible est insuffisant pour afficher le nom complet. Nous vous conseillons de fournir les deux si le nom de votre application est long.</li> - <li><code>start_url</code> : fournit un chemin d'accès de l'application. Notez qu'il doit s'agir d'une URL pointant vers l'index du site, par rapport à l'URL du "manifest". Sachez également que Chrome en a besoin avant d'afficher la bannière d'installation, tandis que Firefox ne l'exige pas pour afficher l'icône.</li> -</ul> +Les champs nécessaires pour A2HS sont les suivants: -<p>Le fichier "manifest" de notre exemple ressemble à ceci:</p> +- `background_color` : spécifie une couleur d'arrière-plan à utiliser dans certains contextes d'application. Le plus pertinent pour A2HS est l'écran de démarrage qui s'affiche lorsque l'icône de l'application sur l'écran d'accueil est activée et qu'elle commence à se charger (elle ne s'affiche actuellement que lorsque des applications ont été ajoutées à l'écran d'accueil par Chrome). +- `display` : Spécifie comment l'application doit être affichée. Pour que cela ressemble à une application distincte (et pas seulement à une page Web), vous devez choisir une valeur telle que `fullscreen` (aucune interface utilisateur n'est affichée) ou `standalone` (très similaire, mais des éléments d'interface utilisateur au niveau du système tels que la barre d'état. pourrait être visible). +- `icons` : spécifie les icônes à utiliser par le navigateur pour représenter l'application à différents endroits (par exemple sur le sélecteur de tâches ou, plus important encore, sur l'écran d'accueil). Nous n'en avons inclus qu'un dans notre démo. +- `name` et `short_name` : Ces champs fournissent un nom d'application à afficher lors de la représentation de l'application à différents endroits. `name` fournit le nom complet de l'application et `short_name` fournit un nom abrégé à utiliser lorsque l'espace disponible est insuffisant pour afficher le nom complet. Nous vous conseillons de fournir les deux si le nom de votre application est long. +- `start_url` : fournit un chemin d'accès de l'application. Notez qu'il doit s'agir d'une URL pointant vers l'index du site, par rapport à l'URL du "manifest". Sachez également que Chrome en a besoin avant d'afficher la bannière d'installation, tandis que Firefox ne l'exige pas pour afficher l'icône. -<pre class="brush: json">{ +Le fichier "manifest" de notre exemple ressemble à ceci: + +```json +{ "background_color": "purple", "description": "Shows random fox pictures. Hey, at least it isn't cats.", "display": "fullscreen", @@ -94,71 +87,79 @@ original_slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs "name": "Awesome fox pictures", "short_name": "Foxes", "start_url": "/pwa-examples/a2hs/index.html" -}</pre> +} +``` + +### Icône + -<h3 id="Icône">Icône</h3> -<p> </p> +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). -<p>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).</p> +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. -<p>Notez que le membre de <code>type</code> 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.</p> +Pour ce qui est de la conception de l’icône, vous devez suivre les mêmes pratiques que vous suivriez pour n’importe quelle icône Android (voir les directives de conception d’icône Android ). -<p>Pour ce qui est de la conception de l’icône, vous devez suivre les mêmes pratiques que vous suivriez pour n’importe quelle icône Android (voir les directives de conception d’icône Android ).</p> +### Lier le code HTML au "manifest" -<h3 id="Lier_le_code_HTML_au_manifest">Lier le code HTML au "manifest"</h3> +Pour terminer la configuration de votre "manifest", vous devez le référencer à partir du code HTML de la page d'accueil de votre application: -<p>Pour terminer la configuration de votre "manifest", vous devez le référencer à partir du code HTML de la page d'accueil de votre application:</p> +```html +< link rel = " manifest " href = " +``` -<pre class="brush: html">< link rel = " manifest " href = "</pre> +Les navigateurs prenant en charge A2HS sauront où chercher votre manifeste une fois celui-ci en place. -<p>Les navigateurs prenant en charge A2HS sauront où chercher votre manifeste une fois celui-ci en place.</p> +## Qu'est-ce que A2HS ne vous donne pas? -<h2 id="Qu'est-ce_que_A2HS_ne_vous_donne_pas">Qu'est-ce que A2HS ne vous donne pas?</h2> -<p> </p> -<p>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.</p> +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. -<p>Dans notre exemple d'application, nous venons d'utiliser un agent de service pour stocker tous les fichiers nécessaires. Le fichier <code><a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js" rel="noopener">index.js</a></code> est inscrit sur le site avec le bloc de code final dans le fichier <code><a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js" rel="noopener">index.js</a></code> . 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 <a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js" rel="noopener">contenu</a> dans le fichier <a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js" rel="noopener">sw.js.</a></p> +Dans notre exemple d'application, nous venons d'utiliser un agent de service pour stocker tous les fichiers nécessaires. Le fichier [`index.js`](https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js) est inscrit sur le site avec le bloc de code final dans le fichier [`index.js`](https://github.com/mdn/pwa-examples/blob/master/a2hs/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](https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js) dans le fichier [sw.js.](https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js) -<h2 id="A2HS_sur_le_bureau">A2HS sur le bureau</h2> +## A2HS sur le bureau -<p>Bien que conçu à l'origine pour améliorer l'expérience utilisateur sur les systèmes d'exploitation mobiles, il existe également une technique pour rendre les PWA installables sur les plates-formes de bureau.</p> +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. -<div class="note"> -<p><strong>Note :</strong> au moment de la rédaction de ce document, les fonctionnalités décrites ci-dessous n'étaient prises en charge que par les versions les plus récentes de Chrome: par défaut sous Windows et derrière l'indicateur <code>#enable-desktop-pwas</code> sous macOS.</p> -</div> +> **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. -<p> </p> -<h3 id="Ajout_d'un_bouton_d'installation">Ajout d'un bouton d'installation</h3> -<p>Pour rendre notre PWA installable sur le bureau, nous avons d’abord ajouté un bouton à notre document pour permettre aux utilisateurs de procéder à l’installation. Ce bouton n’est pas automatiquement disponible sur les applications de bureau et l’installation doit être déclenchée par un geste de l’utilisateur:</p> +### Ajout d'un bouton d'installation -<pre class="brush: html"><button class="add-button">Add to home screen</button></pre> +Pour rendre notre PWA installable sur le bureau, nous avons d’abord ajouté un bouton à notre document pour permettre aux utilisateurs de procéder à l’installation. Ce bouton n’est pas automatiquement disponible sur les applications de bureau et l’installation doit être déclenchée par un geste de l’utilisateur: -<p>Nous lui avons ensuite donné un style simple:</p> +```html +<button class="add-button">Add to home screen</button> +``` -<pre class="brush: css">.add-button { +Nous lui avons ensuite donné un style simple: + +```css +.add-button { position: absolute; top: 1px; left: 1px; -}</pre> +} +``` -<h3 id="JavaScript_pour_gérer_l'installation">JavaScript pour gérer l'installation</h3> +### JavaScript pour gérer l'installation -<p>Au bas de notre <a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js" rel="noopener">fichier <code>index.js</code></a> , nous avons ajouté du JavaScript pour gérer l'installation. Tout d'abord, nous déclarons une variable <code>deferredPrompt</code> (que nous expliquerons plus tard), obtenons une référence à notre bouton d'installation et le configurons pour <code>display: none</code>:</p> +Au bas de notre [fichier `index.js`](https://github.com/mdn/pwa-examples/blob/master/a2hs/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`: -<pre class="brush: js">let deferredPrompt; +```js +let deferredPrompt; const addBtn = document.querySelector('.add-button'); -addBtn.style.display = 'none';</pre> +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: -<p>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 <code>beforeinstallprompt</code> . Nous pouvons ensuite utiliser un gestionnaire comme celui ci-dessous pour gérer l'installation:</p> -<p> </p> -<pre class="brush: js">window.addEventListener('beforeinstallprompt', (e) => { +```js +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. @@ -166,13 +167,13 @@ addBtn.style.display = 'none';</pre> // Update UI to notify the user they can add to home screen addBtn.style.display = 'block'; - addBtn.addEventListener('click', (e) => { + 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) => { + deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { @@ -181,51 +182,42 @@ addBtn.style.display = 'none';</pre> deferredPrompt = null; }); }); -});</pre> +}); +``` + -<p> </p> -<p>Ici il faut:</p> +Ici il faut: -<ul> - <li>Appeler <code>Event.preventDefault()</code> pour empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68).</li> - <li>Stocker l'objet événement dans la variable <code>deferredPrompt</code> afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle.</li> - <li>Configurer le bouton <code>display: block</code> afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer.</li> - <li>Définir un gestionnaire de <code>click</code> pour le bouton.</li> -</ul> +- Appeler `Event.preventDefault()` pour empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68). +- Stocker l'objet événement dans la variable `deferredPrompt` afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle. +- Configurer le bouton `display: block` afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer. +- Définir un gestionnaire de `click` pour le bouton. -<p>Le gestionnaire de clics contient les étapes suivantes:</p> +Le gestionnaire de clics contient les étapes suivantes: -<ul> - <li>Cacher à nouveau le bouton avec <code>display: none</code> - il n'est plus nécessaire une fois l'application installée.</li> - <li>Utilisez la méthode <code>prompt()</code> disponible sur l'objet d'événement <code>beforeinstallprompt</code> (stocké dans <code>deferredPrompt</code> ) pour déclencher l'affichage de l'invite d'installation.</li> - <li>Répondez à l'interaction de l'utilisateur avec l'invite à l'aide de la propriété <code>userChoice</code> , de nouveau disponible sur l'objet d'événement <code>beforeinstallprompt</code> .</li> - <li>Définissez <code>deferredPrompt</code> sur null car il n'est plus nécessaire.</li> -</ul> +- Cacher à nouveau le bouton avec `display: none` - il n'est plus nécessaire une fois l'application installée. +- Utilisez la méthode `prompt()` disponible sur l'objet d'événement `beforeinstallprompt` (stocké dans `deferredPrompt` ) pour déclencher l'affichage de l'invite d'installation. +- Répondez à l'interaction de l'utilisateur avec l'invite à l'aide de la propriété `userChoice` , de nouveau disponible sur l'objet d'événement `beforeinstallprompt` . +- Définissez `deferredPrompt` sur null car il n'est plus nécessaire. -<p>Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît.</p> +Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît. -<p><img alt="" src="chrome-desktop-a2hs-banner.png"></p> + -<p>Si l'utilisateur sélectionne <em>Installer</em> , l'application est installée (disponible en tant qu'application de bureau autonome) et le bouton Installer ne s'affiche plus (l'événement <code>onbeforeinstallprompt</code> ne se déclenche plus si l'application est déjà installée). Lorsque vous ouvrez l'application, celle-ci apparaît dans sa propre fenêtre:</p> +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: -<p><img alt="" src="a2hs-installed-desktop.png"></p> + -<p>Si l'utilisateur sélectionne <em>Annuler</em> , l'état de l'application revient à ce qu'il était avant le clic sur le bouton.</p> +Si l'utilisateur sélectionne _Annuler_ , l'état de l'application revient à ce qu'il était avant le clic sur le bouton. -<div class="note"> -<p><strong>Note :</strong> Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.</p> -</div> +> **Note :** Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p> </p> -<ul> - <li>Applications web progressives (PWA</li> - <li>Service Worker API</li> - <li>Référence du "manifest" Web</li> - <li>App install banners</li> -</ul> -<p> </p> +- Applications web progressives (PWA +- Service Worker API +- Référence du "manifest" Web +- App install banners diff --git a/files/fr/web/progressive_web_apps/app_structure/index.md b/files/fr/web/progressive_web_apps/app_structure/index.md index 6c97975899..6b3841be1a 100644 --- a/files/fr/web/progressive_web_apps/app_structure/index.md +++ b/files/fr/web/progressive_web_apps/app_structure/index.md @@ -3,128 +3,127 @@ title: Structure d'une Progressive web app slug: Web/Progressive_web_apps/App_structure translation_of: Web/Progressive_web_apps/App_structure --- -<div>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</div> +{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}} -<p>Maintenant que nous avons pris connaissances des principes théoriques sur lesquelles sont bâties les PWAs, penchons nous sur la structure recommandée d'une vraie application. Nous commencerons par analyser l'application <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire.</p> +Maintenant que nous avons pris connaissances des principes théoriques sur lesquelles sont bâties les PWAs, penchons nous sur la structure recommandée d'une vraie application. Nous commencerons par analyser l'application [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire. -<h2 id="Architecture_dune_application">Architecture d'une application</h2> +## Architecture d'une application -<p>Il existe deux approches majeures distinctes pour générer un site web - côté serveur ou côté client. Les deux approches ont leurs avantages et leurs inconvénients et vous pouvez panacher jusqu'à un certain point les deux approches. </p> +Il existe deux approches majeures distinctes pour générer un site web - côté serveur ou côté client. Les deux approches ont leurs avantages et leurs inconvénients et vous pouvez panacher jusqu'à un certain point les deux approches. -<ul> - <li>La génération côté serveur (Server-side rendering ou SSR) signifie qu'un site web est généré sur le serveur, si bien qu'il bénéficie d'un temps de chargement initial plus court mais la navigation d'une page à l'autre impose de télécharger à chaque foois un nouveau contenu HTML. Cela fonctionne parfaitement pour les navigateurs mais au prix d'un temps de navigation accru pour passer d'une page à l'autre, et donc diminue la performance générale perçue - charger une page nécessite un nouvel allerr-retour avec le serveur.</li> - <li>La génération côté client (Client-side rendering ou CSR) permet au site web d'être mis à jour presque instantanément en navigant sur des pages différentes mais nécessite au début un téléchargement intial plus important et un travail de rendu supplémentaires côté client. Le site web est plus lent lors d'une première visite mais peut être plus rapide ensuite quand on y navigue.</li> -</ul> +- La génération côté serveur (Server-side rendering ou SSR) signifie qu'un site web est généré sur le serveur, si bien qu'il bénéficie d'un temps de chargement initial plus court mais la navigation d'une page à l'autre impose de télécharger à chaque foois un nouveau contenu HTML. Cela fonctionne parfaitement pour les navigateurs mais au prix d'un temps de navigation accru pour passer d'une page à l'autre, et donc diminue la performance générale perçue - charger une page nécessite un nouvel allerr-retour avec le serveur. +- La génération côté client (Client-side rendering ou CSR) permet au site web d'être mis à jour presque instantanément en navigant sur des pages différentes mais nécessite au début un téléchargement intial plus important et un travail de rendu supplémentaires côté client. Le site web est plus lent lors d'une première visite mais peut être plus rapide ensuite quand on y navigue. -<p>Mélanger SSR et CSR peut permettre d'obtenir de meilleurs résultats - vous pouvez générer un site web côté serveur, mettre en cache son contenu puis mettre à jour le rendu côté client si et quand c'est nécessaire. Le chargement de la première page est rapide grâce au SSR et la navigation entre les pages est fluide car le client peut regénérer la page en ne modifiant que les parties qui ont changé.</p> +Mélanger SSR et CSR peut permettre d'obtenir de meilleurs résultats - vous pouvez générer un site web côté serveur, mettre en cache son contenu puis mettre à jour le rendu côté client si et quand c'est nécessaire. Le chargement de la première page est rapide grâce au SSR et la navigation entre les pages est fluide car le client peut regénérer la page en ne modifiant que les parties qui ont changé. -<p>Les PWAs peuvent être construite en utilisant l'approche que vous préférez, mais certaines fonctionneront mieux que les autres. L'approche la plus populaire est celle utilisant le concept d' "app shell"; qui mélange SSR et CSR exactement comme cela a été décrit plus haut et se conforme de surcroit à la méthodologie "déconnectée d'abord" ("offline first") que nous expliquerons en détails dans de prochains articles et que nous utiliserons dans notre application exemple. Il existe également une nouvelle approche utilisant l'<a href="/fr/docs/Web/API/Streams_API">API Streams</a> et dont nous parlerons brièvement.</p> +Les PWAs peuvent être construite en utilisant l'approche que vous préférez, mais certaines fonctionneront mieux que les autres. L'approche la plus populaire est celle utilisant le concept d' "app shell"; qui mélange SSR et CSR exactement comme cela a été décrit plus haut et se conforme de surcroit à la méthodologie "déconnectée d'abord" ("offline first") que nous expliquerons en détails dans de prochains articles et que nous utiliserons dans notre application exemple. Il existe également une nouvelle approche utilisant l'[API Streams](/fr/docs/Web/API/Streams_API) et dont nous parlerons brièvement. -<h2 id="App_shell">App shell</h2> +## App shell -<p>Le concept d'App shell s'occupe de charger une interface utilisateur minimale dès que possible puis de la mettre en cache de façon à ce qu'elle soit disponible en mode déconnecté lors des visites suivantes, avant de charger tout le contenu de l'application. De cette façon, la prochaine fois que quelqu'un visite l'application avec un appareil, l'interface utilisateur est chargée immédiatement depuis le cache puis les nouveaux contenus sont demandés au serveur (s'ils ne sont pas déjà disponibles dans le cache).</p> +Le concept d'App shell s'occupe de charger une interface utilisateur minimale dès que possible puis de la mettre en cache de façon à ce qu'elle soit disponible en mode déconnecté lors des visites suivantes, avant de charger tout le contenu de l'application. De cette façon, la prochaine fois que quelqu'un visite l'application avec un appareil, l'interface utilisateur est chargée immédiatement depuis le cache puis les nouveaux contenus sont demandés au serveur (s'ils ne sont pas déjà disponibles dans le cache). -<p>Cette structure est rapide et est également ressentie comme telle par l'utilisateur car il voit "quelque chose" instantanément, plutôt qu'un indicateur de chargement en train de tourner ou une page blanche. Cela permet également au site web d'être accessible en mode déconnecté si une connexion réseau n'est pas disponible.</p> +Cette structure est rapide et est également ressentie comme telle par l'utilisateur car il voit "quelque chose" instantanément, plutôt qu'un indicateur de chargement en train de tourner ou une page blanche. Cela permet également au site web d'être accessible en mode déconnecté si une connexion réseau n'est pas disponible. -<p>Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré dans le cache grâce à un <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a> qui sera expliqué en détail dans le prochain article - pour le moment, concentrons-nous sur la structure en elle-même.</p> +Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré dans le cache grâce à un [service worker](/fr/docs/Web/API/Service_Worker_API) qui sera expliqué en détail dans le prochain article - pour le moment, concentrons-nous sur la structure en elle-même. -<h3 id="Pourquoi_dois-je_lutiliser">Pourquoi dois-je l'utiliser ?</h3> +### Pourquoi dois-je l'utiliser ? -<p>Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que <a href="/fr/docs/Web/Apps/Progressive/Add_to_home_screen">l'ajouter à l'écran d'accueil</a> ou <a href="/fr/docs/Web/API/Push_API">l'envoi de notifications</a>, sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue.</p> +Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que [l'ajouter à l'écran d'accueil](/fr/docs/Web/Apps/Progressive/Add_to_home_screen) ou [l'envoi de notifications](/fr/docs/Web/API/Push_API), sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue. -<p>Le site web se comporte comme une application native, offrant une interaction instantannée et de solides performances tout en conservant les avantages du web.</p> +Le site web se comporte comme une application native, offrant une interaction instantannée et de solides performances tout en conservant les avantages du web. -<h3 id="Être_accessible_par_un_lien_progressive_et_de_conception_adaptative">Être accessible par un lien, progressive et de conception adaptative</h3> +### Être accessible par un lien, progressive et de conception adaptative -<p>Il est important de se rappeler les avantages des PWA et de les garder à l'esprit lorsqu'on conçoit l'application. L'approche app shell permet aux sites web d'être :</p> +Il est important de se rappeler les avantages des PWA et de les garder à l'esprit lorsqu'on conçoit l'application. L'approche app shell permet aux sites web d'être : -<ul> - <li>Accessible par un lien: Même s'il se comporte comme une application native, il reste un site web - vous pouvez cliquer sur les liens d'une page et envoyer une URL à quelqu'un si vous voulez le partager.</li> - <li>Progressive: Commencer avec un "bon vieux site web basic” et ajouter progressivement de nouvelles fonctionnalités tout en se rappelant de détecter si elles sont disponibles dans le navigateur et de gérer proprement toute erreur qui pourrait survenir si la prise en charge n'est pas disponible. Par exemple, un mode déconnecté possible grâce aux service workers n'est qu'une caractéristique bonus qui améliore l'expérience sur le site web, mais ce dernier reste totalement fonctionnel sans elle.</li> - <li>Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">les tags meta viewport</a>, <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">les reqêtes media CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les Flexbox</a> et les <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grid CSS</a>.</li> -</ul> +- Accessible par un lien: Même s'il se comporte comme une application native, il reste un site web - vous pouvez cliquer sur les liens d'une page et envoyer une URL à quelqu'un si vous voulez le partager. +- Progressive: Commencer avec un "bon vieux site web basic” et ajouter progressivement de nouvelles fonctionnalités tout en se rappelant de détecter si elles sont disponibles dans le navigateur et de gérer proprement toute erreur qui pourrait survenir si la prise en charge n'est pas disponible. Par exemple, un mode déconnecté possible grâce aux service workers n'est qu'une caractéristique bonus qui améliore l'expérience sur le site web, mais ce dernier reste totalement fonctionnel sans elle. +- Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que [les tags meta viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), [les reqêtes media CSS](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [les Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) et les [Grid CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). -<h2 id="Approche_différente_les_streams">Approche différente : les streams</h2> +## Approche différente : les streams -<p>Une approche totalement différente du rendu côté serveur - ou client - peut être obtenue à l'aide de l'<a href="/fr/docs/Web/API/Streams_API">API Streams</a>. Avec un peu d'aide des service workers, les streams peuvent grandement améliorer la façon dont nous analysons le contenu.</p> +Une approche totalement différente du rendu côté serveur - ou client - peut être obtenue à l'aide de l'[API Streams](/fr/docs/Web/API/Streams_API). Avec un peu d'aide des service workers, les streams peuvent grandement améliorer la façon dont nous analysons le contenu. -<p>Le modèle app shell nécessite que toutes les ressources soient disponibles avant que le site puisse commencer à être rendu. C'est différent avec HTML pour lequel le navigateur diffuse immédiatement les données si bien que vous pouvez voir quand les éléments sont chargés et et rendus sur le site web. Pour que le JavaScript soit "opérationnel", cependant, il faut attendre qu'il ait été entièrement téléchargé au préalable.</p> +Le modèle app shell nécessite que toutes les ressources soient disponibles avant que le site puisse commencer à être rendu. C'est différent avec HTML pour lequel le navigateur diffuse immédiatement les données si bien que vous pouvez voir quand les éléments sont chargés et et rendus sur le site web. Pour que le JavaScript soit "opérationnel", cependant, il faut attendre qu'il ait été entièrement téléchargé au préalable. -<p>L'API Streams permet aux développeurs d'avoir un accès direct au flux de données provenant du serveur - si vous voulez exécuter une opération sur les données (par exemple ajouter un filtre à une vidéo), vous n'avez plus besoin d'attendre que tout soit téléchargé et converti en un blob (ou autre) - vous pouvez commencer immédiatement. Cela permet un contrôle fin - le flux peut être démarré, chaîné avec un autre flux, annulé, ses erreurs contrôlées, et plus.</p> +L'API Streams permet aux développeurs d'avoir un accès direct au flux de données provenant du serveur - si vous voulez exécuter une opération sur les données (par exemple ajouter un filtre à une vidéo), vous n'avez plus besoin d'attendre que tout soit téléchargé et converti en un blob (ou autre) - vous pouvez commencer immédiatement. Cela permet un contrôle fin - le flux peut être démarré, chaîné avec un autre flux, annulé, ses erreurs contrôlées, et plus. -<p>En théorie, le flux est un meilleur modèle, mais il est également plus complexe et au moment de la rédaction (mars 2018), l'API Stream est toujours un travail en cours et pas encore totalement disponible pour l'ensemble des navigateurs principaux. Quand elle sera disponible, elle sera le moyen le plus rapide de servir le contenu - les bénéfices sont sur le point d'être énormes en terme de performance.</p> +En théorie, le flux est un meilleur modèle, mais il est également plus complexe et au moment de la rédaction (mars 2018), l'API Stream est toujours un travail en cours et pas encore totalement disponible pour l'ensemble des navigateurs principaux. Quand elle sera disponible, elle sera le moyen le plus rapide de servir le contenu - les bénéfices sont sur le point d'être énormes en terme de performance. -<p>Pour voir des exemples fonctionnels et disposer de davantage d'information, voir <a href="/fr/docs/Web/API/Streams_API">la documention de l'API Streams</a>.</p> +Pour voir des exemples fonctionnels et disposer de davantage d'information, voir [la documention de l'API Streams](/fr/docs/Web/API/Streams_API). -<h2 id="Structure_de_notre_application_exemple">Structure de notre application exemple</h2> +## Structure de notre application exemple -<p>La structure du site web <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> est plutôt simple: elle consiste en un simple fichier HTML (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/index.html">index.html</a>) avec un style CSS basique (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/style.css">style.css</a>) et quelques images, scripts et polices de caractères. La structure du répertoire ressemble à ceci:</p> +La structure du site web [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) est plutôt simple: elle consiste en un simple fichier HTML ([index.html](https://github.com/mdn/pwa-examples/blob/master/js13kpwa/index.html)) avec un style CSS basique ([style.css](https://github.com/mdn/pwa-examples/blob/master/js13kpwa/style.css)) et quelques images, scripts et polices de caractères. La structure du répertoire ressemble à ceci: -<p><img alt="Folder structure of js13kPWA." src="js13kpwa-directory.png"></p> + -<h3 id="Le_HTML">Le HTML</h3> +### Le HTML -<p>Du point de vue HTML, l'app shell est tout ce qui est à l'extérieur de la section content:</p> +Du point de vue HTML, l'app shell est tout ce qui est à l'extérieur de la section content: -<pre class="brush: html notranslate"><!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>js13kGames A-Frame entries</title> - <meta name="description" content="A list of A-Frame entries submitted to the js13kGames 2017 competition, used as an example for the MDN articles about Progressive Web Apps."> - <meta name="author" content="end3r"> - <meta name="theme-color" content="#B12A34"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta property="og:image" content="icons/icon-512.png"> - <link rel="shortcut icon" href="favicon.ico"> - <link rel="stylesheet" href="style.css"> - <link rel="manifest" href="js13kpwa.webmanifest"> - <script src="data/games.js" defer></script> - <script src="app.js" defer></script> -</head> -<body> -<header> - <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kGames"></a></p> -</header> -<main> - <h1>js13kGames A-Frame entries</h1> - <p class="description">List of games submitted to the <a href="http://js13kgames.com/aframe">A-Frame category</a> in the <a href="http://2017.js13kgames.com">js13kGames 2017</a> competition. You can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa">fork js13kPWA on GitHub</a> to check its source code.</p> - <button id="notifications">Request dummy notifications</button> - <section id="content"> +```html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>js13kGames A-Frame entries</title> + <meta name="description" content="A list of A-Frame entries submitted to the js13kGames 2017 competition, used as an example for the MDN articles about Progressive Web Apps."> + <meta name="author" content="end3r"> + <meta name="theme-color" content="#B12A34"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta property="og:image" content="icons/icon-512.png"> + <link rel="shortcut icon" href="favicon.ico"> + <link rel="stylesheet" href="style.css"> + <link rel="manifest" href="js13kpwa.webmanifest"> + <script src="data/games.js" defer></script> + <script src="app.js" defer></script> +</head> +<body> +<header> + <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kGames"></a></p> +</header> +<main> + <h1>js13kGames A-Frame entries</h1> + <p class="description">List of games submitted to the <a href="http://js13kgames.com/aframe">A-Frame category</a> in the <a href="http://2017.js13kgames.com">js13kGames 2017</a> competition. You can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa">fork js13kPWA on GitHub</a> to check its source code.</p> + <button id="notifications">Request dummy notifications</button> + <section id="content"> // Le contenu est inséré ici - </section> -</main> -<footer> - <p>© js13kGames 2012-2018, created and maintained by <a href="http://end3r.com">Andrzej Mazur</a> from <a href="http://enclavegames.com">Enclave Games</a>.</p> -</footer> -</body> -</html></pre> - -<p>La section {{htmlelement("head")}} contient certaines informations de base telles que le titre, la description et des liens vers les CSS, le manifeste web, le fichier JS contenant les jeux et app.js — c'est là où notre application JavaScript est initialisée. Le {{htmlelement("body")}} est divisé en {{htmlelement("header")}} (contenant les images liées), {{htmlelement("main")}} la page (avec le titre, la description et un emplacement pour le contenu) et {{htmlelement("footer")}} (le copyright et les liens).</p> - -<p>Le seul travail de l'application est de lister toutes les entrées A-Frame de la compétition js13kGames 2017. Comme vous pouvez le voir, c'est un site web en une page tout ce qu'il y a de plus ordinaire - le but est d'avoir quelque chose de simple afin que nous puissions nous concentrer sur l'implémentation des réelles fonctionnalités PWA.</p> - -<h3 id="Le_CSS">Le CSS</h3> - -<p>Le CSS est également aussi linéaire que possible: il utilise {{cssxref("@font-face")}} pour charger et utiliser une police de caractères personnalisée et il applique quelques mises en forme simples des éléments HTML. L'approche globale est d'avoir une conception qui soit belle à la fois sur les mobiles (avec une approche de conception adaptative) et sur les ordinateurs de bureau.</p> - -<h3 id="Le_fichier_JavaScript_principal">Le fichier JavaScript principal</h3> - -<p>Le fichier app.js file exécute plusieurs choses que nous regarderons de plus près dans les prochains articles. Avant tout, il génère le contenu à l'aide de ce template:</p> - -<pre class="brush: js notranslate">var template = "<article>\n\ - <img src='data/img/SLUG.jpg' alt='NAME'>\n\ - <h3>#POS. NAME</h3>\n\ - <ul>\n\ - <li><span>Author:</span> <strong>AUTHOR</strong></li>\n\ - <li><span>Twitter:</span> <a href='https://twitter.com/TWITTER'>@TWITTER</a></li>\n\ - <li><span>Website:</span> <a href='http://WEBSITE/'>WEBSITE</a></li>\n\ - <li><span>GitHub:</span> <a href='https://GITHUB'>GITHUB</a></li>\n\ - <li><span>More:</span> <a href='http://js13kgames.com/entries/SLUG'>js13kgames.com/entries/SLUG</a></li>\n\ - </ul>\n\ -</article>"; + </section> +</main> +<footer> + <p>© js13kGames 2012-2018, created and maintained by <a href="http://end3r.com">Andrzej Mazur</a> from <a href="http://enclavegames.com">Enclave Games</a>.</p> +</footer> +</body> +</html> +``` + +La section {{htmlelement("head")}} contient certaines informations de base telles que le titre, la description et des liens vers les CSS, le manifeste web, le fichier JS contenant les jeux et app.js — c'est là où notre application JavaScript est initialisée. Le {{htmlelement("body")}} est divisé en {{htmlelement("header")}} (contenant les images liées), {{htmlelement("main")}} la page (avec le titre, la description et un emplacement pour le contenu) et {{htmlelement("footer")}} (le copyright et les liens). + +Le seul travail de l'application est de lister toutes les entrées A-Frame de la compétition js13kGames 2017. Comme vous pouvez le voir, c'est un site web en une page tout ce qu'il y a de plus ordinaire - le but est d'avoir quelque chose de simple afin que nous puissions nous concentrer sur l'implémentation des réelles fonctionnalités PWA. + +### Le CSS + +Le CSS est également aussi linéaire que possible: il utilise {{cssxref("@font-face")}} pour charger et utiliser une police de caractères personnalisée et il applique quelques mises en forme simples des éléments HTML. L'approche globale est d'avoir une conception qui soit belle à la fois sur les mobiles (avec une approche de conception adaptative) et sur les ordinateurs de bureau. + +### Le fichier JavaScript principal + +Le fichier app.js file exécute plusieurs choses que nous regarderons de plus près dans les prochains articles. Avant tout, il génère le contenu à l'aide de ce template: + +```js +var template = "<article>\n\ + <img src='data/img/SLUG.jpg' alt='NAME'>\n\ + <h3>#POS. NAME</h3>\n\ + <ul>\n\ + <li><span>Author:</span> <strong>AUTHOR</strong></li>\n\ + <li><span>Twitter:</span> <a href='https://twitter.com/TWITTER'>@TWITTER</a></li>\n\ + <li><span>Website:</span> <a href='http://WEBSITE/'>WEBSITE</a></li>\n\ + <li><span>GitHub:</span> <a href='https://GITHUB'>GITHUB</a></li>\n\ + <li><span>More:</span> <a href='http://js13kgames.com/entries/SLUG'>js13kgames.com/entries/SLUG</a></li>\n\ + </ul>\n\ +</article>"; var content = ''; -for(var i=0; i<games.length; i++) { +for(var i=0; i<games.length; i++) { var entry = template.replace(/POS/g,(i+1)) .replace(/SLUG/g,games[i].slug) .replace(/NAME/g,games[i].name) @@ -132,31 +131,37 @@ for(var i=0; i<games.length; i++) { .replace(/TWITTER/g,games[i].twitter) .replace(/WEBSITE/g,games[i].website) .replace(/GITHUB/g,games[i].github); - entry = entry.replace('<a href=\'http:///\'></a>','-'); + entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; -document.getElementById('content').innerHTML = content;</pre> +document.getElementById('content').innerHTML = content; +``` -<p>Ensuite, il enregistre un service worker:</p> +Ensuite, il enregistre un service worker: -<pre class="brush: js notranslate">if('serviceWorker' in navigator) { +```js +if('serviceWorker' in navigator) { navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js'); -};</pre> +}; +``` -<p>Le bloc de code suivant demande la permission d'émettre des notifications quand un bouton est cliqué:</p> +Le bloc de code suivant demande la permission d'émettre des notifications quand un bouton est cliqué: -<pre class="brush: js notranslate">var button = document.getElementById("notifications"); +```js +var button = document.getElementById("notifications"); button.addEventListener('click', function(e) { Notification.requestPermission().then(function(result) { if(result === 'granted') { randomNotification(); } }); -});</pre> +}); +``` -<p>Le dernier bloc crée des notifications qui affichent un élément choisi au hasard dans la liste des jeux:</p> +Le dernier bloc crée des notifications qui affichent un élément choisi au hasard dans la liste des jeux: -<pre class="brush: js notranslate">function randomNotification() { +```js +function randomNotification() { var randomItem = Math.floor(Math.random()*games.length); var notifTitle = games[randomItem].name; var notifBody = 'Created by '+games[randomItem].author+'.'; @@ -167,17 +172,21 @@ button.addEventListener('click', function(e) { } var notif = new Notification(notifTitle, options); setTimeout(randomNotification, 30000); -}</pre> +} +``` -<h3 id="Le_service_worker">Le service worker</h3> +### Le service worker -<p>Le dernier fichier que nous allons rapidement regarder est le service worker: sw.js — il importe d'abord les données du fichier games.js:</p> +Le dernier fichier que nous allons rapidement regarder est le service worker: sw\.js — il importe d'abord les données du fichier games.js: -<pre class="brush: js notranslate">self.importScripts('data/games.js');</pre> +```js +self.importScripts('data/games.js'); +``` -<p>Ensuite, il crée une liste de tous les fichiers à mettre en cache, à la fois à partir de l'app shell et du contenu:</p> +Ensuite, il crée une liste de tous les fichiers à mettre en cache, à la fois à partir de l'app shell et du contenu: -<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1'; +```js +var cacheName = 'js13kPWA-v1'; var appShellFiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', @@ -199,14 +208,16 @@ var appShellFiles = [ '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesImages = []; -for(var i=0; i<games.length; i++) { +for(var i=0; i<games.length; i++) { gamesImages.push('data/img/'+games[i].slug+'.jpg'); } -var contentToCache = appShellFiles.concat(gamesImages);</pre> +var contentToCache = appShellFiles.concat(gamesImages); +``` -<p>Le bloc suivant définit la phase d'initialisation de notre service worker lors de laquelle tous les fichiers contenus dans la liste précédente sont effectivement mis en cache:</p> +Le bloc suivant définit la phase d'initialisation de notre service worker lors de laquelle tous les fichiers contenus dans la liste précédente sont effectivement mis en cache: -<pre class="brush: js notranslate">self.addEventListener('install', function(e) { +```js +self.addEventListener('install', function(e) { console.log('[Service Worker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { @@ -214,11 +225,13 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre> return cache.addAll(contentToCache); }) ); -});</pre> +}); +``` -<p>Finalement, nous définissons ici le gestionnaire de l'événement fetch du service worker afin qu'il récupère le contenu du cache s'il y est disponible, offrant un fonctionnement hors connexion:</p> +Finalement, nous définissons ici le gestionnaire de l'événement fetch du service worker afin qu'il récupère le contenu du cache s'il y est disponible, offrant un fonctionnement hors connexion: -<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) { +```js +self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(r) { console.log('[Service Worker] Fetching resource: '+e.request.url); @@ -231,13 +244,15 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre> }); }) ); -});</pre> +}); +``` -<h3 id="Les_données_JavaScript">Les données JavaScript</h3> +### Les données JavaScript -<p>Les données des jeux sont présentes dans le dossier data sous la forme d'un objet JavaScript (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/data/games.js">games.js</a>):</p> +Les données des jeux sont présentes dans le dossier data sous la forme d'un objet JavaScript ([games.js](https://github.com/mdn/pwa-examples/blob/master/js13kpwa/data/games.js)): -<pre class="brush: js notranslate">var games = [ +```js +var games = [ { slug: 'lost-in-cyberspace', name: 'Lost in Cyberspace', @@ -263,14 +278,15 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre> website: '', github: 'github.com/coderprateek/Emma-3D' } -];</pre> +]; +``` -<p>Chaque entrée possède sa propre image dans le dossier data/img. Ceci est notre contenu chargé dans la section content via JavaScript.</p> +Chaque entrée possède sa propre image dans le dossier data/img. Ceci est notre contenu chargé dans la section content via JavaScript. -<h2 id="A_suivre">A suivre</h2> +## A suivre -<p>Dans le prochain article, nous regarderons plus en détail comment l'app shell et le contenu sont mis en cache pour une utilisation en mode déconnecté grâce au service worker.</p> +Dans le prochain article, nous regarderons plus en détail comment l'app shell et le contenu sont mis en cache pour une utilisation en mode déconnecté grâce au service worker. -<p>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</p> +{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}} -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p> +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} diff --git a/files/fr/web/progressive_web_apps/index.md b/files/fr/web/progressive_web_apps/index.md index 0d4f57a709..6f5ec28f28 100644 --- a/files/fr/web/progressive_web_apps/index.md +++ b/files/fr/web/progressive_web_apps/index.md @@ -12,88 +12,79 @@ tags: - Web app translation_of: Web/Progressive_web_apps --- -<p>{{draft}}</p> - -<p>Les <strong>applications Web progressives</strong> utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et fournissent quelques fonctionnalités qui donnent à l'expérience utilisateur les mêmes avantages que les applications natives. Cet ensemble de documents explique tout ce qu'il faut savoir sur ces applications.</p> - -<p>Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : <a href="/fr/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<strong>{{Glossary("HTTPS")}}</strong>), un ou plusieurs <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> et un <a href="/fr/docs/Web/Manifest">fichier manifest</a>.</p> - -<dl> - <dt><a href="/fr/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<a href="/fr/docs/Glossaire/https">HTTPS</a>)</dt> - <dd>L'application web doit être servie sur un réseau sécurisé. Être un site sécurisé est non seulement une bonne pratique, mais cela fait également de votre application web un site de confiance, surtout si les utilisateurs ont besoin d'effectuer des transactions sécurisées. La plupart des fonctionnalités liées à un PWA telles que la géolocalisation et même les Service Workers ne sont disponibles qu'une fois l'application chargée à l'aide de HTTPS.</dd> - <dt><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></dt> - <dd>Un <em>Service Worker</em> est un script qui permet d'intercepter et de contrôler la façon dont un navigateur web traite ses requêtes réseau et la mise en cache des ressources. Avec les Service Workers, les développeurs web peuvent créer des pages web rapides et fiables et des expériences hors ligne.</dd> - <dt><a href="/fr/docs/Web/Manifest">Manifest file</a></dt> - <dd>Un fichier {{Glossary("JSON")}} qui contrôle la façon dont votre application apparaît à l'utilisateur et garantit que les applications web progressives sont découvrables. Il décrit le nom de l'application, l'URL de démarrage, les icônes et tous les autres détails nécessaires pour transformer le site web en un format similaire à celui d'une application.</dd> -</dl> - -<h2 id="Avantages_PWA">Avantages PWA</h2> - -<p>Les PWA doivent pouvoir être découvertes, installées, reliées, indépendantes du réseau, progressives, réengageables, réactives et sûres. Pour en savoir plus sur la signification de ces éléments, lisez <a href="/fr/docs/Web/Progressive_web_apps/Introduction">Avantages des applications web progressives</a>.</p> - -<p>Pour savoir comment mettre en œuvre les PWA, lisez notre <a href="/fr/docs/Web/Progressive_web_apps/Developer_guide">guide du développeur de PWA</a>.</p> - -<h2 id="Documentation">Documentation</h2> - -<p><strong><-- La liste automatique temporaire ci-dessous sera bientôt remplacée --></strong></p> - -<p>{{LandingPageListSubpages}}</p> - -<div class="warning"> -<p><strong>Attention :</strong> ce qui se trouve en dessous de ce point est un reste de l'ancienne version de cette page et sera remanié au fur et à mesure de la révision des autres contenus.</p> -</div> - -<h2 id="Guides_de_base_des_PWA">Guides de base des PWA</h2> - -<p>Les guides suivants vous montrent ce qu'il faut faire pour mettre en œuvre une PWA, en examinant un exemple simple et en vous montrant comment tous les éléments fonctionnent.</p> - -<ol> - <li><a href="/fr/docs/Web/Progressive_web_apps/Introduction">Introduction aux applications web progressives</a></li> - <li><a href="/fr/docs/Web/Progressive_web_apps/App_structure">Structure progressive des applications web</a></li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">Faire travailler les VAP en différé avec les travailleurs des services</a></li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Installable_PWAs">Comment rendre les PWA installables</a></li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Relancer_Via_Notifications_Push">Comment rendre les PWA réengageables en utilisant les notifications et le Push</a></li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Chargement">Chargement progressif</a></li> - <li><a href="https://pwafire.org">Collection de ressources, de codelabs et d'outils dont vous avez besoin pour construire des PWA par l'équipe de pwafire.org</a></li> - <li><a href="https://github.com/pwafire/pwadev-tips">Mise en place de votre environnement de développement d'applications web progressives</a></li> -</ol> - -<h2 id="Guides_technologiques">Guides technologiques</h2> - -<ul> - <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a> – un long guide montrant comment et quand utiliser le stockage web, IndexedDB et les Service Workers.</li> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a> – un guide plus approfondi couvrant l'API Service Worker.</li> - <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a> – les principes fondamentaux d'IndexedDB, expliqués en détail.</li> - <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a> – l'API de stockage Web simplifiée.</li> - <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Instant Loading Web Apps with An Application Shell Architecture</a> – un guide sur l'utilisation du modèle de codage App Shell pour créer des applications qui se chargent rapidement.</li> - <li><a href="/fr/docs/Web/API/Push_API/Using_the_Push_API">Utilisation de l'API Push</a> – apprenez l'essentiel sur l'API Web Push.</li> - <li><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utilisation des notifications API</a> – les notifications Web en bref.</li> - <li><a href="/fr/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">Les éléments de base du design réactif</a> – apprenez les bases du design réactif, un sujet essentiel pour la mise en page d'une application moderne.</li> - <li><a href="/fr/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> – souvent, lors de la création de mises en page d'applications réactives, il est judicieux de créer la mise en page mobile par défaut, et de construire des mises en page plus larges par-dessus.</li> - <li><a href="/fr/docs/Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs">Guide de l'ajout à l'écran d'accueil</a> – découvrez comment vos applications peuvent tirer profit de l'ajout à l'écran d'accueil (A2HS).</li> -</ul> -<h2 id="Outils">Outils</h2> - -<ul> - <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> – une belle et simple bibliothèque JavaScript pour rendre le stockage de données côté client vraiment simple ; elle utilise IndexedDB par défaut et revient à Web SQL/Web Storage si nécessaire.</li> - <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> – un <em>Express-like</em> microframe pour faciliter le développement du Service Worker.</li> - <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> – il s'agit non seulement d'un modèle, mais aussi d'un outil permettant de déployer des applications Web hors ligne sur des pages GitHub.</li> - <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> – un module de nœud pour générer un code de travailleur de service qui précache des ressources spécifiques.</li> - <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> – successeur spirituel du sw-precache avec des stratégies de mise en cache plus avancées et un précaching facile.</li> - <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> – un petit script qui assure que votre site est toujours là pour vos utilisateurs.</li> - <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> – une série d'excellentes recettes de service worker/push, montrant comment mettre en œuvre une application hors ligne, mais aussi bien plus.</li> - <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">WA VS Code extension</a> – une collection de tous les extraits de code essentiels dont vous avez besoin pour créer des applications Web progressives dans votre environnement VS Code.</li> - <li><a href="https://developers.google.com/web/progressive-web-apps">Apps web progressives</a> sur Google Developers.</li> - <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Applications Web progressives : Échapper aux tabulations sans perdre son âme</a> par Alex Russell.</li> - <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Liste de contrôle des applications Web progressives</a>.</li> - <li><a href="https://developers.google.com/web/tools/lighthouse">L'outil phare</a> par Google.</li> - <li><a href="https://github.com/angular/mobile-toolkit">Outils pour créer des applications web progressives avec Angular</a>.</li> - <li><a href="https://github.com/codebusking/react-pwa-guide-kit">Guide PWA React</a>.</li> - <li><a href="https://pokedex.org/">Offline-capable Pokédex web site</a>.</li> - <li><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a>.</li> - <li><a href="https://goingmeta.io/dienstleistungen/progressive-web-app/">Application Web progressive : Les avantages en bref</a></li> - <li><a href="https://ymedialabs.com/progressive-web-apps">Pourquoi les applications Web progressives sont l'avenir du Web mobile (recherche 2019)</a>.</li> - <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/">Applications Web progressives : Tout ce que vous devez savoir</a></li> -</ul> - -<div>{{QuickLinksWithSubpages("/fr/docs/Web/Progressive_web_apps/")}}</div> +{{draft}} + +Les **applications Web progressives** utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et fournissent quelques fonctionnalités qui donnent à l'expérience utilisateur les mêmes avantages que les applications natives. Cet ensemble de documents explique tout ce qu'il faut savoir sur ces applications. + +Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : [Secure contexts](/fr/docs/Web/Security/Secure_Contexts) (**{{Glossary("HTTPS")}}**), un ou plusieurs [Service Workers](/fr/docs/Web/API/Service_Worker_API) et un [fichier manifest](/fr/docs/Web/Manifest). + +- [Secure contexts](/fr/docs/Web/Security/Secure_Contexts) ([HTTPS](/fr/docs/Glossaire/https)) + - : L'application web doit être servie sur un réseau sécurisé. Être un site sécurisé est non seulement une bonne pratique, mais cela fait également de votre application web un site de confiance, surtout si les utilisateurs ont besoin d'effectuer des transactions sécurisées. La plupart des fonctionnalités liées à un PWA telles que la géolocalisation et même les Service Workers ne sont disponibles qu'une fois l'application chargée à l'aide de HTTPS. +- [Service workers](/fr/docs/Web/API/Service_Worker_API) + - : Un _Service Worker_ est un script qui permet d'intercepter et de contrôler la façon dont un navigateur web traite ses requêtes réseau et la mise en cache des ressources. Avec les Service Workers, les développeurs web peuvent créer des pages web rapides et fiables et des expériences hors ligne. +- [Manifest file](/fr/docs/Web/Manifest) + - : Un fichier {{Glossary("JSON")}} qui contrôle la façon dont votre application apparaît à l'utilisateur et garantit que les applications web progressives sont découvrables. Il décrit le nom de l'application, l'URL de démarrage, les icônes et tous les autres détails nécessaires pour transformer le site web en un format similaire à celui d'une application. + +## Avantages PWA + +Les PWA doivent pouvoir être découvertes, installées, reliées, indépendantes du réseau, progressives, réengageables, réactives et sûres. Pour en savoir plus sur la signification de ces éléments, lisez [Avantages des applications web progressives](/fr/docs/Web/Progressive_web_apps/Introduction). + +Pour savoir comment mettre en œuvre les PWA, lisez notre [guide du développeur de PWA](/fr/docs/Web/Progressive_web_apps/Developer_guide). + +## Documentation + +**<-- La liste automatique temporaire ci-dessous sera bientôt remplacée -->** + +{{LandingPageListSubpages}} + +> **Attention :** ce qui se trouve en dessous de ce point est un reste de l'ancienne version de cette page et sera remanié au fur et à mesure de la révision des autres contenus. + +## Guides de base des PWA + +Les guides suivants vous montrent ce qu'il faut faire pour mettre en œuvre une PWA, en examinant un exemple simple et en vous montrant comment tous les éléments fonctionnent. + +1. [Introduction aux applications web progressives](/fr/docs/Web/Progressive_web_apps/Introduction) +2. [Structure progressive des applications web](/fr/docs/Web/Progressive_web_apps/App_structure) +3. [Faire travailler les VAP en différé avec les travailleurs des services](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers) +4. [Comment rendre les PWA installables](/fr/docs/Web/Progressive_web_apps/Installable_PWAs) +5. [Comment rendre les PWA réengageables en utilisant les notifications et le Push](/fr/docs/Web/Progressive_web_apps/Relancer_Via_Notifications_Push) +6. [Chargement progressif](/fr/docs/Web/Progressive_web_apps/Chargement) +7. [Collection de ressources, de codelabs et d'outils dont vous avez besoin pour construire des PWA par l'équipe de pwafire.org](https://pwafire.org) +8. [Mise en place de votre environnement de développement d'applications web progressives](https://github.com/pwafire/pwadev-tips) + +## Guides technologiques + +- [Stockage côté client](/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) – un long guide montrant comment et quand utiliser le stockage web, IndexedDB et les Service Workers. +- [Using service workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) – un guide plus approfondi couvrant l'API Service Worker. +- [Utilisation d'IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB) – les principes fondamentaux d'IndexedDB, expliqués en détail. +- [Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) – l'API de stockage Web simplifiée. +- [Instant Loading Web Apps with An Application Shell Architecture](https://developers.google.com/web/updates/2015/11/app-shell) – un guide sur l'utilisation du modèle de codage App Shell pour créer des applications qui se chargent rapidement. +- [Utilisation de l'API Push](/fr/docs/Web/API/Push_API/Using_the_Push_API) – apprenez l'essentiel sur l'API Web Push. +- [Utilisation des notifications API](/fr/docs/Web/API/notification/Using_Web_Notifications) – les notifications Web en bref. +- [Les éléments de base du design réactif](/fr/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks) – apprenez les bases du design réactif, un sujet essentiel pour la mise en page d'une application moderne. +- [Mobile first](/fr/docs/Web/Apps/Modern/Responsive/Mobile_first) – souvent, lors de la création de mises en page d'applications réactives, il est judicieux de créer la mise en page mobile par défaut, et de construire des mises en page plus larges par-dessus. +- [Guide de l'ajout à l'écran d'accueil](/fr/docs/Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs) – découvrez comment vos applications peuvent tirer profit de l'ajout à l'écran d'accueil (A2HS). + +## Outils + +- [localForage](https://localforage.github.io/localForage/) – une belle et simple bibliothèque JavaScript pour rendre le stockage de données côté client vraiment simple ; elle utilise IndexedDB par défaut et revient à Web SQL/Web Storage si nécessaire. +- [ServiceWorkerWare](https://github.com/fxos-components/serviceworkerware) – un _Express-like_ microframe pour faciliter le développement du Service Worker. +- [oghliner](https://github.com/mozilla/oghliner) – il s'agit non seulement d'un modèle, mais aussi d'un outil permettant de déployer des applications Web hors ligne sur des pages GitHub. +- [sw-precache](https://github.com/GoogleChrome/sw-precache) – un module de nœud pour générer un code de travailleur de service qui précache des ressources spécifiques. +- [workbox](https://github.com/GoogleChrome/workbox) – successeur spirituel du sw-precache avec des stratégies de mise en cache plus avancées et un précaching facile. +- [upup](https://www.talater.com/upup/) – un petit script qui assure que votre site est toujours là pour vos utilisateurs. +- [The service worker cookbook](https://serviceworke.rs/) – une série d'excellentes recettes de service worker/push, montrant comment mettre en œuvre une application hors ligne, mais aussi bien plus. +- [WA VS Code extension](https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa) – une collection de tous les extraits de code essentiels dont vous avez besoin pour créer des applications Web progressives dans votre environnement VS Code. +- [Apps web progressives](https://developers.google.com/web/progressive-web-apps) sur Google Developers. +- [Applications Web progressives : Échapper aux tabulations sans perdre son âme](https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh) par Alex Russell. +- [Liste de contrôle des applications Web progressives](https://developers.google.com/web/progressive-web-apps/checklist). +- [L'outil phare](https://developers.google.com/web/tools/lighthouse) par Google. +- [Outils pour créer des applications web progressives avec Angular](https://github.com/angular/mobile-toolkit). +- [Guide PWA React](https://github.com/codebusking/react-pwa-guide-kit). +- [Offline-capable Pokédex web site](https://pokedex.org/). +- [Hacker News readers as Progressive Web Apps](https://hnpwa.com/). +- [Application Web progressive : Les avantages en bref](https://goingmeta.io/dienstleistungen/progressive-web-app/) +- [Pourquoi les applications Web progressives sont l'avenir du Web mobile (recherche 2019)](https://ymedialabs.com/progressive-web-apps). +- [Applications Web progressives : Tout ce que vous devez savoir](https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/) + +{{QuickLinksWithSubpages("/fr/docs/Web/Progressive_web_apps/")}} diff --git a/files/fr/web/progressive_web_apps/installable_pwas/index.md b/files/fr/web/progressive_web_apps/installable_pwas/index.md index 012aa8ce8c..13caf63663 100644 --- a/files/fr/web/progressive_web_apps/installable_pwas/index.md +++ b/files/fr/web/progressive_web_apps/installable_pwas/index.md @@ -3,40 +3,39 @@ title: Comment rendre les PWAs installables slug: Web/Progressive_web_apps/Installable_PWAs translation_of: Web/Progressive_web_apps/Installable_PWAs --- -<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div> +{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}} -<p>Dans l'article précédent, nous avons vu comment <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> fonctionne en mode déconnecté grâce à son <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>, mais nous pouvons aller encore plus loin et permettre aux utilisateurs d'installer l'application web sur les navigateurs mobiles pris en charge, comme s'il s'agissait d'une application native. Cet article explique comment réaliser ceci en utilisant un manifeste web et une fonctionnalité appelée "ajouter à l'écran d'accueil".</p> +Dans l'article précédent, nous avons vu comment [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) fonctionne en mode déconnecté grâce à son [service worker](/fr/docs/Web/API/Service_Worker_API), mais nous pouvons aller encore plus loin et permettre aux utilisateurs d'installer l'application web sur les navigateurs mobiles pris en charge, comme s'il s'agissait d'une application native. Cet article explique comment réaliser ceci en utilisant un manifeste web et une fonctionnalité appelée "ajouter à l'écran d'accueil". -<p>Ces technologies permettent à l'application d'être directement lancée depuis l'écran d'accueil de l'appareil au lieu de lancer manuellement le navigateur puis de saisir l'URL. Votre application web peut se trouver à côté des applications natives en tant qu'application de première catégorie. De ce fait, il est plus facile d'y accéder et vous pouvez également spécifier qu'une application doit s'exécuter en plein écran sans l'encadrement du navigateur hôte, ce qui la fait ressembler encore plus à une application native.</p> +Ces technologies permettent à l'application d'être directement lancée depuis l'écran d'accueil de l'appareil au lieu de lancer manuellement le navigateur puis de saisir l'URL. Votre application web peut se trouver à côté des applications natives en tant qu'application de première catégorie. De ce fait, il est plus facile d'y accéder et vous pouvez également spécifier qu'une application doit s'exécuter en plein écran sans l'encadrement du navigateur hôte, ce qui la fait ressembler encore plus à une application native. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Pour rendre un site web installable, il a besoin que les éléments suivants soient mis en place:</p> +Pour rendre un site web installable, il a besoin que les éléments suivants soient mis en place: -<ul> - <li>Un manifeste web, avec les <a href="/fr/Apps/Progressive/Add_to_home_screen#Manifest">bons champs renseignés</a></li> - <li>Le site web à servir depuis un domaine sécurisé (HTTPS)</li> - <li>Un icone représentant l'application sur l'appareil</li> - <li>Un service worker enregistré pour permettre à l'application de fonctionner en mode déconnecté (ceci n'est actuellement imposé que par Chrome pour Android)</li> -</ul> +- Un manifeste web, avec les [bons champs renseignés](/fr/Apps/Progressive/Add_to_home_screen#Manifest) +- Le site web à servir depuis un domaine sécurisé (HTTPS) +- Un icone représentant l'application sur l'appareil +- Un service worker enregistré pour permettre à l'application de fonctionner en mode déconnecté (ceci n'est actuellement imposé que par Chrome pour Android) -<h3 id="Le_fichier_manisfeste">Le fichier manisfeste</h3> +### Le fichier manisfeste -<p>L'élément clef est un fichier manifeste web qui liste toutes les informations concernant le site web au format JSON.</p> +L'élément clef est un fichier manifeste web qui liste toutes les informations concernant le site web au format JSON. -<p>Il se trouve habituellement dans le dossier racine de l'application web. Il contient des informations utiles telles que le nom de l'application, le chemin vers les icones de différentes tailles à utiliser pour représenter l'application sur un système d'exploitation mobile (par exemple, en tant qu'icone sur l'écran d'accueil) et une couleur de fond à utiliser pour les écrans de chargement ou surgissant. Cette information est nécessaire pour que le navigateur puisse présenter correctement l'application lors de l'installation et sur l'écran d'accueil.</p> +Il se trouve habituellement dans le dossier racine de l'application web. Il contient des informations utiles telles que le nom de l'application, le chemin vers les icones de différentes tailles à utiliser pour représenter l'application sur un système d'exploitation mobile (par exemple, en tant qu'icone sur l'écran d'accueil) et une couleur de fond à utiliser pour les écrans de chargement ou surgissant. Cette information est nécessaire pour que le navigateur puisse présenter correctement l'application lors de l'installation et sur l'écran d'accueil. -<p>Le fichier <code>js13kpwa.webmanifest</code> de l'application web <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> est inclus dans la section {{htmlelement("head")}} du fichier <code>index.html</code> via la ligne de code suivante:</p> +Le fichier `js13kpwa.webmanifest` de l'application web [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) est inclus dans la section {{htmlelement("head")}} du fichier `index.html` via la ligne de code suivante: -<pre class="brush: html"><link rel="manifest" href="js13kpwa.webmanifest"></pre> +```html +<link rel="manifest" href="js13kpwa.webmanifest"> +``` -<div class="note"> -<p><strong>Note :</strong> Il existe quelques extensions courantes qui ont été utilisées pour les manifestes par le passé: <code>manifest.webapp</code> fut populaire pour les manifestes des applications Firefox OS et nombreux sont ceux qui utilisent <code>manifest.json</code> pour les manifestes web attendu que le contenu est organisé sous forme d'une structure JSON. Cependant, l'extension <code>.webmanifest</code> est explicitement mentionnée dans la <a href="https://w3c.github.io/manifest/">W3C relative au manifeste</a>, donc conformons nous à cela.</p> -</div> +> **Note :** Il existe quelques extensions courantes qui ont été utilisées pour les manifestes par le passé: `manifest.webapp` fut populaire pour les manifestes des applications Firefox OS et nombreux sont ceux qui utilisent `manifest.json` pour les manifestes web attendu que le contenu est organisé sous forme d'une structure JSON. Cependant, l'extension `.webmanifest` est explicitement mentionnée dans la [W3C relative au manifeste](https://w3c.github.io/manifest/), donc conformons nous à cela. -<p>Le contenu d'un fichier ressemble à ceci:</p> +Le contenu d'un fichier ressemble à ceci: -<pre class="brush: json">{ +```json +{ "name": "Application Web progressive js13kGames", "short_name": "js13kPWA", "description": "Application web progressive qui liste les jeux soumis dans la catégorie A-Frame dans la compétition js13kGames 2017.", @@ -57,61 +56,60 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs "display": "fullscreen", "theme_color": "#B12A34", "background_color": "#B12A34" -}</pre> +} +``` -<p>La plupart des champs sont explicites, mais décortiquons le document et expliquons-le en détail:</p> +La plupart des champs sont explicites, mais décortiquons le document et expliquons-le en détail: -<ul> - <li><code>name</code>: Le nom complet de l'application.</li> - <li><code>short_name</code>: Nom résumé à afficher sur l'écran d'accueil.</li> - <li><code>description</code>: Une phrase ou deux expliquant ce que fait l'application.</li> - <li><code>icons</code>: Un paquet d'informations relatives aux icones — URL sources, tailles et types. Assurez-vous d'en indiquer au moins quelques unes de façon à ce que celle qui est la mieux adaptée soit choisie pour l'appareil de l'utilisateur.</li> - <li><code>start_url</code>: Le document index document à lancer au démarrage de l'application.</li> - <li><code>display</code>: Comment l'application est affichée; ce peut être fullscreen, standalone, minimal-ui ou browser.</li> - <li><code>theme_color</code>: Une couleur primaire pour l'interface utilisateur et qui sera utilisée par le système d'exploitation.</li> - <li><code>background_color</code>: Une couleur de fond utilisée lors de l'installation et pour l'écran de chargement.</li> -</ul> +- `name`: Le nom complet de l'application. +- `short_name`: Nom résumé à afficher sur l'écran d'accueil. +- `description`: Une phrase ou deux expliquant ce que fait l'application. +- `icons`: Un paquet d'informations relatives aux icones — URL sources, tailles et types. Assurez-vous d'en indiquer au moins quelques unes de façon à ce que celle qui est la mieux adaptée soit choisie pour l'appareil de l'utilisateur. +- `start_url`: Le document index document à lancer au démarrage de l'application. +- `display`: Comment l'application est affichée; ce peut être fullscreen, standalone, minimal-ui ou browser. +- `theme_color`: Une couleur primaire pour l'interface utilisateur et qui sera utilisée par le système d'exploitation. +- `background_color`: Une couleur de fond utilisée lors de l'installation et pour l'écran de chargement. -<p>Le minimum requis pour un manifeste web est le nom (<code>name</code>) et au moins un icone (avec <code>src</code>, <code>size</code> et <code>type</code>). <code>description</code>, <code>short_name</code> et <code>start_url</code> sont recommandés. Il existe même plus de champs que ceux listés ci-dessus et que vous pouvez utiliser — voir <a href="/fr/docs/Web/Manifest">la réference du Manifeste des Web Apps</a> pour avoir davatange de détails.</p> +Le minimum requis pour un manifeste web est le nom (`name`) et au moins un icone (avec `src`, `size` et `type`). `description`, `short_name` et `start_url` sont recommandés. Il existe même plus de champs que ceux listés ci-dessus et que vous pouvez utiliser — voir [la réference du Manifeste des Web Apps](/fr/docs/Web/Manifest) pour avoir davatange de détails. -<h2 id="Ajout_à_lécran_daccueil">Ajout à l'écran d'accueil</h2> +## Ajout à l'écran d'accueil -<p>"Ajout à l'écran d'accueil" ("Add to home screen" ou a2hs pour faire court) est une fonctionnalité implémentée par les navigateurs mobiles qui récupèrent les informations trouvées dans le manifeste de l'application web et les utilisent pour représenter l'application sur l'écran d'accueil de l'appareil avec un icone et un nom. Ceci ne fonctionne que si l'application s'est conformées à tous les prérequis décrits plus haut.</p> +"Ajout à l'écran d'accueil" ("Add to home screen" ou a2hs pour faire court) est une fonctionnalité implémentée par les navigateurs mobiles qui récupèrent les informations trouvées dans le manifeste de l'application web et les utilisent pour représenter l'application sur l'écran d'accueil de l'appareil avec un icone et un nom. Ceci ne fonctionne que si l'application s'est conformées à tous les prérequis décrits plus haut. -<p>Quand l'utilisateur navigue sur la PWA en utilisant un navigateur les prenant en charge, il doit voir s'afficher une banière indiquant qu'il est possible d'installer l'application en tant que PWA.</p> +Quand l'utilisateur navigue sur la PWA en utilisant un navigateur les prenant en charge, il doit voir s'afficher une banière indiquant qu'il est possible d'installer l'application en tant que PWA. -<p><img alt="Add to Home screen popup of js13kPWA." src="js13kpwa-icon.png"></p> + -<p>Après que l'utilisateur a cliqué sur cette banière, la banière d'installation est affichée. Cette banière est automatiquement créée par le navigateur en se basant sur les informations contenues dans le fichier manifeste — le nom et l'icone sont visibles dans la boîte de dialogue.</p> +Après que l'utilisateur a cliqué sur cette banière, la banière d'installation est affichée. Cette banière est automatiquement créée par le navigateur en se basant sur les informations contenues dans le fichier manifeste — le nom et l'icone sont visibles dans la boîte de dialogue. -<p><img alt="Install banner of js13kPWA." src="js13kpwa-banner.png"></p> + -<p>Si l'utilisateur clique sur le bouton, il y a une dernière étape montrant à quoi l'application ressemble et permettant à l'utilisateur de confirmer qu'il veut vraiment ajouter l'application.</p> +Si l'utilisateur clique sur le bouton, il y a une dernière étape montrant à quoi l'application ressemble et permettant à l'utilisateur de confirmer qu'il veut vraiment ajouter l'application. -<p><img alt="Add to Home screen popup of js13kPWA." src="js13kpwa-add.png"></p> + -<p>Une fois la confirmation donnée, l'application sera installée sur l'écran d'accueil.</p> +Une fois la confirmation donnée, l'application sera installée sur l'écran d'accueil. -<p><img alt="" src="js13kpwa-installed.png"></p> + -<p>APrès cela, l'utlisateur peut la lancer et commencer à l'utiliser immédiatement. Notez que parfois (selon le navigateur ou le système d'exploitation mobile que vous utilisez) les PWA ont une petite image de navigateur dans le coin inférieur droit de leur icone pour informer l'utilisateur de leur nature web.</p> +APrès cela, l'utlisateur peut la lancer et commencer à l'utiliser immédiatement. Notez que parfois (selon le navigateur ou le système d'exploitation mobile que vous utilisez) les PWA ont une petite image de navigateur dans le coin inférieur droit de leur icone pour informer l'utilisateur de leur nature web. -<h3 id="Ecran_de_démarrage">Ecran de démarrage</h3> +### Ecran de démarrage -<p>Avec certains navigateurs, un écran de démarrage est également généré à partir des informations issues du manifeste et qui est affiché quand la PWA est lancée.</p> +Avec certains navigateurs, un écran de démarrage est également généré à partir des informations issues du manifeste et qui est affiché quand la PWA est lancée. -<p><img alt="" src="js13kpwa-splash.png"></p> + -<p>L'icone et les couleurs du thème et du fond sont utilisés pour créer cet écran.</p> +L'icone et les couleurs du thème et du fond sont utilisés pour créer cet écran. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Dans cet article, nous avons appris comment nous pouvons rendre une PWA installable en utilisant un manisfeste web et l'écran "Ajouter à l'écran d'accueil".</p> +Dans cet article, nous avons appris comment nous pouvons rendre une PWA installable en utilisant un manisfeste web et l'écran "Ajouter à l'écran d'accueil". -<p>Pour plus d'information sur l'écran "Ajout à l'écran d'accueil", reportez-vous au <a href="/fr/docs/Web/Apps/Progressive/Add_to_home_screen">guide d'ajout à l'écran d'accueil</a>. La prise en charge des navigateurs est actuellement limitée à Firefox pour Android 58+, Mobile Chrome et Android Webview 31+ et Opera pour Android 32+, mais ceci doit s'améliorer dans un proche avenir.</p> +Pour plus d'information sur l'écran "Ajout à l'écran d'accueil", reportez-vous au [guide d'ajout à l'écran d'accueil](/fr/docs/Web/Apps/Progressive/Add_to_home_screen). La prise en charge des navigateurs est actuellement limitée à Firefox pour Android 58+, Mobile Chrome et Android Webview 31+ et Opera pour Android 32+, mais ceci doit s'améliorer dans un proche avenir. -<p>Maintenant voyons la dernière pièce du puzzle PWA puzzle — ré-engagement via les notifications poussées.</p> +Maintenant voyons la dernière pièce du puzzle PWA puzzle — ré-engagement via les notifications poussées. -<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p> +{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}} -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p> +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} diff --git a/files/fr/web/progressive_web_apps/introduction/index.md b/files/fr/web/progressive_web_apps/introduction/index.md index 894bfc00ff..14d5beeaf6 100644 --- a/files/fr/web/progressive_web_apps/introduction/index.md +++ b/files/fr/web/progressive_web_apps/introduction/index.md @@ -9,88 +9,84 @@ tags: - web manifest translation_of: Web/Progressive_web_apps/Introduction --- -<div>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</div> +{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}} -<p>Cet article fournit une introduction aux Progressive Web Apps (PWA), présentant ce qui les caractérise, et les avantages qu'elles apportent par rapport à de simples applications web.</p> +Cet article fournit une introduction aux Progressive Web Apps (PWA), présentant ce qui les caractérise, et les avantages qu'elles apportent par rapport à de simples applications web. -<h2 id="Quest-ce_quune_Progressive_Web_App">Qu'est-ce qu'une Progressive Web App?</h2> +## Qu'est-ce qu'une Progressive Web App? -<p>Les PWA sont des applications web développées à l'aide de technologies spécifiques et de standards leur permettant de tirer parti à la fois des fonctionnalités du web et de celles des applications natives.</p> +Les PWA sont des applications web développées à l'aide de technologies spécifiques et de standards leur permettant de tirer parti à la fois des fonctionnalités du web et de celles des applications natives. -<p>Par exemple, les applications web sont plus faciles à trouver — c'est beaucoup plus facile et rapide de consulter un site web que d'installer une application, et ces applications web peuvent être partagées grâce à un lien.</p> +Par exemple, les applications web sont plus faciles à trouver — c'est beaucoup plus facile et rapide de consulter un site web que d'installer une application, et ces applications web peuvent être partagées grâce à un lien. -<p>Par ailleurs, les applications natives s'intègrent mieux avec le système d'exploitation et offrent souvent une expérience utilisateur plus fluide. Vous pouvez installer une application native afin qu'elle fonctionne hors-ligne, et les utilisateurs préfèrent ouvrir leur applications favorites via les icônes présentent sur leur écran d'accueil de téléphone, plutôt que d'y accéder via leur navigateur.</p> +Par ailleurs, les applications natives s'intègrent mieux avec le système d'exploitation et offrent souvent une expérience utilisateur plus fluide. Vous pouvez installer une application native afin qu'elle fonctionne hors-ligne, et les utilisateurs préfèrent ouvrir leur applications favorites via les icônes présentent sur leur écran d'accueil de téléphone, plutôt que d'y accéder via leur navigateur. -<p>Les PWA nous offrent la possibilité de créer des applications web qui bénéficient des mêmes avantages.</p> +Les PWA nous offrent la possibilité de créer des applications web qui bénéficient des mêmes avantages. -<p>Ce n'est pas un tout nouveau concept — par le passé, ce type d'idées ont été revues de nombreuses fois sur le web avec des approches différentes. L'amélioration progressive (<em>progressive enhancement</em>) et le <em>responsive design</em> nous permettent déjà de créer des site web plus accessibles sur téléphone. Travailler hors-ligne et installer des applications était possible au sein de l'environnement Firefox OS il y a quelques années.</p> +Ce n'est pas un tout nouveau concept — par le passé, ce type d'idées ont été revues de nombreuses fois sur le web avec des approches différentes. L'amélioration progressive (_progressive enhancement_) et le _responsive design_ nous permettent déjà de créer des site web plus accessibles sur téléphone. Travailler hors-ligne et installer des applications était possible au sein de l'environnement Firefox OS il y a quelques années. -<p>Les PWA, cependant, vont encore plus loin, sans pour autant se débarrasser des fonctionnalités qui font la force du web.</p> +Les PWA, cependant, vont encore plus loin, sans pour autant se débarrasser des fonctionnalités qui font la force du web. -<h2 id="Quest-ce_qui_caractérise_une_PWA">Qu'est-ce qui caractérise une PWA ?</h2> +## Qu'est-ce qui caractérise une PWA ? -<p>Comme suggéré plus haut, les PWA ne sont pas créées à l'aide d'une seule technologie. Elles constituent une nouvelle philosophie pour faire des applications web, impliquant certains motifs spécifiques, des API, et d'autres fonctionnalités. De prime abord, ce n'est pas évident de savoir si une application web est une application web progressive. Une application peut être considérée une application web progressive si elle remplit certains critères, ou implémente un ensemble de fonctionnatilés données: fonctionne hors-ligne, est installable, est facile à synchroniser, peut envoyer des notifications <em>push</em>, etc.</p> +Comme suggéré plus haut, les PWA ne sont pas créées à l'aide d'une seule technologie. Elles constituent une nouvelle philosophie pour faire des applications web, impliquant certains motifs spécifiques, des API, et d'autres fonctionnalités. De prime abord, ce n'est pas évident de savoir si une application web est une application web progressive. Une application peut être considérée une application web progressive si elle remplit certains critères, ou implémente un ensemble de fonctionnatilés données: fonctionne hors-ligne, est installable, est facile à synchroniser, peut envoyer des notifications _push_, etc. -<p>En complément, il existe des outils pour mesurer le pourcentage de conformité d'une application a être une application web progressive (<a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> est actuellement le plus populaire). En implémentant une variété de technologies, nous pouvons rendre une application plus progressive, finissant ainsi avec un score Lighthouse plus élevé. Mais ce n'est qu'un indicateur global.</p> +En complément, il existe des outils pour mesurer le pourcentage de conformité d'une application a être une application web progressive ([Lighthouse](https://developers.google.com/web/tools/lighthouse/) est actuellement le plus populaire). En implémentant une variété de technologies, nous pouvons rendre une application plus progressive, finissant ainsi avec un score Lighthouse plus élevé. Mais ce n'est qu'un indicateur global. -<p>Il y a des principes clés qu'une application web devrait suivre afin d'être identifée comme une PWA. Elle doit être:</p> +Il y a des principes clés qu'une application web devrait suivre afin d'être identifée comme une PWA. Elle doit être: -<ul> - <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Discoverable">Discoverable</a>, afin que le contenu soit trouvé à l'aide de moteurs de recherche.</li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Installable">Installable</a>, afin d'être disponible sur l'écran d'accueil de l'appareil.</li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Linkable">Linkable</a>, afin que vous puissiez la partager simplement en envoyant un lien. </li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Network_independent">Network independent</a>, afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet.</li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Progressive">Progressive</a>, afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers.</li> - <li><a href="/fr/docs/Web/Progressive_web_apps/Advantages#Re-engageable">Re-engageable</a>, afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible.</li> - <li><a href="/fr/docs/web/Progressive_web_apps/Advantages#Responsive">Responsive</a>, afin q'uelle soit fonctionnelle sur n'importe quel appareil et résolution d'écran — téléphones mobiles, tablettes, ordinateurs portables, télévisions, réfrigérateurs, etc.</li> - <li><a href="/fr/docs/web/Progressive_web_apps/Advantages#Safe">Safe</a>, afin que le connexion entre vous et l'application soit sécurisée et prévienne n'importe quel tiers d'accéder à vos données.</li> -</ul> +- [Discoverable](/fr/docs/Web/Progressive_web_apps/Advantages#Discoverable), afin que le contenu soit trouvé à l'aide de moteurs de recherche. +- [Installable](/fr/docs/Web/Progressive_web_apps/Advantages#Installable), afin d'être disponible sur l'écran d'accueil de l'appareil. +- [Linkable](/fr/docs/Web/Progressive_web_apps/Advantages#Linkable), afin que vous puissiez la partager simplement en envoyant un lien. +- [Network independent](/fr/docs/Web/Progressive_web_apps/Advantages#Network_independent), afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet. +- [Progressive](/fr/docs/Web/Progressive_web_apps/Advantages#Progressive), afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers. +- [Re-engageable](/fr/docs/Web/Progressive_web_apps/Advantages#Re-engageable), afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible. +- [Responsive](/fr/docs/web/Progressive_web_apps/Advantages#Responsive), afin q'uelle soit fonctionnelle sur n'importe quel appareil et résolution d'écran — téléphones mobiles, tablettes, ordinateurs portables, télévisions, réfrigérateurs, etc. +- [Safe](/fr/docs/web/Progressive_web_apps/Advantages#Safe), afin que le connexion entre vous et l'application soit sécurisée et prévienne n'importe quel tiers d'accéder à vos données. -<h3 id="Est-ce_que_ça_vaut_le_coup_de_faire_tout_ça">Est-ce que ça vaut le coup de faire tout ça ?</h3> +### Est-ce que ça vaut le coup de faire tout ça ? -<p>Absolument! Avec relativement peu d'effort pour implémenter l'essentiel des fonctionnalités requises par une PWA, les bénéfices sont énormes. Par exemple:</p> +Absolument! Avec relativement peu d'effort pour implémenter l'essentiel des fonctionnalités requises par une PWA, les bénéfices sont énormes. Par exemple: -<ul> - <li>Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a>, s'accompagnant aussi par une économie précieuse de bande passante et de temps.</li> - <li>La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau.</li> - <li>Une sensation d'utilisation et une apparence plus proche d'une application native— icônes d'applications sur l'écran d'accueil, des applications qui s'ouvrent en plein écran, etc.</li> - <li>Les utilisateurs sont plus engagés grâce à un système de notifications et de messages <em>push</em>, créant des utlisateurs plus impliqués apportant des taux de conversion plus élevés.</li> -</ul> +- Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des [Service Workers](/fr/docs/Web/API/Service_Worker_API), s'accompagnant aussi par une économie précieuse de bande passante et de temps. +- La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau. +- Une sensation d'utilisation et une apparence plus proche d'une application native— icônes d'applications sur l'écran d'accueil, des applications qui s'ouvrent en plein écran, etc. +- Les utilisateurs sont plus engagés grâce à un système de notifications et de messages _push_, créant des utlisateurs plus impliqués apportant des taux de conversion plus élevés. -<p>Il y a de nombreuses histoires à succès à propos d'entreprises ayant essayé les PWA, optant pour une expérience web enrichie plutôt qu'une application, et constatant des bénéfices significatifs et mesurables. Le site web <a href="https://www.pwastats.com/">PWA Stats</a> partage de nombreux cas d'études qui démontrent ces bénéfices.</p> +Il y a de nombreuses histoires à succès à propos d'entreprises ayant essayé les PWA, optant pour une expérience web enrichie plutôt qu'une application, et constatant des bénéfices significatifs et mesurables. Le site web [PWA Stats](https://www.pwastats.com/) partage de nombreux cas d'études qui démontrent ces bénéfices. -<p>L'histoire la plus connue est sans doute celle de <a href="https://stories.flipkart.com/introducing-flipkart-lite/">Flipkart Lite</a> — le plus large site e-commerce indien redéveloppé en PWA en 2015, ce qui a conduit à 70% d'augmentation en conversions. La PWA <a href="https://m.aliexpress.com/">AliExpress</a> a aussi constaté de bien meilleurs résultats que le web ou l'application native, avec une augmentation de 104% en terme de taux de conversions pour les nouveaux utilisateurs. Au vu de ces augmentations de profit, et la charge relativement faible de travail requis pour convertir une application en PWA, l'avantage est évident.</p> +L'histoire la plus connue est sans doute celle de [Flipkart Lite](https://stories.flipkart.com/introducing-flipkart-lite/) — le plus large site e-commerce indien redéveloppé en PWA en 2015, ce qui a conduit à 70% d'augmentation en conversions. La PWA [AliExpress](https://m.aliexpress.com/) a aussi constaté de bien meilleurs résultats que le web ou l'application native, avec une augmentation de 104% en terme de taux de conversions pour les nouveaux utilisateurs. Au vu de ces augmentations de profit, et la charge relativement faible de travail requis pour convertir une application en PWA, l'avantage est évident. -<p>Des start-up émergeantes comme <a href="https://www.couponmoto.com/">couponmoto</a> ont aussi commencé à utiliser des applications web progressives pour améliorer l'engagement des consommateurs, démontrant qu'elles peuvent aider les petites entreprises autant que les grosses à fidéliser les utilisateurs plus efficacement.</p> +Des start-up émergeantes comme [couponmoto](https://www.couponmoto.com/) ont aussi commencé à utiliser des applications web progressives pour améliorer l'engagement des consommateurs, démontrant qu'elles peuvent aider les petites entreprises autant que les grosses à fidéliser les utilisateurs plus efficacement. -<p>Vous pouvez consulter la liste sur <a href="https://pwa.rocks/">pwa.rocks</a> pour plus d'exemples. Une page particulièrement intéressante à mentionner est celle de <a href="https://hnpwa.com/">hnpwa.com</a> — elle liste un exemple d'implémentation du site web Hacker News (au lieu du TodoMVC app classique), dans lequel vous pouvez voir l'utilisation de plusieurs <em>frameworks </em>front-end.</p> +Vous pouvez consulter la liste sur [pwa.rocks](https://pwa.rocks/) pour plus d'exemples. Une page particulièrement intéressante à mentionner est celle de [hnpwa.com](https://hnpwa.com/) — elle liste un exemple d'implémentation du site web Hacker News (au lieu du TodoMVC app classique), dans lequel vous pouvez voir l'utilisation de plusieurs _frameworks_ front-end. -<p>Vous pouvez même générer des PWA en ligne à l'aide du site web <a href="https://www.pwabuilder.com/">PWABuilder</a>.</p> +Vous pouvez même générer des PWA en ligne à l'aide du site web [PWABuilder](https://www.pwabuilder.com/). -<p>Pour les informations spécifiques aux <em>service workers</em> et aux notifications <em>push</em>, consultez le <a href="https://serviceworke.rs/">Service Worker Cookbook</a>, une collection d'exemples utilisant des <em>service workers</em>.</p> +Pour les informations spécifiques aux _service workers_ et aux notifications _push_, consultez le [Service Worker Cookbook](https://serviceworke.rs/), une collection d'exemples utilisant des _service workers_. -<p>Ça vaut le coup d'essayer l'approche PWA, afin que vous puissiez constater par vous-même si ça convient à votre application.</p> +Ça vaut le coup d'essayer l'approche PWA, afin que vous puissiez constater par vous-même si ça convient à votre application. -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> +## Compatibilité navigateur -<p>Comme expliqué précédemment, les PWA ne reposent pas sur une seule API, mais plutôt sur plusieurs technologies pour atteindre l'objectif de délivrer la meilleure expérience web possible.</p> +Comme expliqué précédemment, les PWA ne reposent pas sur une seule API, mais plutôt sur plusieurs technologies pour atteindre l'objectif de délivrer la meilleure expérience web possible. -<p>L'ingrédient clé requis pour les PWA est le support des <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>. Heureusement les <em>service workers</em> sont <a href="https://jakearchibald.github.io/isserviceworkerready/">désormais supportés sur tous les principaux navigateurs</a>, sur ordinateur et sur téléphone mobile.</p> +L'ingrédient clé requis pour les PWA est le support des [service worker](/fr/docs/Web/API/Service_Worker_API). Heureusement les _service workers_ sont [désormais supportés sur tous les principaux navigateurs](https://jakearchibald.github.io/isserviceworkerready/), sur ordinateur et sur téléphone mobile. -<p>D'autres fonctionnalités telles que <a href="/fr/docs/Web/Manifest">Web App Manifest</a>, <a href="/fr/docs/Web/API/Push_API">Push</a>, <a href="/fr/docs/Web/API/Notifications_API">Notifications</a>, et <a href="/fr/docs/Web/Progressive_web_apps/Add_to_home_screen">Add to Home Screen</a> bénéficient également d'un large support. Juqu'à présent Safari a limité le support du <em>Web App Manifest</em> et <em>Add to Home Screen</em>, et ne supporte pas les notifications web <em>push</em>. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités.</p> +D'autres fonctionnalités telles que [Web App Manifest](/fr/docs/Web/Manifest), [Push](/fr/docs/Web/API/Push_API), [Notifications](/fr/docs/Web/API/Notifications_API), et [Add to Home Screen](/fr/docs/Web/Progressive_web_apps/Add_to_home_screen) bénéficient également d'un large support. Juqu'à présent Safari a limité le support du _Web App Manifest_ et _Add to Home Screen_, et ne supporte pas les notifications web _push_. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités. -<p>Certaines de ces API sont expérimentales, et accompagnées d'une documenation toujours à l'état de brouillon, mais les histoires à succès comme celles de Flibkart et AliExpress devraient d'ores et déjà suffire à vous convaincre d'essayer et d'implémenter certaines de ces fonctionnalités dans votre application web.</p> +Certaines de ces API sont expérimentales, et accompagnées d'une documenation toujours à l'état de brouillon, mais les histoires à succès comme celles de Flibkart et AliExpress devraient d'ores et déjà suffire à vous convaincre d'essayer et d'implémenter certaines de ces fonctionnalités dans votre application web. -<p>Par dessus tout, vous devriez suivre la régle d'amélioration progressive — utilisez les technologies qui fournissent ces améliorations seulement où elles sont supportées, mais proposez quand même les fonctionnalités basiques de votre application lorsqu'elles ne le sont pas. De cette façon, tout le monde sera en mesure de l'utiliser, mais ceux aqui ont un navigateur récent bénéficieront de toutes les fonctionnalités offertes par les PWA et même plus.</p> +Par dessus tout, vous devriez suivre la régle d'amélioration progressive — utilisez les technologies qui fournissent ces améliorations seulement où elles sont supportées, mais proposez quand même les fonctionnalités basiques de votre application lorsqu'elles ne le sont pas. De cette façon, tout le monde sera en mesure de l'utiliser, mais ceux aqui ont un navigateur récent bénéficieront de toutes les fonctionnalités offertes par les PWA et même plus. -<h2 id="Un_exemple_dapplication">Un exemple d'application</h2> +## Un exemple d'application -<p>Dans cette série d'articles nous examinerons le code source d'un site web simple qui propose des informations à propos de jeux soumis à <a href="http://js13kgames.com/aframe">A-Frame category</a> lors de la compétition <a href="http://2017.js13kgames.com/">js13kGames 2017</a>. Ne vous souciez pas du contenu réel du site — le plus important est d'apprendre à utiliser les fonctionnalités des PWA dans vos propres projets.</p> +Dans cette série d'articles nous examinerons le code source d'un site web simple qui propose des informations à propos de jeux soumis à [A-Frame category](http://js13kgames.com/aframe) lors de la compétition [js13kGames 2017](http://2017.js13kgames.com/). Ne vous souciez pas du contenu réel du site — le plus important est d'apprendre à utiliser les fonctionnalités des PWA dans vos propres projets. -<p>Vous pouvez trouver la version en ligne sur <a href="https://mdn.github.io/pwa-examples/js13kpwa/">mdn.github.io/pwa-examples/js13kpwa</a> (et <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">le code source</a>), que l'on va expliquer avec attention dans les prochains articles.</p> +Vous pouvez trouver la version en ligne sur [mdn.github.io/pwa-examples/js13kpwa](https://mdn.github.io/pwa-examples/js13kpwa/) (et [le code source](https://github.com/mdn/pwa-examples/tree/master/js13kpwa)), que l'on va expliquer avec attention dans les prochains articles. -<p>Maintenant, allons à la deuxième partie de cette série, dans laquelle on s'intéressera à la structure de notre application démo.</p> +Maintenant, allons à la deuxième partie de cette série, dans laquelle on s'intéressera à la structure de notre application démo. -<p>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</p> +{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}} -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div> +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} diff --git a/files/fr/web/progressive_web_apps/loading/index.md b/files/fr/web/progressive_web_apps/loading/index.md index e1394252c4..e853b74a33 100644 --- a/files/fr/web/progressive_web_apps/loading/index.md +++ b/files/fr/web/progressive_web_apps/loading/index.md @@ -6,147 +6,158 @@ tags: translation_of: Web/Progressive_web_apps/Loading original_slug: Web/Progressive_web_apps/Chargement --- -<div>{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}</div> +{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}} -<p>Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> une Progressive Web App: <a href="en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Workers</a>, <a href="/fr/docs/Web/Progressive_web_apps/Installable_PWAs">Manifestes Web</a>, <a href="/fr/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">Notifications et Push</a>. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.</p> +Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) une Progressive Web App: [Service Workers](en-US/docs/Web/Progressive_web_apps/Offline_Service_workers), [Manifestes Web](/fr/docs/Web/Progressive_web_apps/Installable_PWAs), [Notifications et Push](/fr/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push). Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources. -<h2 id="Première_visualisation_signifiante">Première visualisation signifiante</h2> +## Première visualisation signifiante -<p>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é.</p> +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é. -<p>Ceci peut être réalisé grâce au chargement progressif — également appelé <a href="https://en.wikipedia.org/wiki/Lazy_loading">Lazy loading</a>. 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.</p> +Ceci peut être réalisé grâce au chargement progressif — également appelé [Lazy loading](https://en.wikipedia.org/wiki/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. -<h2 id="Mise_en_paquet_versus_éclatement">Mise en paquet versus éclatement</h2> +## Mise en paquet versus éclatement -<p>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 <code>bundle.js</code> peut peser plusieurs megaoctets et un unique paquet <code>style.css</code> 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.</p> +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. -<p>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.</p> +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. -<h2 id="Render-blocking_resources">Render-blocking resources</h2> +## Render-blocking resources -<p>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.</p> +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. -<p>Pour corriger ça, nous pouvons, par exemple, ajouter <code>defer</code> aux fichiers JavaScript:</p> +Pour corriger ça, nous pouvons, par exemple, ajouter `defer` aux fichiers JavaScript: -<pre class="brush: html"><script src="app.js" defer></script> -</pre> +```html +<script src="app.js" defer></script> +``` -<p>Ils seront téléchargés et exécutés <em>après</em> 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:</p> +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: -<pre class="brush: html"><link rel="stylesheet" href="style.css"> -<link rel="stylesheet" href="print.css" media="print"> -</pre> +```html +<link rel="stylesheet" href="style.css"> +<link rel="stylesheet" href="print.css" media="print"> +``` -<p>Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie.</p> +Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie. -<p>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 <code>style.css</code> dans la balise <code><style></code> dans le <code><head></code> de <code>index.html</code> — ceci améliorerait encore plus la performance mais pour la lisibilité de l'exemple, nous nous passerons aussi de cette approche.</p> +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. -<h2 id="Images">Images</h2> +## Images -<p>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.</p> +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. -<p>Ceci peut être optimisé. Tout d'abord, vous devriez utiliser des outils ou des services tels que <a href="https://tinypng.com/">TinyPNG</a> 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.</p> +Ceci peut être optimisé. Tout d'abord, vous devriez utiliser des outils ou des services tels que [TinyPNG](https://tinypng.com/) 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. -<h3 id="Image_conteneur">Image conteneur</h3> +### Image conteneur -<p>Plutôt que d'avoir toutes les captures d'écran des jeux référencés dans les attributs <code>src</code> des éléments <code><img></code>, 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 <code>data-src</code>:</p> +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`: -<pre class="brush: html"><img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'> -</pre> +```html +<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'> +``` -<p>Ces images seront téléchargées via JavaScript <em>après</em> 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.</p> +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. -<h3 id="Chargement_via_JavaScript">Chargement via JavaScript</h3> +### Chargement via JavaScript -<p>Le fichier <code>app.js</code> traite les attributs <code>data-src</code> comme ceci:</p> +Le fichier `app.js` traite les attributs `data-src` comme ceci: -<pre class="brush: js">let imagesToLoad = document.querySelectorAll('img[data-src]'); -const loadImages = (image) => { +```js +let imagesToLoad = document.querySelectorAll('img[data-src]'); +const loadImages = (image) => { image.setAttribute('src', image.getAttribute('data-src')); - image.onload = () => { + image.onload = () => { image.removeAttribute('data-src'); }; -};</pre> +}; +``` -<p>La variable <code>imagesToLoad</code> contient des références à toutes les images, tandis que la fonction <code>loadImages</code> déplace le chemin d'accès de <code>data-src</code> à <code>src</code>. Quand toutes les images sont effectivement téléchargées, nous supprimons leur attribut <code>data-src</code> attendu qu'ls ne sont désormais plus nécessaires. Ensuite, nous bouclons sur chacune des images et nous la chargeons:</p> +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: -<pre class="brush: js">imagesToLoad.forEach((img) => { +```js +imagesToLoad.forEach((img) => { loadImages(img); -});</pre> +}); +``` -<h3 id="Flou_en_CSS">Flou en CSS</h3> +### Flou en CSS -<p>Pour rendre le processus visuellement plus attractif, le conteneur est flouté via CSS.</p> +Pour rendre le processus visuellement plus attractif, le conteneur est flouté via CSS. -<p><img alt="Screenshot of placeholder images in the js13kPWA app." src="js13kpwa-placeholders.png"></p> + -<p>Nous générons les images avec un flou au début si bien qu'une transition vers la version précise peut être réalkisée:</p> +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: -<pre class="brush: css">article img[data-src] { +```css +article img[data-src] { filter: blur(0.2em); } article img { filter: blur(0em); transition: filter 0.5s; -}</pre> +} +``` -<p>Ceci supprimera l'effet de flou en une demie seconde, ce qui paraît assez bien pour l'effet de "chargement".</p> +Ceci supprimera l'effet de flou en une demie seconde, ce qui paraît assez bien pour l'effet de "chargement". -<h2 id="Chargement_à_la_demande">Chargement à la demande</h2> +## Chargement à la demande -<p>Le mécanisme de chargement des images présenté dans la section précédente fonctionne correctement — il charge les imges après que la structure HTML a été générée et applique un joli effet de transition au processus. Le problème est qu'il télécharge toujours<em> toutes</em> les images en une fois, même si l'utilisateur ne verra que les deux ou trois premières au chargement de la page.</p> +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. -<p>Ce problème peut être résolu avec la nouvelle <a href="/fr/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.</p> +Ce problème peut être résolu avec la nouvelle [API Intersection Observer](/fr/docs/Web/API/Intersection_Observer_API) — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport. -<h3 id="Intersection_Observer">Intersection Observer</h3> +### Intersection Observer -<p>Ceci est une amélioration progressive à l'exemple fonctionnel précédent — <a href="/fr/docs/Web/API/Intersection_Observer_API">Intersection Observer</a> téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.</p> +Ceci est une amélioration progressive à l'exemple fonctionnel précédent — [Intersection Observer](/fr/docs/Web/API/Intersection_Observer_API) téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport. -<p>Voici à quoi le code correspondant ressemble:</p> +Voici à quoi le code correspondant ressemble: -<pre class="brush: js">if('IntersectionObserver' in window) { - const observer = new IntersectionObserver((items, observer) => { - items.forEach((item) => { +```js +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) => { + imagesToLoad.forEach((img) => { observer.observe(img); }); } else { - imagesToLoad.forEach((img) => { + imagesToLoad.forEach((img) => { loadImages(img); }); -}</pre> +} +``` -<p>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.</p> +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. -<p>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.</p> +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. -<h2 id="Améliorations">Améliorations</h2> +## Améliorations -<p>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 <code>src</code> final déjà renseigné ou en enrobant les balises <code><img></code> 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.</p> +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. -<p>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.</p> +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. -<p>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.</p> +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. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>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.</p> +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. -<p>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.</p> +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. -<h2 id="Dernières_réflexions">Dernières réflexions</h2> +## Dernières réflexions -<p>C'est fini pour ces séries de tutoriels — nous avons examiné le <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">code source code de l'exemple d'application js13kPWA</a> et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une <a href="/fr/docs/Web/Progressive_web_apps/Introduction">Introduction</a>, <a href="/fr/docs/Web/Progressive_web_apps/App_structure">la structure des PWA, </a><a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">la disponibilité en mode déconnectégrâce aux Service Workers</a>, <a href="/fr/docs/Web/Progressive_web_apps/Installable_PWAs">les PWAs installable</a> et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du <a href="https://serviceworke.rs/">Service Worker Cookbook</a>. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'<a href="/fr/docs/Web/API/Intersection_Observer_API">API ntersection Observer</a>.</p> +C'est fini pour ces séries de tutoriels — nous avons examiné le [code source code de l'exemple d'application js13kPWA](https://github.com/mdn/pwa-examples/tree/master/js13kpwa) et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une [Introduction](/fr/docs/Web/Progressive_web_apps/Introduction), [la structure des PWA, ](/fr/docs/Web/Progressive_web_apps/App_structure)[la disponibilité en mode déconnectégrâce aux Service Workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers), [les PWAs installable](/fr/docs/Web/Progressive_web_apps/Installable_PWAs) et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du [Service Worker Cookbook](https://serviceworke.rs/). Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'[API ntersection Observer](/fr/docs/Web/API/Intersection_Observer_API). -<p>N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques.</p> +N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques. -<p>{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}</p> +{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}} -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p> +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} diff --git a/files/fr/web/progressive_web_apps/offline_service_workers/index.md b/files/fr/web/progressive_web_apps/offline_service_workers/index.md index 760f697a53..6d04712c4a 100644 --- a/files/fr/web/progressive_web_apps/offline_service_workers/index.md +++ b/files/fr/web/progressive_web_apps/offline_service_workers/index.md @@ -10,63 +10,68 @@ tags: - progressive translation_of: Web/Progressive_web_apps/Offline_Service_workers --- -<div>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div> +{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}} -<p>Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que nous avons configuré et exécuté la structure de base, voyons comment sont implémentées les fonctionnalités en mode déconnecté mettant en oeuvre Service Worker. Dans cet article, nous examinerons comment cela est utilisé dans notre <a href="https://mdn.github.io/pwa-examples/js13kpwa/">exemple js13kPWA</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">voir également le code source</a>). Nous examinerons comment ajouter la fonctionnalité mode déconnecté.</p> +Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que nous avons configuré et exécuté la structure de base, voyons comment sont implémentées les fonctionnalités en mode déconnecté mettant en oeuvre Service Worker. Dans cet article, nous examinerons comment cela est utilisé dans notre [exemple js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) ([voir également le code source](https://github.com/mdn/pwa-examples/tree/master/js13kpwa)). Nous examinerons comment ajouter la fonctionnalité mode déconnecté. -<h2 id="Les_Service_workers_expliqués">Les Service workers expliqués</h2> +## Les Service workers expliqués -<p>Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion.</p> +Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion. -<p>Ils s'exécutent dans un processus séparé de celui du code JavaScript principal de notre page et n'ont aucun accès à la structure DOM. Cela introduit une approche différente de celle de la programmation web traditionnelle — l'API est non bloquante et peut émettre et recevoir de la communication entre différents contextes. Vous pouvez donner à un Service Worker quelque chose à faire et recevoir le résultat quand il est prêt en utilisant une approche basée sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.</p> +Ils s'exécutent dans un processus séparé de celui du code JavaScript principal de notre page et n'ont aucun accès à la structure DOM. Cela introduit une approche différente de celle de la programmation web traditionnelle — l'API est non bloquante et peut émettre et recevoir de la communication entre différents contextes. Vous pouvez donner à un Service Worker quelque chose à faire et recevoir le résultat quand il est prêt en utilisant une approche basée sur les [Promise](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). -<p>Ils peuvent faire beaucoup plus que "simplement" offrir des capacités en mode déconnecté, comme gérer des notifications, exécuter des calculs intensifs dans des processus séparés, etc. Les Service Workers sont assez puissants car ils peuvent prendre le contrôle de requêtes réseau, les modifier, fournir des réponses personnalisées récupérées du cache ou générer complètement des réponses.</p> +Ils peuvent faire beaucoup plus que "simplement" offrir des capacités en mode déconnecté, comme gérer des notifications, exécuter des calculs intensifs dans des processus séparés, etc. Les Service Workers sont assez puissants car ils peuvent prendre le contrôle de requêtes réseau, les modifier, fournir des réponses personnalisées récupérées du cache ou générer complètement des réponses. -<h3 id="Sécurité">Sécurité</h3> +### Sécurité -<p>Puisqu'ils sont si puissants, les Service Workers ne peuvent être exécutés que dans des contextes sécurisés (c'est-à-dire HTTPS). Si vous voulez tester avant de pousser votre code en production, vous pouvez toujours tester sur le localhost ou configurer les pages GitHub — les deux prennent en charge le HTTPS.</p> +Puisqu'ils sont si puissants, les Service Workers ne peuvent être exécutés que dans des contextes sécurisés (c'est-à-dire HTTPS). Si vous voulez tester avant de pousser votre code en production, vous pouvez toujours tester sur le localhost ou configurer les pages GitHub — les deux prennent en charge le HTTPS. -<h2 id="Mode_offline_first">Mode "offline first"</h2> +## Mode "offline first" -<p>Le modèle "offline first — ou "cache first" — est la stratégie la plus populaire pour délivrer du contenu à un utilisateur. Si une ressource est en cache et disponible hors ligne, on la sert avant de tenter de la télécharger depuis le serveur. Si elle n'est pas déjà en cache, on la télécharge et on la met en cache pour une utilisation future.</p> +Le modèle "offline first — ou "cache first" — est la stratégie la plus populaire pour délivrer du contenu à un utilisateur. Si une ressource est en cache et disponible hors ligne, on la sert avant de tenter de la télécharger depuis le serveur. Si elle n'est pas déjà en cache, on la télécharge et on la met en cache pour une utilisation future. -<h2 id="Progressive_dans_PWA">"Progressive" dans PWA</h2> +## "Progressive" dans PWA -<p>Lorsqu'implementés proprement en tant qu'amélioration progressive, les service workers peuvent profiter aux utilisateurs qui ont des navigateurs modernes qui implémentent l'API en offrant une prise en charge du mode déconnecté, mais ne casseront rien pour ceux qui utilisent des navigateurs plus anciens.</p> +Lorsqu'implementés proprement en tant qu'amélioration progressive, les service workers peuvent profiter aux utilisateurs qui ont des navigateurs modernes qui implémentent l'API en offrant une prise en charge du mode déconnecté, mais ne casseront rien pour ceux qui utilisent des navigateurs plus anciens. -<h2 id="Service_workers_dans_lapp_js13kPWA">Service workers dans l'app js13kPWA</h2> +## Service workers dans l'app js13kPWA -<p>Assez de théorie — voyons un peu de code source !</p> +Assez de théorie — voyons un peu de code source ! -<h3 id="Enregistrer_le_Service_Worker">Enregistrer le Service Worker</h3> +### Enregistrer le Service Worker -<p>Commençons par regarder le code qui enregistre un nouveau Service Worker, dans le fichier app.js: </p> +Commençons par regarder le code qui enregistre un nouveau Service Worker, dans le fichier app.js: -<p><strong>NOTE</strong> : Nous utilisons la syntaxe des <strong>fonctions flèchées</strong> pour l'implémentation du Service Worker</p> +**NOTE** : Nous utilisons la syntaxe des **fonctions flèchées** pour l'implémentation du Service Worker -<pre class="brush: js notranslate">if('serviceWorker' in navigator) { +```js +if('serviceWorker' in navigator) { navigator.serviceWorker.register('./pwa-examples/js13kpwa/sw.js'); -};</pre> +}; +``` -<p>Si l'API service worker est prise en charge dans le navigateur, il est enregistré pour le site en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. Son contenu se trouve dans le fichier sw.js et peut être exécuté une fois que l'enregistrement a réussi. C'est la seule partie de code du Service Worker qui se trouve dans le fichier app.js. Tout le reste spécifique au Service Worker se trouve dans le fichier sw.js .</p> +Si l'API service worker est prise en charge dans le navigateur, il est enregistré pour le site en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. Son contenu se trouve dans le fichier sw\.js et peut être exécuté une fois que l'enregistrement a réussi. C'est la seule partie de code du Service Worker qui se trouve dans le fichier app.js. Tout le reste spécifique au Service Worker se trouve dans le fichier sw\.js . -<h3 id="Le_cycle_de_vie_dun_Service_Worker">Le cycle de vie d'un Service Worker</h3> +### Le cycle de vie d'un Service Worker -<p>Une fois que l'enregistrement a été réalisé, le fichier sw.js est automatiquement téléchargé, puis installé, et finalement activé.</p> +Une fois que l'enregistrement a été réalisé, le fichier sw\.js est automatiquement téléchargé, puis installé, et finalement activé. -<h4 id="Installation">Installation</h4> +#### Installation -<p>L'API nous permet d'ajouter des intercepteurs d'événements ou <em>event listeners</em> pour les événements clef qui nous intéressent — le premier est l'événement <code>install</code>:</p> +L'API nous permet d'ajouter des intercepteurs d'événements ou _event listeners_ pour les événements clef qui nous intéressent — le premier est l'événement `install`: -<pre class="brush: js notranslate">self.addEventListener('install', (e) => { +```js +self.addEventListener('install', (e) => { console.log('[Service Worker] Installation'); -});</pre> +}); +``` -<p>Dans le listener <code>install</code>, nous pouvons initialiser le cache et y ajouter des fichiers pour une utilisation hors connexion. Notre app js13kPWA fait exactement ça.</p> +Dans le listener `install`, nous pouvons initialiser le cache et y ajouter des fichiers pour une utilisation hors connexion. Notre app js13kPWA fait exactement ça. -<p>D'abord, une variable pour enregistrer le nom du cache est créée, les fichiers de l'app shell sont listés dans un tableau.</p> +D'abord, une variable pour enregistrer le nom du cache est créée, les fichiers de l'app shell sont listés dans un tableau. -<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1'; +```js +var cacheName = 'js13kPWA-v1'; var appShellFiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', @@ -86,58 +91,66 @@ var appShellFiles = [ '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' -];</pre> +]; +``` -<p>Ensuite, les liens vers les images à charger en même temps que le contenu du fichier data/games.js sont générés dans un second tableau. Puis les deux tableaux sont fusionnés en utilisant la fonction {{jsxref("Array.prototype.concat()")}}.</p> +Ensuite, les liens vers les images à charger en même temps que le contenu du fichier data/games.js sont générés dans un second tableau. Puis les deux tableaux sont fusionnés en utilisant la fonction {{jsxref("Array.prototype.concat()")}}. -<pre class="brush: js notranslate">var gamesImages = []; -for(var i=0; i<games.length; i++) { +```js +var gamesImages = []; +for(var i=0; i<games.length; i++) { gamesImages.push('data/img/'+games[i].slug+'.jpg'); } -var contentToCache = appShellFiles.concat(gamesImages);</pre> +var contentToCache = appShellFiles.concat(gamesImages); +``` -<p>Ensuite, nous pouvons gérer l'événement <code>install</code> lui-même:</p> +Ensuite, nous pouvons gérer l'événement `install` lui-même: -<pre class="brush: js notranslate">self.addEventListener('install', (e) => { +```js +self.addEventListener('install', (e) => { console.log('[Service Worker] Installation'); e.waitUntil( - caches.open(cacheName).then((cache) => { + caches.open(cacheName).then((cache) => { console.log('[Service Worker] Mise en cache globale: app shell et contenu'); return cache.addAll(contentToCache); }) ); -});</pre> +}); +``` -<p>Deux choses ici nécessitent une explication : ce que {{domxref("ExtendableEvent.waitUntil")}} fait et ce qu'est l'objet {{domxref("Caches","caches")}}.</p> +Deux choses ici nécessitent une explication : ce que {{domxref("ExtendableEvent.waitUntil")}} fait et ce qu'est l'objet {{domxref("Caches","caches")}}. -<p>Le service worker ne s'installe pas tant que le code de <code>waitUntil</code> n'est pas exécuté. Il renvoie une promesse — Cette approche est nécessaire car l'installation peut prendre du temps, donc nous devons attendre qu'elle soit terminée.</p> +Le service worker ne s'installe pas tant que le code de `waitUntil` n'est pas exécuté. Il renvoie une promesse — Cette approche est nécessaire car l'installation peut prendre du temps, donc nous devons attendre qu'elle soit terminée. -<p><code>caches</code> est un objet {{domxref("CacheStorage")}} spécial accessible dans la portée du Service Worker et qui permet d'enregistrer les données — l'enregistrement dans le <a href="/fr/docs/Web/API/Web_Storage_API">web storage</a> ne fonctionnera pas, parce que le web storage fonctionne de façon synchrone. Avec les Service Workers, nous utilisons l'API Cache à la place. Ici, nous ouvrons un cache sous un nom donné, puis nous lui ajoutons tous les fichiers que notre app utilise, de telle sorte qu'ils soient disponibles la prochaine fois qu'il sera chargé (identifié par l'URL de la requête).</p> +`caches` est un objet {{domxref("CacheStorage")}} spécial accessible dans la portée du Service Worker et qui permet d'enregistrer les données — l'enregistrement dans le [web storage](/fr/docs/Web/API/Web_Storage_API) ne fonctionnera pas, parce que le web storage fonctionne de façon synchrone. Avec les Service Workers, nous utilisons l'API Cache à la place. Ici, nous ouvrons un cache sous un nom donné, puis nous lui ajoutons tous les fichiers que notre app utilise, de telle sorte qu'ils soient disponibles la prochaine fois qu'il sera chargé (identifié par l'URL de la requête). -<p>Vous avez remarqué que nous n'avons pas mis en cache le fichier <code>game.js</code>. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : <a href="/fr/docs/Web/API/Web_Periodic_Background_Synchronization_API">Web_Periodic_Background_Synchronization_API</a> .</p> +Vous avez remarqué que nous n'avons pas mis en cache le fichier `game.js`. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : [Web_Periodic_Background_Synchronization_API](/fr/docs/Web/API/Web_Periodic_Background_Synchronization_API) . -<h4 id="Activation">Activation</h4> +#### Activation -<p>Il y a également un événement <code>activate</code> qui est utilisé de la même façon que <code>install</code>. Cet événement est habituellement utilisé pour supprimer tout fichier qui n'est plus nécessaire et nettoyer derrière l'app en général. Nous n'avons pas besoin de faire ça dans notre app, donc nous l'omettrons.</p> +Il y a également un événement `activate` qui est utilisé de la même façon que `install`. Cet événement est habituellement utilisé pour supprimer tout fichier qui n'est plus nécessaire et nettoyer derrière l'app en général. Nous n'avons pas besoin de faire ça dans notre app, donc nous l'omettrons. -<h3 id="Répondre_aux_requêtes">Répondre aux requêtes</h3> +### Répondre aux requêtes -<p>Nous avons également un événement <code>fetch</code> à notre disposition et qui est déclenché à chaque fois qu'une requête HTTP est émise par notre app. Ceci est très utile car ça nous permet d'intercepter des requêtes et d'y répondre de façon personnalisée. Voic un exemple d'utilisation simpliste:</p> +Nous avons également un événement `fetch` à notre disposition et qui est déclenché à chaque fois qu'une requête HTTP est émise par notre app. Ceci est très utile car ça nous permet d'intercepter des requêtes et d'y répondre de façon personnalisée. Voic un exemple d'utilisation simpliste: -<pre class="brush: js notranslate">self.addEventListener('fetch', (e) => { +```js +self.addEventListener('fetch', (e) => { console.log('[Service Worker] Ressource récupérée '+e.request.url); -});</pre> +}); +``` -<p>La réponse peut être ce que nous voulons: le fichier demandé, sa copie mise en cache ou un bout de code JavaScript qui fera quelque chose de particulier — les possibilités sont infinies.</p> +La réponse peut être ce que nous voulons: le fichier demandé, sa copie mise en cache ou un bout de code JavaScript qui fera quelque chose de particulier — les possibilités sont infinies. -<p>Dans notre app d'exemple, nous servons le contenu à partir du cache plutôt qu'à partir du réseau tant que la ressource se trouve effectivement dans le cache. Nous faisons ceci que l'app soit en mode connecté ou déconnecté. Si le fichier n'est pas dans le cache, l'app commence par l'y ajouter avant de le servir:</p> +Dans notre app d'exemple, nous servons le contenu à partir du cache plutôt qu'à partir du réseau tant que la ressource se trouve effectivement dans le cache. Nous faisons ceci que l'app soit en mode connecté ou déconnecté. Si le fichier n'est pas dans le cache, l'app commence par l'y ajouter avant de le servir: -<pre class="brush: js notranslate">self.addEventListener('fetch', (e) => { +```js +self.addEventListener('fetch', (e) => { e.respondWith( - caches.match(e.request).then((r) => { + caches.match(e.request).then((r) => { console.log('[Service Worker] Récupération de la ressource: '+e.request.url); - return r || fetch(e.request).then((response) => { - return caches.open(cacheName).then((cache) => { + return r || fetch(e.request).then((response) => { + return caches.open(cacheName).then((cache) => { console.log('[Service Worker] Mise en cache de la nouvelle ressource: '+e.request.url); cache.put(e.request, response.clone()); return response; @@ -145,64 +158,71 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre> }); }) ); -});</pre> +}); +``` -<p>Ici, nous répondons à l'événement <code>fetch</code> grâce à une fonction qui essaie de trouver la ressource dans le cache et de renvoyer la réponse si elle y est. Si elle n'y est pas, nous utilisons une autre requête de récupération pour aller la chercher via le réseau, puis enregistrer la réponse dans le cache de telle sorte qu'elle y soit disponible la prochaine fois qu'elle sera demandée.</p> +Ici, nous répondons à l'événement `fetch` grâce à une fonction qui essaie de trouver la ressource dans le cache et de renvoyer la réponse si elle y est. Si elle n'y est pas, nous utilisons une autre requête de récupération pour aller la chercher via le réseau, puis enregistrer la réponse dans le cache de telle sorte qu'elle y soit disponible la prochaine fois qu'elle sera demandée. -<p>La méthode {{domxref("FetchEvent.respondWith")}} prend le contrôle — c'est la partie qui agit en tant que serveur proxy entre l'application et le réseau. Ceci nous permet de répondre à chacune des requêtes avec la réponse que nous voulons: celle préparée par le Service Worker, celle récupérée dans le cache, modifiée si nécessaire.</p> +La méthode {{domxref("FetchEvent.respondWith")}} prend le contrôle — c'est la partie qui agit en tant que serveur proxy entre l'application et le réseau. Ceci nous permet de répondre à chacune des requêtes avec la réponse que nous voulons: celle préparée par le Service Worker, celle récupérée dans le cache, modifiée si nécessaire. -<p>ça y est ! Notre application met en cache ses ressources lors de l'installation et les sert en les récupérant dans le cache, si bien qu'elle fonctionne même si l'utilisateur n'a pas de connexion. Elle met également en cache les contenus dès qu'il y en a de nouveaux d'ajoutés.</p> +ça y est ! Notre application met en cache ses ressources lors de l'installation et les sert en les récupérant dans le cache, si bien qu'elle fonctionne même si l'utilisateur n'a pas de connexion. Elle met également en cache les contenus dès qu'il y en a de nouveaux d'ajoutés. -<h2 id="Mises_à_jour">Mises à jour</h2> +## Mises à jour -<p>Il reste un point à couvrir: comment mettre à jour un Service Worker quand une nouvelle version de l'application contenant de nouveaux éléments est disponible ? Le numéro de version dans le nom du cache est la clef de l'énigme:</p> +Il reste un point à couvrir: comment mettre à jour un Service Worker quand une nouvelle version de l'application contenant de nouveaux éléments est disponible ? Le numéro de version dans le nom du cache est la clef de l'énigme: -<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1';</pre> +```js +var cacheName = 'js13kPWA-v1'; +``` -<p>Quand ceci est mis à jour en v2, nous pouvons alors ajouter tous nos fichiers (en incluant nos nouveaux fichiers) dans un nouveau cache:</p> +Quand ceci est mis à jour en v2, nous pouvons alors ajouter tous nos fichiers (en incluant nos nouveaux fichiers) dans un nouveau cache: -<pre class="brush: js notranslate">contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png'); +```js +contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png'); // ... -self.addEventListener('install', (e) => { +self.addEventListener('install', (e) => { e.waitUntil( - caches.open('js13kPWA-v2').then((cache) => { + caches.open('js13kPWA-v2').then((cache) => { return cache.addAll(contentToCache); }) ); -});</pre> +}); +``` -<p>Un nouveau service worker est installé en arrière plan et le précédent (v1) fonctionne correctement jusqu'à ce que plus aucune page ne l'utilise — le nouveau Service Worker est alors activé et prend à son compte la gestion de la page à la place de l'ancien.</p> +Un nouveau service worker est installé en arrière plan et le précédent (v1) fonctionne correctement jusqu'à ce que plus aucune page ne l'utilise — le nouveau Service Worker est alors activé et prend à son compte la gestion de la page à la place de l'ancien. -<h2 id="Vider_le_cache">Vider le cache</h2> +## Vider le cache -<p>Vous vous rappelez l'événement <code>activate</code> que nous avons éludé ? Il peut être utilisé pour vider l'ancien cache dont nous n'avons désormais plus besoin:</p> +Vous vous rappelez l'événement `activate` que nous avons éludé ? Il peut être utilisé pour vider l'ancien cache dont nous n'avons désormais plus besoin: -<pre class="brush: js notranslate">self.addEventListener('activate', (e) => { +```js +self.addEventListener('activate', (e) => { e.waitUntil( - caches.keys().then((keyList) => { - return Promise.all(keyList.map((key) => { + caches.keys().then((keyList) => { + return Promise.all(keyList.map((key) => { if(cacheName.indexOf(key) === -1) { return caches.delete(key); } })); }) ); -});</pre> +}); +``` -<p>Ceci nous assure que nous avons seulement les fichiers dont nous avons besoin dans le cache, de telle sorte que nous ne laissions pas de déchets derrière nous; l'<a href="/fr/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">espace de cache disponible dans le navigateur est limité</a>, c'est donc une bonne idée de nettoyer derrière nous.</p> +Ceci nous assure que nous avons seulement les fichiers dont nous avons besoin dans le cache, de telle sorte que nous ne laissions pas de déchets derrière nous; l'[espace de cache disponible dans le navigateur est limité](/fr/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria), c'est donc une bonne idée de nettoyer derrière nous. -<h2 id="Autres_cas_dusage">Autres cas d'usage</h2> +## Autres cas d'usage -<p>Servir des fichiers depuis le cache n'est pas la seule fonctionnalité que le Service Worker offre. Si vous avez des calculs coûteux à faire, vous pouvez en décharger le processus principal et les exécuter dans le worker, puis recevoir les résultats dès qu'ils sont disponibles. En gérant astucieusement les performances, vous pouvez pré-charger des ressources qui ne sont acutellement pas nécessaires, mais qui pourront l'être dans un futur proche, si bien que l'application sera plus rapide quand vous aurez effectivement besoin de ces ressources.</p> +Servir des fichiers depuis le cache n'est pas la seule fonctionnalité que le Service Worker offre. Si vous avez des calculs coûteux à faire, vous pouvez en décharger le processus principal et les exécuter dans le worker, puis recevoir les résultats dès qu'ils sont disponibles. En gérant astucieusement les performances, vous pouvez pré-charger des ressources qui ne sont acutellement pas nécessaires, mais qui pourront l'être dans un futur proche, si bien que l'application sera plus rapide quand vous aurez effectivement besoin de ces ressources. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'<a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a> et comment l'exploiter au mieux.</p> +Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) et comment l'exploiter au mieux. -<p>Les Service Workers sont également utilisés pour gérer les <a href="/fr/docs/Web/API/Push_API">push notifications </a><a href="/fr/docs//Web/API/Push_API"> </a>— ceci sera expliqué dans un prochain article.</p> +Les Service Workers sont également utilisés pour gérer les [push notifications ](/fr/docs/Web/API/Push_API)[](/fr/docs//Web/API/Push_API)— ceci sera expliqué dans un prochain article. -<p>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p> +{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}} -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div> +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} diff --git a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md index ae414470b6..a7782be0e0 100644 --- a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md +++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md @@ -6,46 +6,49 @@ slug: Web/Progressive_web_apps/Re-engageable_Notifications_Push translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push original_slug: Web/Progressive_web_apps/Relancer_Via_Notifications_Push --- -<div>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</div> +{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}} -<p>Avoir la possibilité de mettre en cache le contenu d'une application pour travailler en mode déconnecté est une formidable fonctionnalité. Donner la possibilité à l'utilisateur d'installer l'application web sur son écran d'accueil est encore mieux. Mais plutôt que de s'en remettre seulement aux actions de l'utilisateur, nous pouvons faire plus, en utilisant des messages poussés et des notifications pour le relancer automatiquement et fournir des nouveaux contenus à chaque fois qu'ils sont disponibles.</p> +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. -<h2 id="Deux_APIs_un_seul_but">Deux APIs, un seul but</h2> +## Deux APIs, un seul but -<p>L'<a href="/fr/docs/Web/API/Push_API">API Push</a> et l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> sont deux APIs distinctes mais elles fonctionnent bien ensemble quand vous souhaitez fournir une fonction de relance dans votre application. Push est utilisée pour délivrer un nouveau contenu à votre application depuis le serveur sans aucune intervention côté client et cette opération est gérée par le service worker de l'application. Les notifications peuvent être utilisées par le service worker pour afficher les nouvelles informations à l'utilisateur, ou, au moins, le prévenir que quelque chose a été mis à jour.</p> +L'[API Push](/fr/docs/Web/API/Push_API) et l'[API Notifications](/fr/docs/Web/API/Notifications_API) sont deux APIs distinctes mais elles fonctionnent bien ensemble quand vous souhaitez fournir une fonction de relance dans votre application. Push est utilisée pour délivrer un nouveau contenu à votre application depuis le serveur sans aucune intervention côté client et cette opération est gérée par le service worker de l'application. Les notifications peuvent être utilisées par le service worker pour afficher les nouvelles informations à l'utilisateur, ou, au moins, le prévenir que quelque chose a été mis à jour. -<p>Cela s'exécute hors de la fenêtre du navigateur, juste comme les service workers, si bien que des mises à jour peuvent être poussées et des notifications peuvent être affichées quand la page de l'application n'a pas le focus voire fermée.</p> +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. -<h2 id="Notifications">Notifications</h2> +## Notifications -<p>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.</p> +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. -<h3 id="Demande_de_permission">Demande de permission</h3> +### Demande de permission -<p>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:</p> +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: -<pre class="brush: js">var button = document.getElementById("notifications"); +```js +var button = document.getElementById("notifications"); button.addEventListener('click', function(e) { Notification.requestPermission().then(function(result) { if(result === 'granted') { randomNotification(); } }); -});</pre> +}); +``` -<p>Ceci affiche une popup en utilisant le propre service de notification du système d'exploitation:</p> +Ceci affiche une popup en utilisant le propre service de notification du système d'exploitation: -<p><img alt="Notification of js13kPWA." src="js13kpwa-notification.png"></p> + -<p>Une fois que l'utilisateur a confirmé qu'il veut recevoir des notifications, l'application peut alors lui afficher. Le résultat de l'action de l'utilisateur peut être default (défault), granted (autorisé) ou denied (interdit). L'option default est choisi quand l'utilisateur n'a pas fait de choix et les deux autres sont sélectionnées selon que l'utilisateur a respectivement cliqué sur oui ou non.</p> +Une fois que l'utilisateur a confirmé qu'il veut recevoir des notifications, l'application peut alors lui afficher. Le résultat de l'action de l'utilisateur peut être default (défault), granted (autorisé) ou denied (interdit). L'option default est choisi quand l'utilisateur n'a pas fait de choix et les deux autres sont sélectionnées selon que l'utilisateur a respectivement cliqué sur oui ou non. -<p>Si la permission est donnée, elle vaut à la fois pour les notifications et les push.</p> +Si la permission est donnée, elle vaut à la fois pour les notifications et les push. -<h3 id="Créer_une_notification">Créer une notification</h3> +### Créer une notification -<p>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:</p> +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: -<pre class="brush: js">function randomNotification() { +```js +function randomNotification() { var randomItem = Math.floor(Math.random()*games.length); var notifTitle = games[randomItem].name; var notifBody = 'Créé par '+games[randomItem].author+'.'; @@ -56,49 +59,53 @@ button.addEventListener('click', function(e) { } var notif = new Notification(notifTitle, options); setTimeout(randomNotification, 30000); -}</pre> +} +``` -<p>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.</p> +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. -<h2 id="Push">Push</h2> +## Push -<p>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.</p> +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. -<p>La technologie en est toujours à ses tous débuts — certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">VAPID</a> (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les <a href="https://serviceworke.rs/push-payload.html">exemples du Cookbook des Service Workers</a>, essayer de mettre en place un serveur d'émission de messages utilisant <a href="https://firebase.google.com/">Firebase</a> ou construire votre propre serveur (en utilisant Node.js par exemple).</p> +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](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) (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](https://serviceworke.rs/push-payload.html), essayer de mettre en place un serveur d'émission de messages utilisant [Firebase](https://firebase.google.com/) ou construire votre propre serveur (en utilisant Node.js par exemple). -<p>Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article <a href="/fr/docs/Web/Apps/Progressive/Offline_Service_workers">Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers</a>. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.</p> +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](/fr/docs/Web/Apps/Progressive/Offline_Service_workers). A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé. -<pre class="brush: js">registration.pushManager.getSubscription() .then( /* ... */ );</pre> +```js +registration.pushManager.getSubscription() .then( /* ... */ ); +``` -<p>Une fois que l'utilisateur est enrôlé, il peut recevoir des notifications poussées du serveur.</p> +Une fois que l'utilisateur est enrôlé, il peut recevoir des notifications poussées du serveur. -<p>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 <a href="https://jrconlin.github.io/WebPushDataTestPage/">page de test de chffirement des données web poussées</a> 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.</p> +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](https://jrconlin.github.io/WebPushDataTestPage/) 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. -<p>Pour recevoir des messages poussés, nous pouvons écouter l'événement {{event("push")}} dans le fichier du Service Worker:</p> +Pour recevoir des messages poussés, nous pouvons écouter l'événement {{event("push")}} dans le fichier du Service Worker: -<pre class="brush: js">self.addEventListener('push', function(e) { /* ... */ });</pre> +```js +self.addEventListener('push', function(e) { /* ... */ }); +``` -<p>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.</p> +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. -<h3 id="Exemple_de_Push">Exemple de Push</h3> +### Exemple de Push -<p>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 <a href="https://serviceworke.rs/">Service Worker Cookbook</a> — voir la<a href="https://serviceworke.rs/push-payload.html"> démonstration de charge utile poussée</a>.</p> +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](https://serviceworke.rs/) — voir la[ démonstration de charge utile poussée](https://serviceworke.rs/push-payload.html). -<p>Cette démonstration comporte trois fichiers:</p> +Cette démonstration comporte trois fichiers: -<ul> - <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/index.js">index.js</a>, qui contient le code source de notre application</li> - <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/server.js">server.js</a>, qui contient la partie serveur (écrit en Node.js)</li> - <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/service-worker.js">service-worker.js</a>, qui contient le code spécifique du Service Worker.</li> -</ul> +- [index.js](https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/index.js), qui contient le code source de notre application +- [server.js](https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/server.js), qui contient la partie serveur (écrit en Node.js) +- [service-worker.js](https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/service-worker.js), qui contient le code spécifique du Service Worker. -<p>Explorons tout ceci</p> +Explorons tout ceci -<h4 id="index.js">index.js</h4> +#### index.js -<p>Le fichier <code>index.js</code> commence par enregistrer le service worker:</p> +Le fichier `index.js` commence par enregistrer le service worker: -<pre class="brush: js">navigator.serviceWorker.register('service-worker.js') +```js +navigator.serviceWorker.register('service-worker.js') .then(function(registration) { return registration.pushManager.getSubscription() .then(async function(registration) { @@ -107,34 +114,42 @@ button.addEventListener('click', function(e) { }) .then(function(subscription) { // partie relative à l'abonnement -});</pre> +}); +``` -<p>C'est un petit peu plus compliqué que le service worker que nous avons vu dans la <a href="https://mdn.github.io/pwa-examples/js13kpwa/">démonstration de js13kPWA</a>. 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.</p> +C'est un petit peu plus compliqué que le service worker que nous avons vu dans la [démonstration de js13kPWA](https://mdn.github.io/pwa-examples/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. -<p>Dans la partie enregistrement, le code ressemble à ceci:</p> +Dans la partie enregistrement, le code ressemble à ceci: -<pre class="brush: js">if(registration) { +```js +if(registration) { return registration; -}</pre> +} +``` -<p>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:</p> +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: -<pre class="brush: js">const response = await fetch('./vapidPublicKey'); +```js +const response = await fetch('./vapidPublicKey'); const vapidPublicKey = await response.text(); -const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre> +const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey); +``` -<p>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 <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla</a>.</p> +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](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/). -<p>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 <code>userVisibleOnly: true</code>, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est <code>applicationServerKey</code>, qui contient notre clef VAPID une fois récupérée et convertie avec succès.</p> +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. -<pre class="brush: js">return registration.pushManager.subscribe({ +```js +return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: convertedVapidKey -});</pre> +}); +``` -<p>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.</p> +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. -<pre class="brush: js">fetch('./register', { +```js +fetch('./register', { method: 'post', headers: { 'Content-type': 'application/json' @@ -142,11 +157,13 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre> body: JSON.stringify({ subscription: subscription }), -});</pre> +}); +``` -<p>Puis la fonction {{domxref("onclick","GlobalEventHandlers.onclick")}} du bouton <em>Abonnement</em> est définie:</p> +Puis la fonction {{domxref("onclick","GlobalEventHandlers.onclick")}} du bouton _Abonnement_ est définie: -<pre class="brush: js">document.getElementById('doIt').onclick = function() { +```js +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; @@ -163,19 +180,21 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre> ttl: ttl, }), }); -};</pre> +}; +``` -<p>Quand le bouton est cliqué, <code>fetch</code> demande au serveur d'envoyer la notification avec les paramètres suivants: <code>payload</code> est le contenu que la notification doir afficher, <code>delay</code> définit un délai en seconde avant que la notification soit affichée et <code>ttl</code> indique en seconde le temps que cette notification doit rester disponible sur le serveur.</p> +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. -<p>Au tour maintenant du fichier Javascript suivant.</p> +Au tour maintenant du fichier Javascript suivant. -<h4 id="server.js">server.js</h4> +#### server.js -<p>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.</p> +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. -<p>Le <a href="https://www.npmjs.com/package/web-push">module web-pus</a> est utilisé pour configurer les clefs VAPID keys et éventuellement les générer si elles ne sont pas encore disponibles.</p> +Le [module web-pus](https://www.npmjs.com/package/web-push) est utilisé pour configurer les clefs VAPID keys et éventuellement les générer si elles ne sont pas encore disponibles. -<pre class="brush: js">const webPush = require('web-push'); +```js +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 " + @@ -190,11 +209,12 @@ webPush.setVapidDetails( process.env.VAPID_PUBLIC_KEY, process.env.VAPID_PRIVATE_KEY ); -</pre> +``` -<p>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 <code>index.js</code> sont utilisées: <code>payload</code>, <code>delay</code> et <code>ttl</code>.</p> +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`. -<pre class="brush: js">module.exports = function(app, route) { +```js +module.exports = function(app, route) { app.get(route + 'vapidPublicKey', function(req, res) { res.send(process.env.VAPID_PUBLIC_KEY); }); @@ -222,25 +242,28 @@ webPush.setVapidDetails( }); }, req.body.delay * 1000); }); -};</pre> +}; +``` -<h4 id="service-worker.js">service-worker.js</h4> +#### service-worker.js -<p>Le dernier fichier que nous allons regarder est celui du service worker:</p> +Le dernier fichier que nous allons regarder est celui du service worker: -<pre class="brush: js">self.addEventListener('push', function(event) { +```js +self.addEventListener('push', function(event) { const payload = event.data ? event.data.text() : 'no payload'; event.waitUntil( self.registration.showNotification('ServiceWorker Cookbook', { body: payload, }) ); -});</pre> +}); +``` -<p>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.</p> +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. -<p>N'hésitez pas à explorer le reste des exemples du <a href="https://serviceworke.rs/">Service Worker Cookbook</a> si vous voulez savoir comment ils sont gérés — le <a href="https://github.com/mozilla/serviceworker-cookbook/">code source complet est disponible sur on GitHub</a>. Il y a une vaste collection d'exemples fonctionnels démontrant l'usage général ainsi que le push web, les stratégies de mise en cache, la question des performances, le fonctionnement en mode déconnecté et plus encore.</p> +N'hésitez pas à explorer le reste des exemples du [Service Worker Cookbook](https://serviceworke.rs/) si vous voulez savoir comment ils sont gérés — le [code source complet est disponible sur on GitHub](https://github.com/mozilla/serviceworker-cookbook/). Il y a une vaste collection d'exemples fonctionnels démontrant l'usage général ainsi que le push web, les stratégies de mise en cache, la question des performances, le fonctionnement en mode déconnecté et plus encore. -<p>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</p> +{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}} -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div> +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} diff --git a/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.md b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.md index 0e809a6294..47d2522dff 100644 --- a/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.md +++ b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.md @@ -11,66 +11,33 @@ translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_b translation_of_original: Web/Progressive_web_apps/Responsive original_slug: Web/Progressive_web_apps/Adaptative --- +Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après. -<p>Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.</p> +## Guides -<h2 id="Guides">Guides</h2> +- [Les fondations du design adaptatif](/fr/Apps/app_layout/responsive_design_building_blocks) + - : Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes. +- [Mobile avant tout (_Mobile first_)](/fr/docs/Web/Apps/Modern/Responsive/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. -<dl> - <dt><a href="/fr/Apps/app_layout/responsive_design_building_blocks">Les fondations du design adaptatif</a></dt> - <dd>Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.</dd> - <dt><a href="/fr/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile avant tout (<em>Mobile first</em>)</a></dt> - <dd>Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges.</dd> -</dl> +## Technologies -<h2 id="Technologies">Technologies</h2> +| Technologie | Description | Résumé du support | Dernière spécification | +| ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | +| [Media queries](/fr/docs/Web/CSS/Media_Queries) | Permet 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](/fr/docs/Web/CSS/Media_Queries#Browser_compatibility)) | [Media Queries Level 4](https://drafts.csswg.org/mediaqueries-4/) | +| [@viewport](/fr/docs/Web/CSS/@viewport)/[viewport meta tag](/fr/docs/Mozilla/Mobile/Viewport_meta_tag) | Contrôler la configuration du _viewport_, principalement sur les appareils mobiles. | @viewport: Expérimental ([plus de détails](/fr/docs/Web/CSS/@viewport#Browser_compatibility)) _Viewport meta tag_: Répandu sur les appareils mobiles modernes | [CSS Device Adaptation Module Level 1](https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule) | +| [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | Une 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](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility)) | [CSS Flexible Box Layout Module Level 1](https://drafts.csswg.org/css-flexbox-1/) | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Technologie</th> - <th scope="col">Description</th> - <th scope="col">Résumé du support</th> - <th scope="col">Dernière spécification</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/CSS/Media_Queries">Media queries</a></td> - <td>Permet de définir des conditions permettant aux styles d'être appliqués aux contenus en fonction de l'affichage disponible (<em>viewport</em>), de la résolution, de l'orientation, etc.</td> - <td>Répandu sur les navigateurs modernes (<a href="/fr/docs/Web/CSS/Media_Queries#Browser_compatibility">plus de détails</a>)</td> - <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/@viewport">@viewport</a>/<a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td> - <td>Contrôler la configuration du <em>viewport</em>, principalement sur les appareils mobiles.</td> - <td>@viewport: Expérimental (<a href="/fr/docs/Web/CSS/@viewport#Browser_compatibility">plus de détails</a>)<br> - <em>Viewport meta tag</em>: Répandu sur les appareils mobiles modernes</td> - <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> - <td>Une fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative.</td> - <td>Répandu sur les navigateurs modernes (<a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">plus de détail</a>)</td> - <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td> - </tr> - </tbody> -</table> +## Outils -<h2 id="Outils">Outils</h2> +- [Modernizr](https://modernizr.com/) + - : 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](https://code.google.com/archive/p/css3-mediaqueries-js/) + - : Un _polyfill_ en JavaScript pour assurer le support de _media query_ aux anciennes versions de IE (5+.) -<dl> - <dt><a class="external" href="https://modernizr.com/">Modernizr</a></dt> - <dd>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.</dd> - <dt><a class="external" href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt> - <dd>Un <em>polyfill</em> en JavaScript pour assurer le support de <em>media query</em> aux anciennes versions de IE (5+.)</dd> -</dl> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<dl> - <dt><a href="/fr/Apps/Design/Design_graphique_pour_les_sites_responsiveGraphics_for_responsive_sites">Graphiques dans les sites adaptatifs</a></dt> - <dd>Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.</dd> - <dt><a href="/fr/Apps/Design/Patrons_navigation_adaptative">Modèle de navigation adaptative</a></dt> - <dd>Comment faire une interface aussi ressemblante et fonctionnelle sur téléphone mobile que sur bureau? Apprenez comment concevoir des interfaces qui changent pour s'adapter à l'écran de l'utilisateur.</dd> -</dl> +- [Graphiques dans les sites adaptatifs](/fr/Apps/Design/Design_graphique_pour_les_sites_responsiveGraphics_for_responsive_sites) + - : Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives. +- [Modèle de navigation adaptative](/fr/Apps/Design/Patrons_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. |