diff options
Diffstat (limited to 'files/ja/web/api/simple_push_api')
-rw-r--r-- | files/ja/web/api/simple_push_api/index.html | 189 |
1 files changed, 0 insertions, 189 deletions
diff --git a/files/ja/web/api/simple_push_api/index.html b/files/ja/web/api/simple_push_api/index.html deleted file mode 100644 index b67dc801e2..0000000000 --- a/files/ja/web/api/simple_push_api/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Simple Push -slug: Web/API/Simple_Push_API -tags: - - API - - B2G - - Firefox OS - - Non-standard - - Simple Push API - - WebAPI -translation_of: Archive/B2G_OS/API/Simple_Push_API ---- -<p>{{ non-standard_header() }}</p> - -<p><strong>Simple Push API</strong>、別名プッシュ通知 API はウェイクアップして通知を受け取る能力をアプリにもたらします。Simple Push は同期メカニズムとしても、あるいはサードパーティのサーバーから最新データを取得する方法としても利用できます。</p> - -<p>「プッシュ」とはリモートサーバーから送られてくるイベントに過ぎません。これは以下のようにして動作します。アプリは Simple Push API を使ってエンドポイントと呼ばれる特殊なユニーク URL をリクエストします。このリクエストは、Mozilla がこの目的のために管理する既存のサーバー(これは「プッシュサーバー」と呼ばれます)へ送られます。プッシュサーバーから返されるエンドポイントをアプリが受け取ると、アプリは自身のサーバー(あなたのアプリサーバーです)へエンドポイントを送信します。アプリサーバーはこのエンドポイントを保存します。その後、アプリをウェイクアップしたいと思った時にバージョン番号付きでエンドポイントを呼び出し、プッシュサーバーはアプリにそのバージョン番号通知を連絡します。アプリは通知を受け取った時に、それを無視することも含め何らかのこと行うことができます。</p> - -<p>Simple Push APIは {{domxref("window.navigator")}} を拡張して {{domxref("PushManager")}} オブジェクトを保持する <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;"><code>push</code> </span>プロパティを持たせ、またプッシュの状態を監視するために受け取れる新しいイベントをいくつか追加します。</p> - -<h2 id="基本を説明する例">基本を説明する例</h2> - -<p>Simple Push の使い方はいくつかあります。この例では基本的な使い方を取り上げます。例は以下の一般的な手順からなります。各手順の完全な情報についてはその後のセクションをご覧ください。</p> - -<ol> - <li><a href="#1._.E3.82.A2.E3.83.97.E3.83.AA.E3.81.AE.E3.83.9E.E3.83.8B.E3.83.95.E3.82.A7.E3.82.B9.E3.83.88.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AB_push_.E3.81.AE.E8.A8.AD.E5.AE.9A.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">アプリのマニフェストファイルに <code>push</code> の設定を追加する</a></li> - <li><a href="#2._PushManager.register()_.E3.82.92.E5.91.BC.E3.82.93.E3.81.A7.E3.82.A8.E3.83.B3.E3.83.89.E3.83.9D.E3.82.A4.E3.83.B3.E3.83.88.E3.82.92.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B"><code>PushManager.register</code> を呼んでエンドポイントをリクエストする</a></li> - <li><a href="#3._.E3.82.A8.E3.83.B3.E3.83.89.E3.83.9D.E3.82.A4.E3.83.B3.E3.83.88.E3.82.92.E3.82.B5.E3.83.BC.E3.83.90.E3.83.BC.E3.81.AB.E9.80.81.E4.BF.A1.E3.81.99.E3.82.8B">エンドポイントをサーバーに送信する</a></li> - <li><a href="#4._.E3.82.A2.E3.83.97.E3.83.AA.E3.81.AB_push_.E9.80.9A.E7.9F.A5.E7.94.A8.E3.81.AE.E3.83.A1.E3.83.83.E3.82.BB.E3.83.BC.E3.82.B8.E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">アプリにプッシュ通知用のメッセージハンドラーを追加する</a></li> - <li><a href="#5._.E3.82.A8.E3.83.B3.E3.83.89.E3.83.9D.E3.82.A4.E3.83.B3.E3.83.88.E3.82.92.E4.BD.BF.E3.81.A3.E3.81.A6.E3.82.B5.E3.83.BC.E3.83.90.E3.83.BC.E3.81.8B.E3.82.89.E9.80.9A.E7.9F.A5.E3.82.92.E9.80.81.E4.BF.A1.E3.81.99.E3.82.8B">エンドポイントを使ってサーバーから通知を送信する</a></li> -</ol> - -<h2 id="1._アプリのマニフェストファイルに_push_の設定を追加する">1. アプリのマニフェストファイルに push の設定を追加する</h2> - -<p>Sinple Push を使えるようにするため、マニフェストファイルで二か所変更が必要です。</p> - -<ol> - <li><a href="/docs/Web/Apps/Manifest#messages" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&redirectslug=Apps%2FManifest#messages"><code>messages</code> フィールド</a> - <code>push</code> と <code>push-register</code> メッセージを追加。<br> - これはアプリの(<code>push</code> と <code>push-register</code> の)各イベントを受け取るページを示します。この例ではどちらも同じ「/index.html」ページへ進みますが、異なるページを使っても構いません。より詳細な各イベントの情報は後述します。</li> - <li><a href="/docs/Web/Apps/Manifest#permissions" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&redirectslug=Apps%2FManifest#permissions"><code>permissions</code> フィールド</a> - アプリがプッシュ通知受け取りを要求することを追加。<br> - なぜ push 権限が必要なのか、エンドユーザーが理解できるように明確な説明を提供するのはいい考えです。</li> -</ol> - -<pre class="brush: js"><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": "サッカーの試合中にゴールが決まるたび更新を受け取るのに必須",<span class="err"> -</span><span class="p"> }</span> -<span class="err">}</span></pre> - -<h2 id="2._PushManager.register()_を呼んでエンドポイントをリクエストする">2. PushManager.register() を呼んでエンドポイントをリクエストする</h2> - -<p>アプリは {{domxref("PushManager.register")}} を呼び出してエンドポイントをリクエストする必要があります。いつ呼び出すかはあなたが決めなければなりません。ユーザーがログインした時やサッカーの試合を観戦することに決めた時など何らかの時点でエンドポイントを呼び出せます。以下のコードがそのための一例です。</p> - -<pre class="brush: js language-js"><code class="language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>push<span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment"> // エンドポイントをリクエストします。PushManager.register() を使います。 -</span> <span class="token keyword">var</span> req <span class="token operator">=</span> navigator<span class="token punctuation">.</span>push<span class="token punctuation">.</span><span class="token function">register<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> - - req<span class="token punctuation">.</span>onsuccess <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">var</span> endpoint <span class="token operator">=</span> req<span class="token punctuation">.</span>result<span class="token punctuation">;</span> - console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">"新しいエンドポイント:"</span> <span class="token operator">+</span> endpoint <span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token comment"> // ここであなたのサーバーにエンドポイントを送信するため、何らかの呼び出しを使用します。 -</span> <span class="token comment"> // 例えばこうです。 -</span> <span class="token comment">/* - var post = XMLHTTPRequest(); - post.open("POST", "https://your.server.here/registerEndpoint"); - post.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - post.send("endpoint=" + encodeURIComponents( endpoint ) ); - */</span> -<span class="token comment"> // 明らかに .onload と .onerror ハンドラー、及びユーザー ID の情報や - // その他エンドポイントとユーザーを関連付ける必要のある何らかの情報を追加したくなるでしょう。 -</span> <span class="token punctuation">}</span> - - req<span class="token punctuation">.</span>onerror <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> - console<span class="token punctuation">.</span><span class="token function">error<span class="token punctuation">(</span></span><span class="token string">"新しいエンドポイント取得に関するエラー:"</span> <span class="token operator">+</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> - <span class="token comment"> // DOM 上で push が使用できないためそれ以外のことをします。 -</span><span class="token punctuation">}</span></code></pre> - -<h2 id="3._エンドポイントをサーバーに送信する">3. エンドポイントをサーバーに送信する</h2> - -<p>エンドポイントを取得したらそれをアプリケーションのサーバーに送る必要があります。方法は一つではありません。例えばメール送信や POST、PUT、果ては GET を使った送信など好きな方法で送ることができます。エンドポイントは、アプリケーションから送られるクッキーやユーザー名、その他エンドポイントとユーザーの組を特定する時に使う何らかのユーザーデータとともに保存することを推奨します。</p> - -<p>とは言え、サーバーに送信するのであれば以下の優れたプラクティスに従うことを推奨します。</p> - -<ol> - <li>XMLHttpRequest で送信する。</li> - <li>常に HTTPS を使う。さもなくば何者かがエンドポイントを傍受してアプリに通知を送り始めるかも知れない。</li> - <li>クッキーなど、ユーザー(やインストールしたアプリケーション)をもとにエンドポイントを照合できる物を使用する。</li> - <li>エンドポイントを安全に保つこと! エンドポイントがあれば、顧客のバッテリーの浪費やサーバーとの不要な接続など迷惑なことを引き起こせます。いつでもクライアントに新しいエンドポイントを取得して古い物を捨てさせることができますが、あなたのサーバーがその変更を検知できるようにしなければならないことを覚えておいてください。</li> -</ol> - -<h2 id="4._アプリに_push_通知用のメッセージハンドラーを追加する">4. アプリに push 通知用のメッセージハンドラーを追加する</h2> - -<p>これまでの手順でエンドポイントを設定したらようやく、アプリがメッセージハンドラーを使って <code>push</code> と <code>push-register の</code>メッセージの待ち受けを開始できます。</p> - -<h3 id="push_メッセージハンドラーを追加する"><code>push</code> メッセージハンドラーを追加する</h3> - -<p><code>push メッセージハンドラー</code>は <code>index.html</code> ファイル内や <code>main.js</code> のスクリプト内で登録することもできますが、そのスクリプトだけを持った特別な <code>push-message.html</code> ファイル内で登録することもできます。これは <code>push</code> メッセージを受け取った時にアプリが閉じている場合に便利でしょう。サイズの小さい部分的な HTML/JavaScript コードだけををロードして、アプリ全体を開く必要があるのかバックグラウンドで何かを行う必要があるのか決められるからです。<code>push メッセージハンドラーをどこに置くことに決めたにせよ、マニフェストファイルが正しい場所を示すようにしてください(前述の最初の手順参照)。</code>そうしないとアプリが更新を受け取れません。<code>push メッセージハンドラーの例は以下の通りです。</code></p> - -<pre class="brush: js"><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> - console.log<span class="p">(</span><span class="s1">'エンドポイントは '</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span><span class="p">);</span> - console.log<span class="p">(</span><span class="s1">'新しいバージョンは '</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">//複数の pushEndpoint がある場合、ここで処理できることを</span> - <span class="c1">//憶えておいてください</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">// メッセージハンドラーなし</span> -<span class="p">}</span></pre> - -<h3 id="push-register_メッセージハンドラーを追加する"><code>push-register</code> メッセージハンドラーを追加する</h3> - -<div class="note"> -<p><strong>注:</strong>忘れずにこのハンドラーを追加して動作することを確認してください。アプリがこのメッセージを受け取った時にエンドポイントを再登録しないと、これ以上プッシュ通知を受け取れ<strong>なくなります</strong></p> -</div> - -<p>デバイスの (UAID または User Agent Identifierと呼ばれる)内部的な iDが変わった時は、全アプリに <code>push-register</code> メッセージが送信されます。これは、プッシュサーバーが変わった、サーバーがダウンして復旧が必要、その他の事情が原因となり得ます。こうしたうちの一つが発生すると、過去のエンドポイントは不適合となるため、全エンドポイントを再登録し<strong>なければならない</strong>ことを意味します。そのため、<code>アプリは push-register</code> メッセージハンドラーを実装する必要があります。以下のサンプルコードを参照してください。</p> - -<pre class="brush: js"><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-register'</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> - console.log<span class="p">(</span><span class="s1">'push-register を受信、再度エンドポイントを登録する必要あり!'</span><span class="p">);</span> - -<span class="c1"> <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> - console.log<span class="p">(</span><span class="s2">"新しいエンドポイント:"</span> <span class="o">+</span> <span class="nx">endpoint</span> <span class="p">); - localStorage.endpoint = endpoint;</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> - console.error<span class="p">(</span><span class="s2">"新しいエンドポイント取得に関するエラー:"</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> - <span class="p">});</span> -<span class="p">}</span> <span class="k">else</span> <span class="p">{</span> - <span class="c1">// メッセージハンドラーなし</span> -<span class="p">}</span></pre> - -<h2 id="5._エンドポイントを使ってサーバーから通知を送信する">5. エンドポイントを使ってサーバーから通知を送信する</h2> - -<p>一旦あなたのサーバーにエンドポイントを保持すれば、ボディを <code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">version=<version></span></code> にした <code>HTTP PUT</code> リクエストをエンドポイントに送るだけで通知を送れます。例えばエンドポイントが</p> - -<pre class="language-html"><code class="language-html">https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef</code></pre> - -<p>という URL で、バージョンが 5</p> - -<pre class="language-html"><code class="language-html">version=5</code></pre> - -<p>だとしましょう。curl を使う場合、通知はこのようにして確認します。</p> - -<pre class="language-html"><code class="language-html">curl -X PUT -d "version=5" https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef</code></pre> - -<p>プッシュサーバーが正しく動いていれば、ステータスが <code>200</code>(<code>OK</code>)でボディが <code>{}</code> となっているレスポンスを受け取ります。また、メッセージは受け入れられたけれど代わりのシステムを使って処理できるということを示すステータス 202 を受け取るかも知れません。そうでなければエラーを説明する JSON つきの妥当な HTTP エラーレスポンスが返ります。</p> - -<div class="note"> -<p><strong>お忘れなく:</strong>Simple Push がメッセージを受け取ったというだけでそのメッセージがアプリにうまく届いたということが保証されるわけではありません。デバイスがオフラインであることから様々なネットワーク障害まで、多くの要素が通知の配信の妨げとなり得ます。わたしたちも最善を尽くしていますが、ときおり宇宙は思い通りにならないものです。</p> -</div> - -<p><code>version の値</code>は増加する整数になるはずだということを覚えておいてください。もし新しいバージョンがサーバーやデバイスに保存しているものよりも低い場合は、アプリケーションは新しい通知を受け取り<em>ません</em>。バージョンは、アプリが本当に確認しておくべきなのに「見逃された」イベントがないかを表すのに便利かも知れません。また、実際のバージョンの値がそれほど重要でない場合には現在の UTC(1970 年 1 月 1 日の真夜中からの経過秒数。GMT)を使うだけでもいいでしょう。</p> - -<h3 id="エンドポイントを登録解除する">エンドポイントを登録解除する</h3> - -<p>エンドポイントを使い終えてこれ以上通知を受けとりたくなくなった場合は、{{domxref("PushManager.unregister")}} を使って古いエンドポイントを登録解除するようお願いします。これによりデバイスがプッシュサーバーに送信する多量のデータを一掃でき、また使用しない通知をアプリに送信しないことでバッテリー使用量を抑えることにもなります。</p> - -<h2 id="仕様">仕様</h2> - -<p>{{page("/ja/docs/Web/API/PushManager","Specifications")}}</p> - -<h2 id="ブラウザー互換性">ブラウザー互換性</h2> - -<p>{{page("/ja/docs/Web/API/PushManager","Browser_compatibility")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{domxref("PushManager")}}</li> - <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Navigator.push">Window.navigator.push</a></li> - <li><a href="https://github.com/frsela/pushJSlibrary" title="https://github.com/frsela/pushJSlibrary">pushJSLibrary。この API を実装していないブラウザー向けのプッシュ shim</a></li> - <li><a href="https://wiki.mozilla.org/WebAPI/SimplePush">SimplePush の元々の設計と議論のページ</a>。</li> -</ul> |