More than 5 years have passed since last update.

PWAとは何かまとめる

Last updated at 2019-09-18Posted at 2019-09-10

概要

PWAを実装する上で必要となる基礎的な知識についてまとめました。
PWAについては他のブログや記事にもたくさんまとまっていると思うので、分かりづらい等あればそちらを見るのが良いかと思います。
また、何か間違っている等あればご指摘いただければと思います。

PWAとは

Progressive Web Appsの略で、ネイティブアプリのように提供可能なWebアプリのこと。
Googleのデベロッパーページには以下の3つの特徴があると書かれています。

Reliable
Fast
Engaging

Reliable

ネットワークの状態に依存しないようにすることでユーザに信頼できるexperienceを届けます。
例えばService Worker(JavaScriptで書かれたバックグラウンドで動作するproxyのようなもの)という機能がキャッシュの保持を行うことで、オフライン環境でもコンテンツを取得することが可能になります。

Fast

一度読み込んだものは高速に表示し、スムーズな描画とスクロールを可能にします。

Engaging

ネイティブアプリのように使用でき、没入感のあるexperienceを届けます。
具体的にはアプリストアを使わずにホームスクリーンにインストールして使用することができたり、Push通知を受信することができます。

まとめると

PWAは

ネットワーク状態に依存せず
高速に表示でき
ネイティブアプリのように使用できる

Webアプリのことです。
ただ上記のような特徴を持つといっても具体的にどういった機能やUXを提供できていればいいか、その要素はたくさんあります。
GoogleのデベロッパーページにPWAチェックリストがまとめられているので、困ったらここを見てみるのが良いかと思います。

PWAを構成する技術

PWAを構成する重要な技術として主に以下の2つがあると思っています。

Service Worker
Web App Manifest

Service Worker

先程も出てきましたが、Service Workerとはブラウザのバックグラウンドで動作するJavaScriptのProxyです。
このProxyが本当に色々な機能を提供してくれています。

Service Workerが担う役割

代表的なものとして以下の3つがあります。

キャッシュ
プッシュ通知
バックグラウンド同期

キャッシュ

その名の通り静的ファイルやAPIレスポンスの結果などをキャッシュすることができます。
これによりオフラインでの利用や、表示の高速化を可能にします。

プッシュ通知(Web Push)

こちらもその名の通りPCやスマートフォン上でWebアプリに対して通知を行うことができます。
細分化するとWeb PushはPush APIとNotifications APIによって実現されます。
Push APIはWebアプリがサーバから通知を受信するためのAPIで、Notifications APIは受信した通知をページ外部の画面に表示するAPIです。
ただし2019/09現在、Push APIやNotifications APIは利用できるブラウザが限られています。
詳しくは以下を参照してください。

参考

Web Push Notifications: Timely, Relevant, and Precise | Web Fundamentals
| Google Developers

バックグラウンド同期

Service Workerがバックグラウンドでキャッシュを更新したり、オフライン時に送れなかったリクエストをオンラインになったタイミングでリクエストしたりすることができます。
これによってリクエストによる待ち時間を減らし、UXを損なわずにアプリを提供できます。
ただし2019/09現在、こちらも対応ブラウザは限られています。