17章PWAを学ぶ

これまで学んできたことにより、ブラウザ上でJavaScriptを使用してインターネット上のリソースを取得するだけでなく、デバイスに組み込まれた多様なセンサーからもデータを読み取り、それらのリソースやデータをローカルのストレージに保存して、リッチなグラフィックスを描画できるようになりました。つまり機能的にはネイティブアプリとほぼ遜色のないアプリケーションをWeb技術だけで実現する土台がすでに整っています。

そのようなネイティブアプリと同様の機能をWebアプリとしての特徴を損なうことなく提供するための設計指針が本章で紹介するプログレッシブWebアプリ(Progressive Web Apps、PWA)です。PWAは明確に定義された用語ではありませんが、おおむね次のような機能を実現したWebアプリのことを指します。

  • 利用できるブラウザの機能に応じてアプリケーションの機能が漸近的ぜんきんてき(progressive)に変化する
  • URIを使用してアクセスできる
  • ネットワークに接続されていない状態でも動作する
  • プラットフォームにインストールし、ブラウザを経由せずにホームスクリーンから直接起動できる
  • サーバからのPush通知を受け取り、エンゲージメントを高められる

前半の2つがWebアプリとしての機能、後半の3つがかつてはネイティブアプリでなければ実現が難しいとされてきた機能です。

先ほどPWAは明確に定義された用語ではないと説明しました。定義がないのであればなぜそのような用語が導入され、しかも広く利用されているのでしょうか? その答えはPWAがWebアプリケーションの「目指す場所」ではなく「目指す方向」だからです。

たとえばPWAという言葉がなかったとしましょう。そうすると、同様なものを実現するために開発チーム内で話し合おうとしても「インストールできてオフラインでも動作する、だいたいネイティブアプリのような動作をするWebアプリ」のような冗長な言い方をするしかありません。もちろん毎回そのような言い方を続けられるわけはなく、いずれチーム内で何か用語が用意されるでしょう。しかしその用語がチーム内で閉じたものである限り、その概念がチーム外に広がることはありません。概念を共有し、皆でそこに向かうには共通の語彙が必要です。 ...

Get ハンズオンJavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.