files/ko/webapi/simple_push/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

---
title: Simple Push
slug: WebAPI/Simple_Push
translation_of: Archive/B2G_OS/API/Simple_Push_API
---
<p>{{ draft() }}{{ SeeCompatTable() }}</p>
<p><a href="https://wiki.mozilla.org/WebAPI/SimplePush" title="https://wiki.mozilla.org/WebAPI/SimplePush">Simple Push API</a>, 다른 이름으로 푸시 알림 API는 알림을 받으면 앱이 깨어나는 기능을 제공한다. 앱은 서버와 공유할 수 있는 URI를 요청할 수 있는데, 다시 말해 앱에 전달될 버전 번호를 보낼 수 있다는 뜻이다. 이 기능은 동기화 메카니즘으로 사용될 수도 있고, 서드 파티 서버에서 최신 데이터를 가져오기 위해 쓸 수도 있다.</p>
<p>심플푸시 API는 {{domxref("PushManager")}} 객체인 <code>push 속성을 가지고</code> {{domxref("window.navigator")}} 객체를 확장하고, 푸시 상태를 감지하기 위해 받을 수 있는 새 이벤트를 더한다.</p>
<h2 id="예제">예제</h2>
<p>이 예제는 푸시의 전체 설정을 다룬다. 다음 단계를 따라하자.</p>
<ol>
  <li>앱의 매니페스트 파일에 <code>push</code>를 허용하는 상태로 더한다.</li>
  <li>endpoint를 요청하기 위해 <code>push.register()</code>를 호출한다.</li>
  <li>endpoint를 서버에 보낸다.</li>
  <li>앱 내부의 푸시 알림을 위한 메시지 핸들러를 더한다.</li>
  <li>서버에서 알림을 보낸다..</li>
</ol>
<h3 id="매니페스트_파일_변경">매니페스트 파일 변경</h3>
<p>매니페스트 파일에서 두 가지를 수정한다.</p>
<ol>
  <li><a href="/docs/Web/Apps/Manifest#messages" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&amp;redirectslug=Apps%2FManifest#messages"><code>messages</code> field</a> - <code>push와</code> <code>push-register</code> 메시지를 더한다.</li>
  <li><a href="/docs/Web/Apps/Manifest#permissions" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&amp;redirectslug=Apps%2FManifest#permissions"><code>permissions</code> field</a> - 푸시 알림을 받기 원하는 앱에 더한다.</li>
</ol>
<pre><span class="s2">"messages"</span><span class="o">:</span> <span class="cp">[</span>
   <span class="p">{</span> <span class="s2">"push"</span><span class="p">:</span> <span class="s2">"/index.html"</span><span class="p">},</span>
   <span class="p">{</span> <span class="s2">"push-register"</span><span class="p">:</span> <span class="s2">"/index.html"</span><span class="p">}</span>
<span class="cp">]</span><span class="o">,</span>
<span class="s2">"permissions"</span><span class="o">:</span> <span class="p">{</span>
  <span class="s2">"push"</span><span class="o">:</span> <span class="err">{
    </span>"description": "Required for be updated with new goals in soccer matchs",<span class="err">
</span><span class="p">  }</span>
<span class="err">}</span></pre>
<h3 id="endpoint_요청을_위한_domxref(PushManager.register)_호출">endpoint 요청을 위한 {{domxref("PushManager.register")}} 호출</h3>
<p>이 코드는 endpoint를 요청할 시간인지 결정할 때 호출해야 한다. 예를 들어 사용자가 로그인 할 때나 축구 경기를 관전하기 시작할 때를 들 수 있다.</p>
<pre><span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">push</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">req</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">push</span><span class="p">.</span><span class="nx">register</span><span class="p">();</span>

  <span class="nx">req</span><span class="p">.</span><span class="brush: js">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">endpoint</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">result</span><span class="p">;</span>
      <span class="nx">debug</span><span class="p">(</span><span class="s2">"New endpoint: "</span> <span class="o">+</span> <span class="nx">endpoint</span> <span class="p">);</span>
    <span class="p">}</span>

   <span class="nx">req</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">debug</span><span class="p">(</span><span class="s2">"Error getting a new endpoint: "</span> <span class="o">+</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">e</span><span class="p">));</span>
   <span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
  <span class="c1">// No push on the DOM</span>
<span class="p">}</span></pre>
<h3 id="endpoint를_서버에_보내기">endpoint를 서버에 보내기</h3>
<p>endpoint를 갖게 되면, 어플리케이션 서버에 보내야 한다. 한 가지 방법만 있는 건 아닌데, 선호하는 방법으로 할 수 있으므로, 예를 들어 이메일을 보내거나 <code>POST</code>, <code>PUT</code>이나 <code>GET</code> 방식을 사용할 수도 있다. 추천하는 방법은 어플리케이션에서 사용자 데이터와 함께 endpoint를 저장하는 방식으로, 쿠키, 사용자 이름같이 endpoint와 사용자 쌍을 식별하는데 사용할 수 있다면 무엇이든 좋다.</p>
<p>하지만 서버에 보낸다면, 다음의 좋은 사례를 따르기를 권한다.</p>
<ol>
  <li>XMLHttpRequest로 보낸다.</li>
  <li>항상 HTTPS를 사용한다. 누군가 endpoint를 가로채면, 앱에 알림을 보낼 수 있다.</li>
  <li>쿠키와 같이, endpoint에 사용자(또는 어플리케이션 설치)와 맞춰볼 수 있는 무언가를 사용한다.</li>
</ol>
<h3 id="메시지_핸들러_더하기">메시지 핸들러 더하기</h3>
<p>endpoint를 설정하면, 앱이 푸시 메시지를 들을 준비가 된다. <code>index.html</code> 파일이나 <code>main.js 스크립트에 등록할 수 있는데</code>, 스크립트만 있다면 특정<code> push-message.html 파일이 될 수도 있다.</code> 이 방식은 <code>push 메시지를 받고 앱이 종료하는 경우 유용한데,</code>HTML/자바스크립트 코드의 작은 부분만 로드한 상태로 앱이 완전히 열릴지 혹은 백그라운드에서 어떤 작업을 할지 결정할 수 있기 때문이다.</p>
<pre><span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">)</span> <span class="p">{</span>
  <span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">(</span><span class="s1">'push'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">debug</span><span class="p">(</span><span class="s1">'My endpoint is '</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span><span class="p">);</span>
    <span class="nx">debug</span><span class="p">(</span><span class="s1">'My new version is '</span> <span class="o">+</span>  <span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
    <span class="c1">//Remember that you can handle here if you have more than</span>
    <span class="c1">//one pushEndpoint</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span> <span class="o">===</span> <span class="nx">emailEndpoint</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">emailHandler</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span> <span class="o">===</span> <span class="nx">imEndpoint</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">imHandler</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
    <span class="p">}</span>
  <span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
  <span class="c1">// No message handler</span>
<span class="p">}</span></pre>
<h3 id="알림_보내기">알림 보내기</h3>
<p>서버에 <code>endpoint</code>를 가지면, 알림을 보내는 작업은 body에 <code>version=&lt;version&gt;</code>를 가지고 endpoint에 <code>HTTP PUT</code> 요청을 보내는 일만큼 쉽다. 다음과 같이 URL을 갖는 endpoint를 가정하자.</p>
<p><code>https://push.src.openwebdevice.com/v1/notify/abcdef01234567890abcdefabcdef01234567890abcdef</code></p>
<p>그리고 버전은 5이다.</p>
<p><code>version=5</code></p>
<p>컬로 다음 명령을 내리자.</p>
<p><code>curl -X PUT -d "version=5" https://push.src.openwebdevice.com/v1/notify/abcdef01234567890abcdefabcdef01234567890abcdef</code></p>
<p>서버가 올바르게 동작하면, <code>200 Status (OK)</code>와 <code>{}</code>인 body를 응답으로 받게 된다. 그렇지 않으면, 오류를 설명하는 유효한 JSON 객체를 받게 된다.</p>
<p>버전은 정수이고 증가한다는 점을 기억하자. 어플리케이션은 새로운 버전이 서버나 단말기에 저장된 버전보다 낮으면 알림을 <em>받지 않는다</em>.</p>
<h2 id="Specifications">Specifications</h2>
<p>{{page("/en-US/docs/Web/API/PushManager","Specifications")}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{page("/en-US/docs/Web/API/PushManager","Browser_compatibility")}}</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{domxref("PushManager")}}</li>
  <li>{{domxref("window.navigator.push","navigator.push")}}</li>
  <li><a href="https://github.com/frsela/pushJSlibrary" title="https://github.com/frsela/pushJSlibrary">pushJSLibrary, a push shim for browsers that do not implement the API</a></li>
</ul>