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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: 开发式平台
slug: Web/API/Push_API
tags:
- Push
- Service Workers
- 参考
- 实验性
- 应用程序编程接口
- 推送
- 着陆页
- 通知
translation_of: Web/API/Push_API
---
<p>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</p>
<p><strong>Push API </strong>给与了Web应用程序接收从服务器发出的推送消息的能力，无论Web应用程序是否在用户设备前台，甚至刚加载完成。这样，开发人员就可以向用户投放异步通知和更新，从而让用户能更及时地获取新内容。</p>
<div class="note">
<p><strong>注意</strong>: 本文档涵盖了W3C Push API规范; 如果您正在寻找有关Firefox OS专有推送机制的文档，请参阅 <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>.</p>
</div>
<h2 id="Push_的概念及用法">Push 的概念及用法</h2>
<p>对于一个应用来说，要想要接收到推送消息，需要有一个被激活的 <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>。当 service worker 处于激活状态时，可以使用 {{domxref("PushManager.subscribe()")}} 来订阅推送通知。</p>
<p>{{domxref("PushSubscription")}} 的结果包含了应用需要发送的推送消息的所有信息：端点及发送数据需要的加密密钥。</p>
<p>Service worker 会在必要的时候启动并接收接下来的推送消息，传递给 {{domxref("ServiceWorkerGlobalScope.onpush")}} 事件句柄。该方法允许将接收到的推送消息使用在应用上，例如通过显示一条通知（使用 {{domxref("ServiceWorkerRegistration.showNotification()")}}）</p>
<p>每一个订阅对 service worker 来说都是唯一的。同时订阅的端点也是一个唯一的<a href="http://www.w3.org/TR/capability-urls/"> 功能性 URL</a>：端点的信息是给应用发送信息的全部必要条件。所以端点地址需要保证隐私，否则其他应用也可以向你的应用发送消息。</p>
<p>激活一个 service worker 来提供推送消息会导致资源消耗的增加，尤其是电池。不同的浏览器对此有不同的方案——目前为止还没有标准的机制。Firefox 允许对发送给应用的推送消息做数量限制（配额）。该限制会在站点每一次被访问之后刷新。相比之下，Chrome 选择不做限制，但要求站点在每一次消息到达后都显示通知，这样可以让用户确认他们仍希望接收消息并确保用户可见性。</p>
<p> </p>
<p> </p>
<div class="note">
<p><strong>Note</strong>: 从Gecko 44开始，当新的通知触发时，每个应用程序允许的推送消息配额不会增加，而另一个仍然可见，持续三秒钟。 这可以处理收到通知突发的情况，而不是所有通知都会产生可见通知。</p>
</div>
<div class="note">
<p><strong>Note</strong>:早于52的Chrome版本要求您在<a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a>上设置项目以发送推送消息，并在发送推送通知时使用关联的项目编号和API密钥。 它还需要一个应用程序清单，其中包含一些使用此服务的特殊参数。</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<h2 id="接口">接口</h2>
<dl>
<dt>{{domxref("PushEvent")}}</dt>
<dd>Represents a push action sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd>
<dt>{{domxref("PushManager")}}</dt>
<dd>Provides a way to receive notifications from third-party servers as well as request URLs for push notifications. This interface has replaced functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd>
<dt>{{domxref("PushMessageData")}}</dt>
<dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd>
<dt>{{domxref("PushSubscription")}}</dt>
<dd>Provides a subcription's URL endpoint and allows unsubscription from a push service.</dd>
</dl>
<h2 id="Service_worker_additions">Service worker additions</h2>
<p>The following additions to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.</p>
<dl>
<dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
<dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.</dd>
<dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
<dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd>
<dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
<dd>An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)</dd>
</dl>
<h2 id="示例">示例</h2>
<p>Mozilla's <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> 包含很多关于Push有用的示例.</p>
<h2 id="规范">规范</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("Push API")}}</td>
<td>{{Spec2("Push API")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<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(42.0)}}</td>
<td>{{CompatGeckoDesktop(44.0)}}<sup>[1][3]</sup></td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>{{domxref("PushEvent.data")}},<br>
{{domxref("PushMessageData")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop(44.0)}}<sup>[3]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
<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(48.0)}}<sup>[4]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}<sup>[2]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatChrome(42.0)}}</td>
</tr>
<tr>
<td>{{domxref("PushEvent.data")}},<br>
{{domxref("PushMessageData")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
<ul>
<li>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</li>
<li>[2] This is currently not implemented. See the <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</li>
<li>[3] Push (and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li>
<li>[4] 在Firefox for Android version 48，Push已经默认开启了。</li>
</ul>
<p> </p>
<h2 id="另见">另见</h2>
<p> </p>
<ul>
<li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li>
<li><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Web Push Notifications: Timely, Relevant, and Precise</a>, Joseph Medley</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
</ul>
|
