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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
title: Cache.addAll()
slug: Web/API/Cache/addAll
tags:
- API
- Cache
- Experimental
- Méthode
- Reference
- Service Worker
- Service worker API
- ServiceWorker
- addAll
translation_of: Web/API/Cache/addAll
---
<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
<p>La méthode <strong><code>addAll()</code></strong> de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. </p>
<div class="note">
<p><strong>Note</strong>: <code>addAll()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération <code>put() </code>ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode <code>addAll()</code>.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: js">cache.addAll(requests[]).then(function() {
//requests have been added to the cache
});
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt>requests</dt>
<dd>Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.</dd>
</dl>
<h3 id="Retour">Retour</h3>
<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p>
<h3 id="Exceptions">Exceptions</h3>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><strong>Exception</strong></th>
<th scope="col"><strong>Arrive quand</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>TypeError</code></td>
<td>
<p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
<p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Exemples"><strong>Exemples</strong></h2>
<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser <code>addAll()</code> pour y ajouter une série de ressources.</p>
<pre class="brush: js">this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/',
'/sw-test/index.html',
'/sw-test/style.css',
'/sw-test/app.js',
'/sw-test/image-list.js',
'/sw-test/star-wars-logo.jpg',
'/sw-test/gallery/',
'/sw-test/gallery/bountyHunters.jpg',
'/sw-test/gallery/myLittleVader.jpg',
'/sw-test/gallery/snowTroopers.jpg'
]);
})
);
});
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div>
<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("api.Cache.addAll")}}</p>
</div>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
<li>{{domxref("Cache")}}</li>
<li>{{domxref("WorkerGlobalScope.caches")}}</li>
</ul>
|
