Web/Progressive_web_apps を更新 (#1407)

- conflicting 版は英語版で削除された記事であるため削除
- 2021/05/07 時点の英語版に同期

1 files changed, 22 insertions, 28 deletions

diff --git a/files/ja/web/progressive_web_apps/index.html b/files/ja/web/progressive_web_apps/index.html
index 9c729f609f..c02a19b5cc 100644
--- a/files/ja/web/progressive_web_apps/index.html
+++ b/files/ja/web/progressive_web_apps/index.html
@@ -1,18 +1,21 @@
 ---
-title: プログレッシブウェブアプリ
+title: プログレッシブウェブアプリ (PWA)
 slug: Web/Progressive_web_apps
 tags:
+  - App
+  - Application
   - Apps
-  - Modern web apps
   - PWA
   - Progressive web apps
+  - Web app
+  - Web applications
   - アプリ
   - プログレッシブウェブアプリ
 translation_of: Web/Progressive_web_apps
 ---
 <div>{{draft}}</div>
 
-<p class="summary"><img alt="PWA community logo" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; float: left; height: 188px; margin: 0px auto; padding-bottom: 1em; padding-right: 2em; width: 350px;"><strong><ruby>プログレッシブウェブアプリ<rp> (</rp><rt>Progressive web apps</rt><rp>) </rp></ruby></strong> (PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。プログレッシブウェブアプリは正式な標準ではありませんが、有用なデザインパターンです。 PWA は、特定のウェブ技術や技法の使用を含む、一連のアプリケーション属性を包含しているという点で AJAX や他の同様のパターンに似ていると考えることができます。この一連の文書では、これについて知るために必要なすべてをお伝えします。</p>
+<p class="summary"><img alt="PWA community logo" src="pwa.png" style="display: block; float: left; margin: 0px auto; padding-bottom: 1em; padding-right: 2em;"><strong>プログレッシブウェブアプリ (Progressive web apps, PWA)</strong> は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。プログレッシブウェブアプリは正式な標準ではありませんが、有用なデザインパターンです。 PWA は、特定のウェブ技術や技法の使用を含む、一連のアプリケーション属性を包含しているという点で AJAX や他の同様のパターンに似ていると考えることができます。この一連の文書では、これについて知るために必要なすべてをお伝えします。</p>
 
 <p>ウェブアプリを PWA と呼ぶには、技術的に言えば、 <a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> (<strong>{{Glossary("HTTPS")}}</strong>)、1つ以上の<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>、<a href="/ja/docs/Web/Manifest">マニフェストファイル</a>を持つべきです。</p>
 
@@ -25,23 +28,23 @@ translation_of: Web/Progressive_web_apps
  <dd>アプリがユーザーにどのように表示されるかを制御し、プログレッシブウェブアプリを確実に発見できるようにする {{Glossary("JSON")}} ファイルです。アプリの名前、開始 URL、アイコン、その他ウェブサイトをアプリのような形式に変換するために必要なすべての詳細が記述されています。</dd>
 </dl>
 
-<h2 id="PWA_advantages" name="PWA_advantages">PWA の利点</h2>
+<h2 id="PWA_advantages">PWA の利点</h2>
 
-<p>PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、プログレッシブで、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、<a href="/ja/docs/Web/Progressive_web_apps/Advantages">プログレッシブウェブアプリの利点</a>をお読みください。</p>
+<p>PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、プログレッシブで、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、<a href="/ja/docs/Web/Progressive_web_apps/Introduction#advantages_of_web_applications">プログレッシブウェブアプリの利点</a>をお読みください。</p>
 
 <p>PWA の実装方法については、 <a href="/ja/docs/Web/Progressive_web_apps/Developer_guide">PWA 開発者ガイド</a>をお読みください。</p>
 
-<h2 id="Documentation" name="Documentation">ドキュメント</h2>
+<h2 id="Documentation">ドキュメント</h2>
 
 <p><strong>&lt;-- 以下のものは一時的な自動生成リストで、すぐに置き換えられます --&gt;</strong></p>
 
 <p>{{LandingPageListSubpages}}</p>
 
-<div class="blockIndicator warning">
+<div class="notecard warning">
 <p><strong>ここから下は全て旧バージョンのままで、他のコンテンツの全面見直しに合わせて刷新していきます。</strong></p>
 </div>
 
-<h2 id="Core_PWA_guides" name="Core_PWA_guides">基本的な PWA のガイド</h2>
+<h2 id="Core_PWA_guides">基本的な PWA のガイド</h2>
 
 <p>以下のガイドは PWA を実装するのに必要なことを、単純な例を実行し、すべての部分がどのように動作するかを示します。</p>
 
@@ -54,26 +57,22 @@ translation_of: Web/Progressive_web_apps
  <li><a href="/ja/docs/Web/Progressive_web_apps/Loading">プログレッシブ読み込み</a></li>
 </ol>
 
-<div class="column-container">
-<div class="column-half">
-<h2 id="Technology_guides" name="Technology_guides">技術ガイド</h2>
+<h2 id="Technology_guides">技術ガイド</h2>
 
 <ul>
  <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a> — ウェブストレージ, IndexedDB, サービスワーカーをいつ、どのように使うかを示すとても長いガイド。</li>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers">サービスワーカーの使用</a> — より詳しい Service Worker API のガイド。</li>
+ <li><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカーの使用</a> — より詳しい Service Worker API のガイド。</li>
  <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a> — IndexedDB の基礎、詳しく説明されている。</li>
  <li><a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API の使用</a> — ウェブストレージ API はシンプルにできている。</li>
  <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">アプリケーションシェルアーキテクチャによるすばやいウェブアプリの読み込み</a> — App Shell コーディングパターンを使用して、すばやく読み込まれるアプリの作成のガイド。</li>
- <li><a href="/ja/docs/Web/API/Push_API/Using_the_Push_API">Push API の使用</a> — Web Push API の背景にある要点を学ぶ。</li>
- <li><a href="/ja/docs/Web/API/Using_Web_Notifications">Notifications API の使用</a> — ウェブ通知の簡単な説明。</li>
- <li><a href="/ja/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">レスポンシブデザインのブロック構成</a> — モダンアプリレイアウトにとって重要なレスポンシブウェブデザインの基本を学ぶ。</li>
- <li><a href="/ja/docs/Web/Apps/Modern/Responsive/Mobile_first">モバイルファースト</a> — レスポンシブなアプリケーションを作る時によく、モバイルレイアウトを既定として作って、その上により広いレイアウトを作る意味がある。</li>
+ <li><a href="/ja/docs/Web/API/Push_API">Push API の使用</a> — Web Push API の背景にある要点を学ぶ。</li>
+ <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">Notifications API の使用</a> — ウェブ通知の簡単な説明。</li>
+ <li><a href="/ja/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks">レスポンシブデザインのブロック構成</a> — モダンアプリレイアウトにとって重要なレスポンシブウェブデザインの基本を学ぶ。</li>
+ <li><a href="/ja/docs/Web/Progressive_web_apps/Responsive/Mobile_first">モバイルファースト</a> — レスポンシブなアプリケーションを作る時によく、モバイルレイアウトを既定として作って、その上により広いレイアウトを作る意味がある。</li>
  <li><a href="/ja/docs/Web/Progressive_web_apps/Add_to_home_screen">ホーム画面追加のためのガイド</a> — アプリをホーム画面に追加 (A2HS) する利点を学ぶ。</li>
 </ul>
-</div>
 
-<div class="column-half">
-<h2 id="Tools" name="Tools">ツール</h2>
+<h2 id="Tools">ツール</h2>
 
 <ul>
  <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — クライアントサイドのデータストレージを簡単に扱えるようにする素晴らしいシンプルな JavaScript ライブラリ、これは既定で IndexedDB を使用し、必要に応じて Web SQL/Web Storage にフォールバックする。</li>
@@ -83,22 +82,17 @@ translation_of: Web/Progressive_web_apps
  <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — 気持ち的には、より進んだキャッシングの手法と簡単なプリキャッシュを有するsw-precacheの後継者。</li>
  <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — あなたのサイトが常にあなたのユーザーのために存在するようにする小さなスクリプト。</li>
  <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — 一連の素晴らしい Service Worker/プッシュレシピ、オフラインアプリケーションの実装方法を紹介しているが、より多くの機能を持っている。</li>
- <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">PWA VS Code extension</a> - VisualStudio コード環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。</li>
+ <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">PWA VS Code extension</a> - VS Code 環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。</li>
 </ul>
-</div>
-</div>
 
 <ul>
  <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers</li>
  <li>Alex Russell による <a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a></li>
  <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li>
  <li>Google による <a href="https://developers.google.com/web/tools/lighthouse">The Lighthouse Tool</a></li>
- <li><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li>
- <li><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li>
- <li><a href="https://pokedex.org/">Offline-capable Pokédex web site</a></li>
- <li><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a></li>
- <li><a href="https://goingmeta.io/progressive-web-app/">Progressive Web App: Advantages in a nutshell</a></li>
- <li><a href="https://ymedialabs.com/progressive-web-apps">Why Progressive Web Apps Are The Future of Mobile Web (2019 Research)</a></li>
+ <li><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a>.</li>
+ <li><a href="https://pokedex.org/">Offline-capable Pokédex web site</a>.</li>
+ <li><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a>.</li>
  <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/">Progressive Web Apps: Everything You Need To Know</a></li>
  <li><a href="https://pwafire.org">Collection of resources, codelabs and tools you need to build PWAs by the team at pwafire.org</a></li>
  <li><a href="https://github.com/pwafire/pwadev-tips">Setting up your Progressive Web App Development environment</a></li>