path: root/files/ja/web/progressive_web_apps/index.html

---
title: プログレッシブウェブアプリ (PWA)
slug: Web/Progressive_web_apps
tags:
  - App
  - Application
  - 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="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>

<dl>
 <dt><a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> ({{Glossary("HTTPS")}})</dt>
 <dd>このウェブアプリケーションは、安全なネットワーク上で提供しなければなりません。安全なサイトにすることは、良い習慣であるだけでなく、特にユーザーが安全な取引を行う必要がある場合には、ウェブアプリケーションを信頼できるサイトとして確立することにもつながります。位置情報やサービスワーカーなどの PWA に関連する機能のほとんどは、アプリが HTTPS を使用して読み込まれた場合にのみ利用できます。</dd>
 <dt><a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a></dt>
 <dd>サービスワーカーとは、ウェブブラウザーがネットワークのリクエストや資産のキャッシュに介入し、その方法を制御することができるスクリプトのことです。サービスワーカーを使用することで、ウェブ開発者は信頼できる高速なウェブページやオフライン操作を作成することができます。</dd>
 <dt><a href="/ja/docs/Web/Manifest">マニフェストファイル</a></dt>
 <dd>アプリがユーザーにどのように表示されるかを制御し、プログレッシブウェブアプリを確実に発見できるようにする {{Glossary("JSON")}} ファイルです。アプリの名前、開始 URL、アイコン、その他ウェブサイトをアプリのような形式に変換するために必要なすべての詳細が記述されています。</dd>
</dl>

<h2 id="PWA_advantages">PWA の利点</h2>

<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">ドキュメント</h2>

<p><strong>&lt;-- 以下のものは一時的な自動生成リストで、すぐに置き換えられます --&gt;</strong></p>

<p>{{LandingPageListSubpages}}</p>

<div class="notecard warning">
<p><strong>ここから下は全て旧バージョンのままで、他のコンテンツの全面見直しに合わせて刷新していきます。</strong></p>
</div>

<h2 id="Core_PWA_guides">基本的な PWA のガイド</h2>

<p>以下のガイドは PWA を実装するのに必要なことを、単純な例を実行し、すべての部分がどのように動作するかを示します。</p>

<ol>
 <li><a href="/ja/docs/Web/Progressive_web_apps/Introduction">プログレッシブウェブアプリの紹介</a></li>
 <li><a href="/ja/docs/Web/Progressive_web_apps/App_structure">プログレッシブウェブアプリの構造</a></li>
 <li><a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">サービスワーカーで PWA をオフラインで動作するようにする</a></li>
 <li><a href="/ja/docs/Web/Progressive_web_apps/Installable_PWAs">PWA をインストール可能にする方法</a></li>
 <li><a href="/ja/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">通知とプッシュ通知を使用して PWA を再エンゲージ可能にする方法</a></li>
 <li><a href="/ja/docs/Web/Progressive_web_apps/Loading">プログレッシブ読み込み</a></li>
</ol>

<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/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">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>

<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>
 <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — Service Worker の開発を簡単にする Express のようなマイクロフレームワーク。</li>
 <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — テンプレートだけではなく、オフラインでウェブアプリケーションを Github Pages にデプロイするツール。</li>
 <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — 特定のリソースを事前にキャッシュする Service Worker のコードを生成する node のモジュール。</li>
 <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> - VS Code 環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。</li>
</ul>

<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://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>
</ul>

<div>{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/")}}</div>