Web/Progressive_web_apps を更新 (#1407)

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

4 files changed, 23 insertions, 115 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index c2b4efc414..bb4d6f9353 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -5245,7 +5245,7 @@
 /ja/docs/Web_Development/Historical_artifacts_to_avoid	/ja/docs/conflicting/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web_Development/Introduction_to_Web_development	/ja/docs/conflicting/Web/Guide/Introduction_to_Web_development
 /ja/docs/Web_Development/Mobile	/ja/docs/Web/Guide/Mobile
-/ja/docs/Web_Development/Mobile/Responsive_design	/ja/docs/conflicting/Web/Progressive_web_apps
+/ja/docs/Web_Development/Mobile/Responsive_design	/ja/docs/Web/Progressive_web_apps
 /ja/docs/Web_Development/Writing_forward-compatible_websites	/ja/docs/Web/Guide/Writing_forward-compatible_websites
 /ja/docs/Whitespace_in_the_DOM	/ja/docs/Web/API/Document_Object_Model/Whitespace
 /ja/docs/XForms:API_Reference	/ja/docs/XForms/API_Reference
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 0bc732a8d0..d717c7de3d 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -48702,14 +48702,6 @@
       "Potappo"
     ]
   },
-  "conflicting/Web/Progressive_web_apps": {
-    "modified": "2019-04-10T11:40:04.877Z",
-    "contributors": [
-      "Wind1808",
-      "dskmori",
-      "manji_black"
-    ]
-  },
   "conflicting/tools/Keyboard_shortcuts": {
     "modified": "2020-07-16T22:34:03.446Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/progressive_web_apps/index.html b/files/ja/conflicting/web/progressive_web_apps/index.html
deleted file mode 100644
index c0c8560dda..0000000000
--- a/files/ja/conflicting/web/progressive_web_apps/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: レスポンシブデザイン
-slug: conflicting/Web/Progressive_web_apps
-tags:
-  - Apps
-  - Mobile
-  - Responsive Design
-  - Web Development
-translation_of: Web/Progressive_web_apps
-translation_of_original: Web/Guide/Responsive_design
-original_slug: Web_Development/Mobile/Responsive_design
----
-<p>モバイル向けとデスクトップ向けの Web サイトの開発に対する <a href="/ja/docs/Web/Guide/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">別々のサイト</a> 手法に関連する問題に対する反応として、比較的新しい (実際は <a href="http://www.alistapart.com/articles/dao/">とても古い</a>) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a> で紹介され、<a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">レスポンシブ Web デザイン</a> として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。</p>
-
-<h2 id="長所">長所</h2>
-
-<p>最初は、モバイルサイトを作成するための手法として提案されたものではありませんでしたが、分離したモバイルサイトの代わりにレスポンシブデザインは最近、モバイル・フレンドリーに対する第一歩として多くの注目を浴び始めました。</p>
-
-<ol style="font-size: medium;">
- <li>デバイスごとに異なる Web サイトをメンテナンスする必要がなくなるため、時間と費用を削減できます。</li>
- <li>レスポンシブデザインは、1 つの URL だけで、すべてのデバイスのページを表示できます。</li>
- <li>モバイルとデスクトップの Web ページで 1 つの URL を使用しているため、ソーシャルシェアの統計 (Facebook の「いいね」、Twitter のツイート数、Google plus の +1) が分離されません。</li>
- <li>レスポンシブデザインはユーザーエージェントを気に掛ける必要がありません。</li>
-</ol>
-
-<p>この手法には本当に素晴らしい側面があります。ユーザーエージェント判別によらないため、サイトを分離する手法よりも柔軟性が高く、古くなりにくい点です。単純なサイトに対しては、他の選択肢よりも改修やメンテナンスが簡単です。</p>
-
-<h2 id="短所">短所</h2>
-
-<p>この手法に何も制限がないわけではありません。コンテンツがクライアント側の JavaScript で処理されるため、変更は最小限となることが推奨されます。一般に、同じ DOM を動作させるために、別々に 2 つの JavaScript を記述すると、劇的に悪化することも改善することもあります。これが、Web アプリケーションがこの手法に適応していない大きな理由です。</p>
-
-<p>もし <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">フレキシブルなレイアウト</a> に対応していなければ、既存のサイトをレスポンシブデザインにするには、スタイルシートも書き直す必要があります。これは不幸中の幸いと言えます。レイアウトをレスポンシブデザインに対応することは、CSS を近代化しきれいにする良い機会となるからです。</p>
-
-<p>最後に、スクリプトやスタイルのコードを追加するため、分離サイト手法よりもパフォーマンスが悪化するかもしれません。これに対する回避策はありません。スクリプトやスタイルコードをリファクタリングして、根気強くバイト数を削減するしかありません。</p>
-
-<h2 id="この選択肢を選ぶとき">この選択肢を選ぶとき</h2>
-
-<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>上述したように、コンテンツの変更は難しいため、この手法を取り扱うとき、複雑なコードを追加せずにユーザに対してモバイルデバイスで異なる体験を与えることはできません。つまり、デスクトップとモバイルのサイトがとても似ているのであれば、この手法は素晴らしい選択肢となります。文章中心でユースケースが複数のデバイスにまたがっているのサイトによく適しています。以下に示す例が、すべてブログやポートフォリオであることに気づくでしょう！</p>
-
-<h2 id="Examples" name="Examples" style="overflow: hidden;">用例</h2>
-
-<p>分離サイト手法ほどの人気はありませんが、日に日により多くの Web サイトがこの技術を採用し始めています。幸運にも、すべてのコードはクライアント側にあるため、この手法がサイトで技術的にどのように実装されているか見たければ、サイトを訪問して、“ページのソースを表示” をクリックしてください。</p>
-
-<ul>
- <li><a href="http://teixido.co/">http://teixido.co/</a> – 私のお気に入りのレスポンシブデザインです。画像が上にあります！</li>
- <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 読むのにおすすめの記事です。記事内のリンクも用例となっています。</li>
- <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
- <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li>
- <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
-</ul>
-
-<p>比較的若い手法であるにもかかわらず、既にいくつかベストプラクティスが現れています。例えば、サイトを一からデザインするのに、この選択肢を使おうと考えているなら、モバイルには初めから制約があるため、<a href="http://www.lukew.com/ff/entry.asp?1117">まず小さい画面で作成する</a> のがよいでしょう。また、メディアクエリで既存のサイトの要素を隠す代わりに、進歩した機能をスタイルに使用することもよいことです。この方法は、メディアクエリをサポートしてない古いブラウザで正しくレイアウトすることができます。この手法のメリットについての素晴らしいプレゼンテーションが <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">ここ</a> から利用できます。</p>
-
-<h2 id="モバイル_Web_開発手法">モバイル Web 開発手法</h2>
-
-<p>以下の記事は、モバイルプラットフォーム向け開発の背景や手法です。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Guide/Mobile/Mobile-friendliness">モバイルの親しみやすさとは？</a></li>
- <li><a href="/ja/docs/Web/Guide/Mobile/Separate_sites">別々のサイト</a></li>
- <li><a href="/ja/docs/Web/Guide/Mobile/A_hybrid_approach">ハイブリッドアプローチ</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
-</ul>
-
-<h2 id="関連文書">関連文書</h2>
-
-<ul>
- <li>追加リソース: <a href="/ja/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">レスポンシブ Web デザイン</a></li>
- <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li>
-</ul>
-
-<div class="originaldocinfo">
-<h3 id="元の文書">元の文書</h3>
-
-<p>Mozilla Webdev ブログの "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>" の記事として 2011 年 5 月 27 日に Jason Grlicky によって発行されました。</p>
-</div>
-
-<p> </p>
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>