---
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>

<h3>PushEvent</h3>

{{Compat("api.PushEvent")}}

<h3>PushMessageData</h3>

{{Compat("api.PushMessageData")}}

<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>