PWA（Progressive Web Apps）って実際どんなサイト・アプリ？

PWAとは？

PWA（Progressive Web Appsとは）は、インストール不要な、ブラウザで動く、ネイティブアプリのようなWebアプリの総称です。

どんなWebサイトがPWAなのか？

PWAは、「ネイティブアプリのようなWebアプリ」という概念で、「ある一定のフォーマットに沿ったものをPWAとする」という類のものではありません。

PWAの特徴は、

• 高速＆高信頼性
• インストール可能
• レスポンシブ（モバイル＆デスクトップ）

であることとされています。

出展：はじめてのプログレッシブウェブアプリ

PWAに実際に必要なもの

PWAを構築するに当たって実際に必要なものは、

• ブラウザでもインストール（ホームに追加）しても動くこと
• ウェブアプリマニフェスト（manifest.json）が設定されていること
• Service Workerが実装されていること
• キャッシュを利用してオフラインでも動作すること

という点が挙げられます。

ウェブアプリマニフェスト（manifest.json）

Webアプリの名称や、アイコン、テーマカラーなどの「Webアプリの設定」を宣言するファイルです。

ChromeやSafariなどのモダンブラウザは、端末にWebアプリを追加する（モバイルの場合は「ホーム画面に追加する」）際に、この設定を元に、アイコンの画像やタイトルを決定します。

Service Worker

Service Workerは、Webサイトの挙動とは別に、バックエンドで動作するJavascriptで書かれたプログラムのことです。

一般的なJavascriptは、HTMLドキュメントの中に埋め込んで、「ページ内をクリックする」「ページをスクロールする」「ページを戻る」などのブラウザの挙動と共に動作します。

一方で、Service Workerは、同じJavascriptでもブラウザの挙動とは全く別のライフサイクルで動作するため、ユーザーがページを閲覧する前や閲覧している最中に、ページの動作には関係なく、Webアプリを補助するスクリプトを走らせることができるのです。

こうした特徴から、Service Workerはデータの取得やプッシュ通知、Webアプリのプリキャッシュなどを担うことができます。

出展：Service Worker とは

PWAとは新しいWebアプリのガイドライン

manifest.jsonがあるから、Vue.jsなどのSPAフレームワークを利用しているから、という条件で決まるものでないため、現段階では「こういう感じのアプリをPWAと呼ぶよ」というガイドラインのようなものです。

2017年に発表されたばかりの新しい技術なので、これから新しい機能が追加されたり、定義が変わったりしていくでしょう。