プログレッシブウェブアプリ (PWA)
プログレッシブウェブアプリ (Progressive web apps, PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。プログレッシブウェブアプリは正式な標準ではありませんが、有用なデザインパターンです。 PWA は、特定のウェブ技術や技法の使用を含む、一連のアプリケーション属性を包含しているという点で AJAX や他の同様のパターンに似ていると考えることができます。この一連の文書では、これについて知るために必要なすべてをお伝えします。
ウェブアプリを PWA と呼ぶには、技術的に言えば、 安全なコンテキスト (HTTPS)、1 つ以上のサービスワーカー、マニフェストファイルを持つべきです。
- 安全なコンテキスト (HTTPS)
-
このウェブアプリケーションは、安全なネットワーク上で提供しなければなりません。安全なサイトにすることは、良い習慣であるだけでなく、特にユーザーが安全な取引を行う必要がある場合には、ウェブアプリケーションを信頼できるサイトとして確立することにもつながります。位置情報やサービスワーカーなどの PWA に関連する機能のほとんどは、アプリが HTTPS を使用して読み込まれた場合にのみ利用できます。
- サービスワーカー
-
サービスワーカーとは、ウェブブラウザーがネットワークのリクエストや資産のキャッシュに介入し、その方法を制御することができるスクリプトのことです。サービスワーカーを使用することで、ウェブ開発者は信頼できる高速なウェブページやオフライン操作を作成することができます。
- マニフェストファイル
-
アプリがユーザーにどのように表示されるかを制御し、プログレッシブウェブアプリを確実に発見できるようにする JSON ファイルです。アプリの名前、開始 URL、アイコン、その他ウェブサイトをアプリのような形式に変換するために必要なすべての詳細が記述されています。
PWA の利点
PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、プログレッシブで、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、プログレッシブウェブアプリの利点をお読みください。
PWA の実装方法については、 PWA 開発者ガイドをお読みください。
ドキュメント
<-- 以下のものは一時的な自動生成リストで、すぐに置き換えられます -->
警告: ここから下は全て旧バージョンのままで、他のコンテンツの全面見直しに合わせて刷新していきます。
基本的な PWA のガイド
以下のガイドは PWA を実装するのに必要なことを、単純な例を実行し、すべての部分がどのように動作するかを示します。
技術ガイド
- クライアント側ストレージ — ウェブストレージ, IndexedDB, サービスワーカーをいつ、どのように使うかを示すとても長いガイド。
- サービスワーカーの使用 — より詳しい Service Worker API のガイド。
- IndexedDB の使用 — IndexedDB の基礎、詳しく説明されている。
- Web Storage API の使用 — ウェブストレージ API はシンプルにできている。
- アプリケーションシェルアーキテクチャによるすばやいウェブアプリの読み込み — App Shell コーディングパターンを使用して、すばやく読み込まれるアプリの作成のガイド。
- Push API の使用 — Web Push API の背景にある要点を学ぶ。
- Notifications API の使用 — ウェブ通知の簡単な説明。
- レスポンシブデザインの構成要素 — モダンアプリレイアウトにとって重要なレスポンシブウェブデザインの基本を学ぶ。
- モバイルファースト — レスポンシブなアプリケーションを作る時によく、モバイルレイアウトを既定として作って、その上により広いレイアウトを作る意味がある。
- ホーム画面追加のためのガイド — アプリをホーム画面に追加 (A2HS) する利点を学ぶ。
ツール
- localForage — クライアントサイドのデータストレージを簡単に扱えるようにする素晴らしいシンプルな JavaScript ライブラリ、これは既定で IndexedDB を使用し、必要に応じて Web SQL/Web Storage にフォールバックする。
- ServiceWorkerWare — Service Worker の開発を簡単にする Express のようなマイクロフレームワーク。
- oghliner — テンプレートだけではなく、オフラインでウェブアプリケーションを Github Pages にデプロイするツール。
- sw-precache — 特定のリソースを事前にキャッシュする Service Worker のコードを生成する node のモジュール。
- workbox — 気持ち的には、より進んだキャッシングの手法と簡単なプリキャッシュを有する sw-precache の後継者。
- upup — あなたのサイトが常にあなたのユーザーのために存在するようにする小さなスクリプト。
- The service worker cookbook — 一連の素晴らしい Service Worker/プッシュレシピ、オフラインアプリケーションの実装方法を紹介しているが、より多くの機能を持っている。
- PWA VS Code extension - VS Code 環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。
- Progressive web apps on Google Developers
- Alex Russell による Progressive Web Apps: Escaping Tabs Without Losing Our Soul
- Progressive Web Apps Check List
- Google による The Lighthouse Tool
- Tools for building progressive web apps with Angular.
- Offline-capable Pokédex web site.
- Hacker News readers as Progressive Web Apps.
- Progressive Web Apps: Everything You Need To Know
- Collection of resources, codelabs and tools you need to build PWAs by the team at pwafire.org
- Setting up your Progressive Web App Development environment