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

草案
このページは完成していません。

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

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

安全なコンテキスト (HTTPS)
このウェブアプリケーションは、安全なネットワーク上で提供しなければなりません。安全なサイトにすることは、良い習慣であるだけでなく、特にユーザーが安全な取引を行う必要がある場合には、ウェブアプリケーションを信頼できるサイトとして確立することにもつながります。位置情報やサービスワーカーなどの PWA に関連する機能のほとんどは、アプリが HTTPS を使用して読み込まれた場合にのみ利用できます。
サービスワーカー
サービスワーカーとは、ウェブブラウザーがネットワークのリクエストや資産のキャッシュに介入し、その方法を制御することができるスクリプトのことです。サービスワーカーを使用することで、ウェブ開発者は信頼できる高速なウェブページやオフライン操作を作成することができます。
マニフェストファイル
アプリがユーザーにどのように表示されるかを制御し、プログレッシブウェブアプリを確実に発見できるようにする JSON ファイルです。アプリの名前、開始 URL、アイコン、その他ウェブサイトをアプリのような形式に変換するために必要なすべての詳細が記述されています。

PWA の利点

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

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

ドキュメント

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

PWA をインストール可能にするには
この記事では、ウェブマニフェストとホーム画面に追加を使用して、PWA をインストール可能にする方法について説明しました。
サービスワーカーで PWA をオフラインで動作させる
この記事では、PWA をサービスワーカーとオフラインで連携させる方法について簡単に説明しました。 Service Worker API の背後にある概念と、それをより詳細に使用する方法についてもっと知りたい場合は、さらに詳しい資料をチェックしてください。
プログレッシブウェブアプリの利点
プログレッシブウェブアプリ(Progressive web apps、PWA)には、以下のセクションにリストされているすべての利点があります。
プログレッシブウェブアプリの構造
PWA の背後にある理論が分かったところで、推奨されるアプリの構造を見てみましょう。まず、 js13kPWA アプリの分析、それがなぜそのように構築されているのか、それがもたらす利点について説明します。
プログレッシブウェブアプリの紹介
この記事ではプログレッシブウェブアプリ (Progressive Web Apps) (PWA) を紹介し、それが何なのか、また普通のウェブアプリよりもどのような利点があるのかを説明します。
プログレッシブ読み込み
前回の記事では、js13kPWA の例をプログレッシブウェブアプリケーションにするのに役立つ API について説明しました — サービスワーカーウェブマニフェスト通知、およびプッシュです。 この記事では、リソースを徐々に読み込せて、アプリのパフォーマンスをさらに向上させます。
ホーム画面に追加
ホーム画面に追加 (または A2HS と略記) は最近のスマートフォンブラウザーで利用できる機能で、開発者は簡単かつ気軽に、お気に入りのウェブアプリケーション (またはウェブサイト) を表すショートカットを自分のホーム画面に追加することができるので、今後はこのショートカットを一回タップすればアクセスできるようになります。このガイドでは、 A2HS の使用方法と、ユーザーがこの機能を利用できるようにするために開発者として行う必要のあることについて説明します。
通知とプッシュを利用して 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/プッシュレシピ、オフラインアプリケーションの実装方法を紹介しているが、より多くの機能を持っている。
  • PWA VS Code extension - VisualStudio コード環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。