1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: Indépendante du réseau
slug: Web/Progressive_web_apps/Independante_du_reseau
tags:
- App shell
- Applications
- IndexedDB
- Indépendante du réseau
- Service Workers
- hors-ligne
- localStorage
translation_of: Web/Progressive_web_apps
translation_of_original: Web/Progressive_web_apps/Network_independent
---
<div class="column-container summary">
<div class="column-11">Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.</div>
<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div>
</div>
<p>Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :</p>
<ul>
<li>Re-visiter un site et accèder à son contenu même quand le réseau n'est pas disponible.</li>
<li>Naviguer dans tout type de contenu que l'utilisateur a visité au moins une fois auparavant, même dans une situation comme une mauvaise connectivité.</li>
<li>Contrôler ce qui est affiché à l'utilisateur dans les cas d'absence de connexion.</li>
</ul>
<h2 id="Guides">Guides</h2>
<dl>
<dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les service workers</a></dt>
<dd>Un guide simple pour débutant à l'API Service Worker.</dd>
<dt><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></dt>
<dd>Les bases concernant IndexedDB, expliquées en détails.</dd>
<dt><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></dt>
<dd>L'API Web Storage en toute simplicité.</dd>
<dt><a class="external" href="https://developers.google.com/web/updates/2015/11/app-shell">Chargement rapide des applications web avec l'architecture <em>App Shell </em></a></dt>
<dd>Un guide pour utiliser le<em> coding pattern App Shell</em> pour créer des applications qui se chargent rapidement.</dd>
</dl>
<h2 id="Technologies">Technologies</h2>
<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/API/Service_Worker_API">Service workers</a></td>
<td>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.</td>
<td>Expérimental : Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td>
<td>{{SpecName('Service Workers')}}</td>
</tr>
<tr>
<td><a href="/fr/docs/IndexedDB">IndexedDB</a></td>
<td>Un système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.</td>
<td>Répandu dans les navigateurs modernes (<a href="/fr/docs/Web/API/IndexedDB_API#Browser_compatibility">plus de détails</a>)</td>
<td>{{SpecName('IndexedDB')}}</td>
</tr>
<tr>
<td><a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a></td>
<td>Une API simple de stockage de clé/valeurs côté client.</td>
<td>Répandu (<a href="/fr/docs/Web/API/Web_Storage_API#Browser_compatibility">plus de détails</a>)</td>
<td>{{SpecName('Web Storage')}}</td>
</tr>
</tbody>
</table>
<h2 id="Outils">Outils</h2>
<dl>
<dt><a class="external" href="http://mozilla.github.io/localForage/">localForage</a></dt>
<dd>Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.</dd>
<dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
<dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd>
<dt><a class="external" href="https://github.com/mozilla/oghliner">oghliner</a></dt>
<dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd>
<dt><a class="external" href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt>
<dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd>
<dt><a class="external" href="https://www.talater.com/upup/">upup</a></dt>
<dd>Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.</dd>
</dl>
<h2 id="Voir_aussi">Voir aussi</h2>
<dl>
<dt><a class="external" href="https://serviceworke.rs/">The service worker cookbook</a></dt>
<dd>Une série de très bonnes ressources concernant les <em>services workers</em>, montrant comment implémenter une application web hors-ligne, et plus encore.</dd>
</dl>
|
