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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
---
title: ExtendableEvent
slug: Web/API/ExtendableEvent
tags:
- API
- Experimental
- ExtendableEvent
- Interface
- Reference
- Services Workers
translation_of: Web/API/ExtendableEvent
---
<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
<p>L'interface <strong><code>ExtendableEvent</code></strong> étend la durée de vie des évènemets {{event("install")}} et {{event("activate")}} envoyés dans la portée global dans le cycle de vie du service worker. Elle s'assure que les évènements fonctionnels (comme {{domxref("FetchEvent")}}) ne sont pas distribués avant de mettre à jour les shémas de la base de données et de vider l'ancien cache.</p>
<p>Si {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} est appelé en dehors du gestionnaire <code>ExtendableEvent</code>, le navigateur doit lever <code>InvalidStateError</code>; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises">promesses à vie étendue</a>.</p>
<div class="note">
<p><strong>Note</strong>: Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir {{bug(1180274)}}).</p>
</div>
<p>Cette interface hérite de l'interface {{domxref("Event")}}.</p>
<p>{{InheritanceDiagram(700, 60, 20)}}</p>
<div class="note">
<p><strong>Note</strong>: Cette interface est disponnible seulement quand la portée globale est {{domxref("ServiceWorkerGlobalScope")}}. Elle n'est pas disponible quand c'est une {{domxref("Window")}}, ou le scope d'un autre genre de worker.</p>
</div>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("ExtendableEvent.ExtendableEvent()", "ExtendableEvent()")}}</dt>
<dd>Crée un nouvel object <code>ExtendableEvent</code>.</dd>
</dl>
<h2 id="Propriétés">Propriétés</h2>
<p>N'implémente pas de propriétés spécifiques, mais hérite celles de sont parent, <em>{{domxref("Event")}}.</em></p>
<h2 id="Méthodes">Méthodes</h2>
<p>Hérite des méthodes de son parent <em>{{domxref("Event")}}.</em></p>
<dl>
<dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
<dd>Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans {{event("install")}}{{domxref("EventHandler")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}} et dans {{event("active")}} {{domxref("EventHandler")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}. </dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">l'exemple de lecture du service worker</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">l'exemple en live</a>). Ce code appelle {{domxref("ExtendableEvent.waitUntil()")}} dans {{domxref("ServiceWorkerGlobalScope.oninstall")}}, retartant le traitement du worker {{domxref("ServiceWorkerRegistration.installing")}} après l'installation jusqu'à ce que la promesse se résolve. La promesse se résoud quand toutes les ressources ont été récupérés et mises en cache, ou quand une exception est lévée.</p>
<p>Ce fragent de code montre aussi une bonne pratique pour construire des versions de cache utilisé par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné. </p>
<div class="note">
<p><strong>Note</strong>: Dans Chrome, les messages de logging sont visible dans l'interface "Inspect" pour le service worker concerné, accessible via chrome://serviceworker-internals.</p>
</div>
<pre class="brush: js">var CACHE_VERSION = 1;
var CURRENT_CACHES = {
prefetch: 'prefetch-cache-v' + CACHE_VERSION
};
self.addEventListener('install', function(event) {
var urlsToPrefetch = [
'./static/pre_fetched.txt',
'./static/pre_fetched.html',
'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
];
console.log('Installation en cours. Ressources à pré-charger :', urlsToPrefetch);
event.waitUntil(
caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
return new Request(urlToPrefetch, {mode: 'no-cors'});
})).then(function() {
console.log('Toutes les ressources ont été chargées et mises en cache.');
});
}).catch(function(error) {
console.error('Erreur de pré-chargement :', error);
})
);
});</pre>
<div class="note"><strong>Important</strong>: Au moment du chargement des ressources, il est très important d'utiliser <code>{mode: 'no-cors'}</code> s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Dans cet exemple, <a href="http://www.chromium.org">www.chromium.org</a> ne support pas le CORS.</div>
<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', '#extendable-event', 'ExtendableEvent')}}</td>
<td>{{Spec2('Service Workers')}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Support de base</td>
<td>{{CompatChrome(40.0)}}</td>
<td>{{ CompatGeckoDesktop("44.0") }}</td>
<td>{{CompatNo}}</td>
<td>24</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Support de base</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("44.0") }}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
<li><a class="external external-icon" href="https://github.com/mdn/sw-test">Code de base d'un service workers</a></li>
<li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt ?</a></li>
<li>{{jsxref("Promise")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performate des web workers</a></li>
</ul>
|
