files/zh-cn/web/api/client/postmessage/index.html


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

---
title: Client.postMessage()
slug: Web/API/Client/postMessage
translation_of: Web/API/Client/postMessage
---
<p>{{SeeCompatTable}}{{APIRef("Client")}}</p>

<p class="summary">{{domxref("Client")}} 接口的 <code><strong>Client.postMessage()</strong></code> 方法允许一个service worker客户端向一个  {{domxref("ServiceWorker")}}发送一个消息，会触发service worker的message事件，通过监听这个事件，可以获取这个消息。</p>

<h2 id="语法">语法</h2>

<pre class="brush: js">Client.postMessage(message[, transfer]);</pre>

<h3 id="返回">返回</h3>

<p>Void.</p>

<h3 id="参数">参数</h3>

<dl>
 <dt><code>message</code></dt>
 <dd>发送给service worker的消息内容。</dd>
 <dt><code>transfer {{optional_inline}}</code></dt>
 <dd>可转移的对象，例如对端口的引用。</dd>
</dl>

<h2 id="例子">例子</h2>

<p>从 service worker 向 client 发送消息：</p>

<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'fetch'</span><span class="punctuation token">,</span> <span class="parameter token">event</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
  event<span class="punctuation token">.</span><span class="function token">waitUntil</span><span class="punctuation token">(</span><span class="keyword token">async</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="comment token">// Exit early if we don't have access to the client.</span>
    <span class="comment token">// Eg, if it's cross-origin.</span>
    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>event<span class="punctuation token">.</span>clientId<span class="punctuation token">)</span> <span class="keyword token">return</span><span class="punctuation token">;</span>

    <span class="comment token">// Get the client.</span>
    <span class="keyword token">const</span> client <span class="operator token">=</span> <span class="keyword token">await</span> clients<span class="punctuation token">.</span><span class="function token">get</span><span class="punctuation token">(</span>event<span class="punctuation token">.</span>clientId<span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="comment token">// Exit early if we don't get the client.</span>
    <span class="comment token">// Eg, if it closed.</span>
    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>client<span class="punctuation token">)</span> <span class="keyword token">return</span><span class="punctuation token">;</span>

    <span class="comment token">// Send a message to the client.</span>
    client<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
      msg<span class="punctuation token">:</span> <span class="string token">"Hey I just got a fetch from you!"</span><span class="punctuation token">,</span>
      url<span class="punctuation token">:</span> event<span class="punctuation token">.</span>request<span class="punctuation token">.</span>url
    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

  <span class="punctuation token">}</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p><span class="punctuation token">接收message:</span></p>

<pre class="brush: js line-numbers language-js"><code class="language-js">navigator<span class="punctuation token">.</span>serviceWorker<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'message'</span><span class="punctuation token">,</span> <span class="parameter token">event</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>event<span class="punctuation token">.</span>data<span class="punctuation token">.</span>msg<span class="punctuation token">,</span> event<span class="punctuation token">.</span>data<span class="punctuation token">.</span>url<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> </pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}}</td>
   <td>{{Spec2('Service Workers')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(45.0)}}<sup>[1]</sup></td>
   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></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>Feature</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>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("44.0") }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(45.0)}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<ul>
 <li>[1] Behind a flag in Chrome 40 through 44.</li>
 <li>[2] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</li>
</ul>