Web/API/Push_API を更新 (#1963)

- 2021/06/22 時点の英語版に同期

1 files changed, 18 insertions, 41 deletions

diff --git a/files/ja/web/api/push_api/index.html b/files/ja/web/api/push_api/index.html
index 15c7aa781c..295bb675dd 100644
--- a/files/ja/web/api/push_api/index.html
+++ b/files/ja/web/api/push_api/index.html
@@ -12,66 +12,49 @@ tags:
   - プッシュ通知
 translation_of: Web/API/Push_API
 ---
-<div>{{DefaultAPISidebar("Push API")}}</div>
+<div>{{ApiRef("Push API")}}</div>
 
-<p class="summary"><ruby><strong>Push API</strong><rp> (</rp><rt>プッシュ通知 API</rt><rp>) </rp></ruby>は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。</p>
+<p class="summary"><strong>Push API</strong> は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。</p>
 
-<h2 id="Push_concepts_and_usage" name="Push_concepts_and_usage">プッシュ通知の概念と使い方</h2>
+<h2 id="Push_concepts_and_usage">プッシュ通知の概念と使い方</h2>
 
 <div class="warning">
-<p>PushManager への加入を実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。</p>
+<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://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">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>アプリがプッシュ通知メッセージを受信するために、アプリで<a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー</a>が動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。</p>
-
-<p>これはボタンのクリックなどといったユーザーの操作への応答として行います。例えば以下のようにします。</p>
-
-<pre class="brush: js">btn.addEventListener('click', function() {
-  serviceWorkerRegistration.pushManager.subscribe(options)
-  .then(function(pushSubscription) {
-    // handle subscription
-  });
-})</pre>
-
-<p>これは単なるベストプラクティスではありません — ユーザーが同意していない通知によってユーザーにスパムを送るべきではありません — が、ブラウザーはユーザーの操作への応答以外で起動される通知を明確に許可しなくなってきています。例えば Firefox は、すでにこれをバージョン72で行っています。</p>
+<p>アプリがプッシュ通知メッセージを受信するために、アプリで<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>が動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。</p>
 
 <p>返値の {{domxref("PushSubscription")}} には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。</p>
 
 <p>プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.onpush")}} イベントハンドラーへ配信されます。これにより、例えば ({{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。</p>
 
-<p>各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の <a href="http://www.w3.org/TR/capability-urls/">capability URL</a> です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。</p>
+<p>各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の <a href="https://www.w3.org/TR/capability-urls/">capability URL</a> です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。</p>
 
 <p>プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 Firefox も Chrome も通知を生成するプッシュ通知メッセージの数に制限を設けていません。 Firefox は通知を表示しないアプリケーションに送信されるプッシュ通知メッセージの数に制限 (クォータ) を設けていますが、 Chrome には制限がありません。この制限数は、ウェブサイトを訪れるたびに更新されます。</p>
 
-<div class="note">
-<p><strong>メモ</strong>: Gecko 44 以降では、通知の表示中に別のプッシュ通知メッセージが発行された場合、アプリケーションごとのプッシュ通知メッセージ数の上限は、3秒経つまで加算されません。これは、大量のプッシュ通知メッセージを受け取り、そのすべてが表示される通知を生成するわけではない場合に有効です。</p>
-</div>
-
-<div class="note">
-<p><strong>メモ</strong>: Chrome バージョン 52 より前のバージョンでは、プッシュ通知メッセージの配信のために <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> にプロジェクトを作成する必要があり、そのプロジェクト番号と紐付いた API キーをプッシュ通知の配信に利用していました。また、このサービスを利用するには、アプリマニフェストに特別な値を設定する必要があります。</p>
-</div>
-
-<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>
+<h2 id="Interfaces">インターフェイス</h2>
 
 <dl>
  <dt>{{domxref("PushEvent")}}</dt>
- <dd>{{domxref("ServiceWorker")}} の<a href="/docs/Web/API/ServiceWorkerGlobalScope">グローバルスコープ</a> に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。</dd>
+ <dd>{{domxref("ServiceWorker")}} の<a href="/ja/docs/Web/API/ServiceWorkerGlobalScope">グローバルスコープ</a> に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。</dd>
  <dt>{{domxref("PushManager")}}</dt>
- <dd>プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。このインターフェイスは、非推奨になった {{domxref("PushRegistrationManager")}} インターフェイスの機能を置き換えるものです。</dd>
+ <dd>プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。</dd>
  <dt>{{domxref("PushMessageData")}}</dt>
  <dd>サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。</dd>
  <dt>{{domxref("PushSubscription")}}</dt>
  <dd>サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。</dd>
+ <dt>{{domxref("PushSubscriptionOptions")}}</dt>
+ <dd>プッシュサブスクリプションに関連付けられたオプションを表します。</dd>
 </dl>
 
-<h2 id="Service_worker_additions" name="Service_worker_additions">サービスワーカーへの追加機能</h2>
+<h2 id="Service_worker_additions">サービスワーカーへの追加機能</h2>
 
-<p>以下の <a href="/docs/Web/API/Service_Worker_API">Service Worker API</a> への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。</p>
+<p>以下の <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。</p>
 
 <dl>
  <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
@@ -82,11 +65,11 @@ translation_of: Web/API/Push_API
  <dd>{{Event("pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時 (即ち、プッシュサーバーが有効期限を設定している場合) です。</dd>
 </dl>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <p>Mozilla の <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> は便利なプッシュ通知の例をたくさん揃えています。</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <thead>
@@ -105,23 +88,17 @@ translation_of: Web/API/Push_API
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="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>
 <p>{{Compat("api.PushMessageData")}}</p>
-</div>
-</div>
-</div>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="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>