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

PWA の利点

PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、進歩的で、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、進歩的ウェブアプリの利点をお読みください。 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/プッシュレシピ、オフラインアプリケーションの実装方法を紹介しているが、より多くの機能を持っている。

 

関連情報

ドキュメントのタグと貢献者

このページの貢献者: k-kuwahara, mfuji09, Uemmra3
最終更新者: k-kuwahara,