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 - VisualStudio コード環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。