プログレッシブウェブアプリ (PWA)

PWA community logoプログレッシブウェブアプリ (Progressive web apps, PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。プログレッシブウェブアプリは正式な標準ではありませんが、有用なデザインパターンです。 PWA は、特定のウェブ技術や技法の使用を含む、一連のアプリケーション属性を包含しているという点で AJAX や他の同様のパターンに似ていると考えることができます。この一連の文書では、これについて知るために必要なすべてをお伝えします。

ウェブアプリを PWA と呼ぶには、技術的に言えば、 安全なコンテキスト (HTTPS)、1 つ以上のサービスワーカーマニフェストファイルを持つべきです。

安全なコンテキスト (HTTPS)

このウェブアプリケーションは、安全なネットワーク上で提供しなければなりません。安全なサイトにすることは、良い習慣であるだけでなく、特にユーザーが安全な取引を行う必要がある場合には、ウェブアプリケーションを信頼できるサイトとして確立することにもつながります。位置情報やサービスワーカーなどの PWA に関連する機能のほとんどは、アプリが HTTPS を使用して読み込まれた場合にのみ利用できます。

サービスワーカー

サービスワーカーとは、ウェブブラウザーがネットワークのリクエストや資産のキャッシュに介入し、その方法を制御することができるスクリプトのことです。サービスワーカーを使用することで、ウェブ開発者は信頼できる高速なウェブページやオフライン操作を作成することができます。

マニフェストファイル

アプリがユーザーにどのように表示されるかを制御し、プログレッシブウェブアプリを確実に発見できるようにする JSON ファイルです。アプリの名前、開始 URL、アイコン、その他ウェブサイトをアプリのような形式に変換するために必要なすべての詳細が記述されています。

PWA の利点

PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、プログレッシブで、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、プログレッシブウェブアプリの利点をお読みください。

PWA の実装方法については、 PWA 開発者ガイドをお読みください。

ドキュメント

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

警告: ここから下は全て旧バージョンのままで、他のコンテンツの全面見直しに合わせて刷新していきます。

基本的な PWA のガイド

技術ガイド

ツール

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