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
|
---
title: Push API
slug: Web/API/Push_API
tags:
- API
- Experimental
- Notificaciones
- Push
- Referencia
translation_of: Web/API/Push_API
---
<p>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</p>
<p>La <strong>API Push</strong> otorga a las aplicaciones web la habilidad de recibir mensajes enviados a ellas desde un servidor, sin importar si la aplicación está o no en primer plano o cargada. Esto permite a los desarrolladores enviar notificaciones asíncronas y actualizaciones para los usuarios que las aceptan.</p>
<div class="note">
<p><strong>Nota</strong>: Esta documentación cubre la especificación del API Push de W3C; si estás buscando la documentación para el mecanismo push propio de Firefox OS, ve <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>.</p>
</div>
<h2 id="Push_conceptos_y_uso">Push conceptos y uso</h2>
<p>Para que una aplicación recibá mensajes push, esta debe tener un <em><a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a></em>. Cuando el service worker esta activo, se puede suscribir usando {{domxref("PushManager.subscribe()")}}.</p>
<p>El resultado de {{domxref("PushSubscription")}} incluye toda la información que la aplicación necesita para enviar un mensaje push: un <em>endpoint </em>y la llave de cifrado necesaria para enviar los datos.</p>
<p>El service worker se iniciará cuando sea necesario manejar mensajes push entrantes, que se entregan al manejador de eventos. Esto permite a las aplicaciones reaccionar a los mensajes push recibidos, por ejemplo para mostrar una notiificación usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.</p>
<p>Cada suscripción es unica para un service worker. El endpoint para la subscripción es una unica <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: el conocimiento del endpoint es todo lo se necesita para enviar un mensaje a tu aplicación. La URL del endpoint por lo tanto necesita ser mantenida secreta, u otras aplicaciones podrían ser capases de enviar mensajes push a tu aplicación.</p>
<p>Activar un Service-Worker para entregar un mensaje push puede resultar en el incremento de uso de recursos, especialmente de la batería. Los diferentes navegadores disponen de diferentes esquemas para manejar esto - en la actualidad no existe un mecanismo estándar para ello. Firefox permite un numero limitado (det. cuota) de mensajes push para enviar a una aplicación, aunque los mensajes push que generan una notificación estan exentos de este límite. Este límite se actualiza cada vez que se visita el sitio web. En comparación, Chrome no aplica límites, pero requiere que todo mensaje push muestre una notificación.</p>
<div class="note">
<p><strong>Note: </strong> Desde Gecko 44, la cuota permitida de Push-messages por aplicación no se ve incrementada cada vez que se emite una nueva notificación, cuando otra sigue visible, durante el periodo de 3 segundos. Esto ayuda al manejo de casos en los que se reciben rafagas de notificaciones y no todas ellas emiten una notificación visible. </p>
</div>
<div class="note">
<p><strong>Nota:</strong> en Chrome las versiones anteriores a la 52, requieren la cnfiguración de un proyecto en <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> para el envío de Push-Messages, así como el uso del numero de proyecto y la API key asociadas para el envío de notificaciones push. Tambien se requiere el detalle de algunos parametros especiales en el app manifest para el uso de este servicio.</p>
</div>
<h2 id="Interfaces">Interfaces</h2>
<dl>
<dt>{{domxref("PushEvent")}}</dt>
<dd>Represena una acción push enviada al <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">alcance global</a> (global scope) de un {{domxref("ServiceWorker")}}. Contiene información enviada desde una aplicación 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>Provee acceso a los datos push enviados por el servidor e incluye metodos para manipular los datos recibidos.</dd>
<dt>{{domxref("PushSubscription")}}</dt>
<dd>Provee el URL endpoint para una suscripción y permite la desuscripción de un servicio push.</dd>
</dl>
<h2 id="Service_worker_Adiciones">Service worker: Adiciones</h2>
<p>Las siguientes adiciones al <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> han sido especificadas en la Push API, para proveer un punto de entrada al uso de Push messages. Tambien monitorizan y responden a los cambios en los eventos Push y Subscription.</p>
<dl>
<dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
<dd>Devuelve una referencia a la interfaz {{domxref("PushManager")}} para el manejo de las suscripciones incluyendo: la suscripción, obteniendo una suscripción activa y accediendo al estado de permiso de push. Este es el punto de inicio para el uso de Push messaging.</dd>
<dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
<dd>Manipulador de eventos activado, cada vez que ocurre un evento {{Event("push")}}; Eto es, cada vez que se recibe un push-message del servidor.</dd>
<dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
<dd>Manipulador de eventos activado, cada vez que ocurre un evento {{Event("pushsubscriptionchange")}}; Por ejemplo, cuando una suscripción ha sido invalidada o esta apunto de serlo. (P.ej. cuando un push service determina un tiempo de expiración.)</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Mozilla's <a href="https://github.com/mdn/serviceworker-cookbook/">ServiceWorker Cookbook</a> contiene varios ejemplos Push muy utiles</p>
<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("Push API")}}</td>
<td>{{Spec2("Push API")}}</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(42.0)}}</td>
<td>{{CompatGeckoDesktop(44.0)}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}<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)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</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>{{CompatNo}}</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>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</p>
<p>[2]: <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status: Under Consideration; Roadmap Priority: Low</a></p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="Web/API/Push_API/Using_the_Push_API">¿Cómo usar la API Push?</a></li>
<li><a href="https://github.com/chrisdavidmills/push-api-demo">Push API Demo</a>, on Github</li>
<li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
<li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
</ul>
|
