aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/extendablemessageevent/index.html
blob: 518622d6cc53300c94eac104ef0f1ad9512e9590 (plain)
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
---
title: ExtendableMessageEvent
slug: Web/API/ExtendableMessageEvent
tags:
  - API
  - Experimental
  - ExtendableMessageEvent
  - Interface
  - Reference
  - Service Workers
translation_of: Web/API/ExtendableMessageEvent
---
<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>

<div> </div>

<p>L'interface <strong><code>ExtendableMessageEvent</code></strong> de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements.</p>

<p>Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.</p>

<h2 id="Constructeur">Constructeur</h2>

<dl>
 <dt>{{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}}</dt>
 <dd>Crée une nouvelle instance de l'objet <code>ExtendableMessageEvent</code>.</dd>
</dl>

<h2 id="Propriétés">Propriétés</h2>

<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>

<dl>
 <dt>{{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}</dt>
 <dd>Retourne les données de l'évenements. Il peut être de n'importe quel type.</dd>
 <dt>{{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}</dt>
 <dd>Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message.</dd>
 <dt>{{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}</dt>
 <dd>Représente, dans un <a href="en-US/docs/Server-sent_events/Using_server-sent_events">server-sent events</a>, le dernier ID de l'évenement source.</dd>
 <dt>{{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}</dt>
 <dd>Retourne une référence vers le service worker qui envoie le message.</dd>
 <dt>{{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}</dt>
 <dd>Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie.</dd>
</dl>

<h2 id="Méthodes">Méthodes</h2>

<p><em>Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}</em>.</p>

<h2 id="Exemples">Exemples</h2>

<p>Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via  {{domxref("PushMessageData")}} au contexte principale via un <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a>, l'objet d'évènement du <code>onmessage</code> sera un <code>ExtendableMessageEvent</code>.</p>

<pre class="brush: js">var port;

self.addEventListener('push', function(e) {
  var obj = e.data.json();

  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
    port.postMessage(obj);
  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
    port.postMessage(obj);
  }
});

self.onmessage = function(e) {
  console.log(e);
  port = e.ports[0];
}
</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">Commentaireaire</th>
  </tr>
  <tr>
   <td>{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}</td>
   <td>{{Spec2('Service Workers')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilités_des_navigateurs">Compatibilités 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>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("45.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</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>Android Webview</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>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Voir_aussi">Voir aussi</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">Exemple simple de service workers</a></li>
 <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les serviceWorker sont-ils prêts?</a></li>
 <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Cannal de Messagerie</a></li>
</ul>