PWA(ピーダブリューエー)とは、Webサイトをスマホのネイティブアプリのように使えるようにする技術のことです。正式には「Progressive Web Apps(プログレッシブ・ウェブ・アプリ)」といい、ホーム画面へのアイコン追加、オフラインでの動作、プッシュ通知など、これまでアプリでしかできなかった体験をWebサイトで実現します。
現実世界でいえば、「出張サービスもしてくれるお店」のようなものです。従来のWebサイトは「お店に行かないと受けられないサービス」でしたが、PWAはアイコンという「会員証」をホーム画面に置け、電波の届かない場所でもある程度サービスを受けられ、お知らせ(通知)も届けてくれます。お店(Web)とお抱えサービス(アプリ)の良いとこ取りです。
PWAでできること
- ホーム画面に追加
アプリストアを経由せず、サイトのアイコンをホーム画面に置いて、アプリのように起動できます。 - オフライン対応
一度表示したデータを端末に蓄えることで、通信がない場所でも動作できます。 - プッシュ通知
新着情報などのお知らせを、アプリのように通知できます。 - 高速な表示
データを先回りして蓄える仕組みにより、2回目以降の表示が速くなります。
ネイティブアプリとの違い
| 種類 | 特徴 | 導入方法 |
|---|---|---|
| PWA | Web技術で作られ、ブラウザ経由で動く。ストア審査不要で更新も即時。 | サイトを開いてホーム画面に追加 |
| ネイティブアプリ | 端末専用に作られ、端末機能をフル活用できる。開発はOSごとに必要。 | アプリストアからインストール |
PWAを支える技術
PWAの中核となるのが「サービスワーカー」という仕組みです。これはブラウザの裏側で動くプログラムで、通信の中継やデータの蓄積(キャッシュ)、プッシュ通知の受信などを担当します。これに、アプリとしての名前やアイコンを定義する「マニフェスト」ファイルを組み合わせることで、WebサイトがPWAとして振る舞えるようになります。
あわせて知っておきたい用語
- Webアプリ:
ブラウザで動くアプリ。PWAはこれを進化させたものです。 - ブラウザ(browser):
PWAの実行基盤。PWA対応の度合いはブラウザによって異なります。 - キャッシュ(cache):
データを一時的に蓄える仕組み。PWAのオフライン動作を支えます。 - JavaScript:
サービスワーカーを記述する言語。PWAの心臓部です。

コメント