プログレッシブウェブアプリ

プログレッシブウェブアプリ (Progressive web apps) (PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションを作成します。これらのアプリはどこでも動作し、ネイティブアプリと同様の使い勝手を提供する様々な機能を提供します。この一連の文書では、これについて知るために必要なすべてをお伝えします。

progressive web apps community PWA logo

PWA の利点

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

Google は PWA がとても効果的であることを理解するための便利な略語を提供しています。 FIRE – Fast (高速), Integrated (統合), Reliable (信頼), Engaging (エンゲージ) の略です。

PWA を実装する方法を探すのであれば、以下の節に挙げられたガイドを参照して下さい。

基本的な PWA のガイド

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

  1. プログレッシブウェブアプリの紹介
  2. プログレッシブウェブアプリの構造
  3. サービスワーカーで PWA をオフラインで動作するようにする
  4. PWA をインストール可能にする方法
  5. 通知とプッシュ通知を使用して PWA を再エンゲージ可能にする方法
  6. プログレッシブ読み込み

技術ガイド

ツール

  • 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/プッシュレシピ、オフラインアプリケーションの実装方法を紹介しているが、より多くの機能を持っている。

関連情報