MENU

PWA — Webサイトをアプリ品質に押し上げる総称

PWA アイキャッチ
PWA

PWA(Progressive Web Apps)は、ブラウザで動く通常のWebサイトに、オフライン動作・ホーム画面追加・プッシュ通知といったネイティブアプリ並みの体験を後付けする実装スタイルの総称です。2015年にGoogle Chromeのエンジニアだったアレックス・ラッセル氏とデザイナーのフランシス・ベリマン氏が同名のブログ記事で提唱しました。Service Worker・Web App Manifest・HTTPSという3つの技術要件を満たすことで、App Storeを介さずインストール可能なアプリを配布できる点が特徴です。Twitter Lite、Starbucks、日経電子版などが採用事例として知られています。

目次

この記事の目次

  1. PWAを支える3つの柱
  2. 2015年提唱から現在までの歩み
  3. 通信が弱い環境への投入
  4. ネイティブアプリとの違い
  5. まとめ

PWAを支える3つの柱

PWAを支える3つの柱

PWAという概念は単体の新しいAPIではなく、既存のブラウザ機能を組み合わせて成立する「実装パターン」です。支える柱は3つに整理されます。1つ目はService Workerで、ブラウザとネットワークの間に常駐するスクリプトとしてリクエストを横取りし、キャッシュ済みのHTMLや画像を返すことでオフライン時にも画面を描画します。2つ目はWeb App Manifestと呼ばれるJSONファイルで、アプリ名・アイコン・起動URL・テーマ色を宣言し、ホーム画面に追加した際に独立ウィンドウで開く挙動を実現します。

3つ目の柱はHTTPSによる通信保護で、Service Workerは平文HTTPサイトでは動作しないようブラウザ側で制限されています。この縛りによって中間者攻撃でキャッシュやプッシュ通知を改ざんされるリスクを避けています。これら3要素に加え、Push API・Background Sync・Web Share・File System Access APIなどを組み合わせると、カメラ起動や端末ストレージへの読み書きまでブラウザだけで実現できます。Lighthouseという計測ツールでPWA要件の達成度を点数化できる点も普及を後押ししました。

2015年提唱から現在までの歩み

2015年提唱から現在までの歩み

PWAという言葉は2015年6月、ChromeのフレームワークチームでTC39委員も務めていたアレックス・ラッセル氏と、デザイナーのフランシス・ベリマン氏が共著のブログ記事「Progressive Web Apps: Escaping Tabs Without Losing Our Soul」で初めて使いました。Service Worker仕様自体はそれ以前から策定が進んでおり、Chrome 40で2015年初頭に搭載済みだったため、概念と技術が同時に揃ったタイミングで「PWA」というブランド名が定着していきました。

2017年にはTwitterが新興国の通信環境を意識したTwitter Liteを公開し、PWAの代表的成功例として広く紹介されました。Microsoftは2018年にWindowsストアへPWAを取り込み、AppleもiOS 11.3で限定的なService Worker対応を行いました。その後Edge・Samsung Internetなど主要ブラウザがインストールUIを揃え、2020年代に入るとStarbucks、Pinterest、Spotify Web Playerなどの大規模採用が一般的になり、「Webサイトでもインストールできる」感覚が当たり前のものとして浸透していきました。

通信が弱い環境への投入

通信が弱い環境への投入

PWAが活躍するのは、ネイティブアプリの開発・配布コストを払いたくないが、通常のWebサイトでは体験が物足りない領域です。代表例はインドや東南アジアといったモバイル回線が不安定な地域での情報配信で、Twitter Liteや日経電子版は数百KBで起動できる軽量版PWAを用意し、オフラインでも直近の記事を読めるようにしてリテンションを高めました。

出張先や移動中の地下鉄でも記事を読みたい、というメディア用途や、店舗在庫を倉庫で確認するような社内ツールでも、ストア審査を経ずに即座にアップデートを配れる点が好まれます。プッシュ通知でユーザーを再訪させる動線を作れるためECサイトでも採用が広がり、AlibabaやLancômeなどがコンバージョン改善事例として公表しています。「ネイティブほど深い機能は不要だが、ブックマーク以上の存在感がほしい」局面で第一候補になる技術です。

ネイティブアプリとの違い

ネイティブアプリとの違い

ネイティブアプリはSwiftやKotlinといったOS固有言語で書かれ、CPU・GPU・センサー類への深いアクセスや、App Store・Google Play経由の課金や配信に最適化されています。一方でストア審査に数日かかり、OSごとに別コードを書く必要があるため開発コストは高く、毎回ユーザーにアップデートをダウンロードしてもらう必要があります。

PWAは1つのコードベースでiOS・Android・Windows・macOSをまたいで動き、URLで共有するだけで起動できる軽さが武器です。ストア審査を介さずサーバー側のデプロイで即時反映できるため、A/Bテストや緊急修正の回転が速い点も評価されています。Bluetooth深部やHealthKitのような端末APIには届かないため、ゲームや健康管理アプリには不向きですが、ニュース・EC・社内業務系では「PWAで十分」と判断する企業が増え、両者は競合ではなく住み分けの関係に落ち着いています。

まとめ

PWAは2015年に提唱され、Service Worker・Manifest・HTTPSを核にWebサイトをアプリ並みに昇格させる実装スタイルです。Twitterや日経電子版のような大規模採用例を通じ、ストア配布の重さを避けたい現場で広く根付きました。ネイティブアプリと棲み分けながら、Webの軽さを保ったままアプリ体験を届ける選択肢として定着しています。

※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次