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
|
---
title: Push API
slug: Web/API/Push_API
translation_of: Web/API/Push_API
---
<div>{{DefaultAPISidebar("Push API")}}</div>
<p class="summary"><strong>Push API</strong>는 웹 애플리케이션이 현재 로딩이 되어 있지 않더라도 서버로부터 메시지를 받을 수 있도록 하는 기능이다. 이는 개발자들이 비동기적으로 사용자에게 새로운 내용을 시기적절하게 전달할 수 있도록 만들어 준다.</p>
<h2 id="Push_콘셉트와_사용처">Push 콘셉트와 사용처</h2>
<div class="warning">
<p>PushManager를 수행할 때, 해당 애플리케이션에 CSRF/XSRF 이슈에 대한 대응책을 마련해놓아야 한다: </p>
<ul>
<li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li>
<li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li>
</ul>
</div>
<p>애플리케이션이 push 메시지를 받기 위해서, <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>를 활성화한다. </p>
<p>{{domxref("PushManager.subscribe()")}}.</p>
<p>{{domxref("PushSubscription")}}에 애플리케이션이 보내야 하는 push메시지를 담고, (엔드포인트와 암호화키가 필요)</p>
<p>service worker는{{domxref("ServiceWorkerGlobalScope.onpush")}} 라는 이벤트 핸들러로부터 전달되는 push 메시지를 처리하기 시작한다.</p>
<p>각 요청은 <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>:(당신의 애플리케이션)을 특정하여 엔드포인트를 구성하기 때문에 엔드포인트 URL은 보안에 신경을 써야 하며, 그렇지 않을 경우 다른 애플리케이션에서 당신의 애플리케이션에 push 메시지를 보낼 가능성도 있다. </p>
<p>push 메시지를 전달하기 위해 service worker를 활성화하는 건, 리소스 사용이 늘어나는 결과를 가져오기 때문에, 특히 배터리 사용에 영향을 미친다. 한편 push메시지 처리를 위해 브라우저 간 다른 스키마를 가지기 때문에, 표준화된 메커니즘이 없다. Firefox는 한정된 숫자(quota)만을 push 메시지로 보내도록 해 놓았다. 이러한 제한은 사이트에 방문할 때마다 초기화되며, Chrome은 제한이 없으며 모든 push 메시지가 보이도록 한다. </p>
<div class="note">
<p><strong>Note</strong>: Gecko 44에 따르면, 각 애플리케이션에 할당된 quota는 3초 정도 다른 알림이 보이는 상태일 때, 새로운 알림이 발생해도 중가하지 않는다. </p>
</div>
<div class="note">
<p><strong>Note</strong>: Chrome 52 이전 버전은 push메시지 활용을 위해선 <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a>에 프로젝트를 세팅해야 하며 한편 push 메시지를 보낼 때 프로젝트 번호 및 API 키를 활용하도록 권장한다. app manifest에 서비스 활용에 필요한 특정 패러미터를 정의해야 한다.</p>
</div>
<h2 id="Interfaces">Interfaces</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 the 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="/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="Examples">Examples</h2>
<p>Mozilla's <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> contains many useful Push examples.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<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>
<h3 id="PushEvent"><code>PushEvent</code></h3>
<div>
<p>{{Compat("api.PushEvent")}}</p>
<h3 id="PushMessageData"><code>PushMessageData</code></h3>
<div>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("api.PushMessageData")}}</p>
</div>
</div>
</div>
<h2 id="See_also">See also</h2>
<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="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
</ul>
<div>{{DefaultAPISidebar("Push API")}}</div>
|
