PWA(Progressive Web Apps)って実際どんなサイト・アプリ?

PWA(Progressive Web Apps)の特徴や、PWAを構築する際に、実際に必要なものなど、PWAという単語は知っているけど、実際にどんなものかを知らない方向けて、PWAを解説します。

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