（2024 年 4 月更新）
PWA の概念が提唱されたのは 2015 年で、発表自体から 10 年が経とうとしています。iOS が肝心なプッシュなどに対応しないままだったので、日本国内では「PWA は流行らない」と言われてきました。
しかし iOS 16.4 からようやく Safari でもプッシュ通知が届くようになり、2024 年 2 月に Apple が「EU で PWA サポートを廃止」と発表して話題を集めたものの、多くの批判にさらされたせいか廃止の撤回を発表するにいたりました。
今後も目が離せない PWAですが、注目が高まっているタイミングということもあり「PWA とは？」という入門記事として、メリット・デメリット、成功事例や課題点などを改めて整理していきます。
できることとできないことの詳細、ネイティブアプリや通常の Web との比較表は下記の記事をご覧ください。
1. PWA (Progressive Web Apps) とは？
PWA とは、Google が提案する概念で、Web ブラウザ上でネイティブ（スマホ）アプリのようなユーザー体験を提供する高機能な Web アプリです。
以下に PWAが提供できる機能をまとめます。2024 年現在では iOS/Android でも対応が異なるので、それぞれの詳しい内容については後述します。
- スマートフォン・PC・タブレットすべてでインストールでき、スマホのホーム画面や PC のデスクトップにアイコンを設置するとワンタップで起動できるようになる
- Web なので、Google 検索やリンク共有によりインストールが不要で全ページを見ることができる
- スマートフォンにインストール後、かつホーム画面から開いた場合、アドレスバーが表示されずにネイティブアプリ内のブラウザ（WebView）のように見せることができる
- PWA をバックグラウンドに移動した状態、閉じた状態でもプッシュ通知を配信できる
- オフラインでも利用できる
- キャッシュが効くので読み込みが速い
※Chrome ブラウザのアドレスバーが表示されていることから分かるように、どちらも Web として公開されています
※この表記になるのは Android のみです（2024 年 4 月現在）
1-1. 通常の Web アプリとの違い
MDN Web Docs によると、PWA とは特定の技術のことを示しているわけではなく、「Web アプリケーションを構築するための新しい哲学」と表現しています。
その「新しい哲学」を実現する手段として、HTTPS 対応の上で「サービスワーカー」と「ウェブアプリマニフェスト」の設置が必要になります。
1-2. Service Worker (サービスワーカー)
Service Worker は、メインのブラウザスレッドの外側で実行される特殊な JavaScript ファイルです。
Service Worker により PWA ができるようになること
- 許諾が必要ですが、 Web ブラウザを立ち上げていない状態でもプッシュ通知を送ることが可能
- バックグラウンドでの同期（オンラインになった時点で自動処理）が可能に
- 一度読み込んだ Web をキャッシュするので、一部をオフライン状態でも利用できるようになる上に、読み込みが高速になる
出典：Service Worker について (web.dev)
1-3. Web app manifest (ウェブアプリマニフェスト)
ウェブアプリマニフェストとは、PWA の動作をブラウザに伝える JSONファイルです。
具体的な動作としては、ウェブアプリマニフェストに書かれている JSON ファイルを読み取ることで、アプリストアを通さずに端末のホーム画面にアプリのアイコンを設置≒インストールすることができます。
JSONファイルの中身は、ホーム画面に追加したときのアイコンやアプリの名前、スプラッシュ画像などをリストとして指定できます。
2. PWA のメリットとデメリット
PWA のメリット(1) ネイティブアプリに比べて安価
PWAはネイティブアプリ開発と比較した際、開発費用を安価に抑えられる点がメリットです。
通常、ネイティブアプリ開発を行う場合は iOS/Android と、それぞれに対応したアプリを開発する必要があるため、工数分の費用がかかります。
一方、PWAは Web アプリなので、開発費用およびリリース後の保守運用費用を安くおさえることができます。
しかし近年では、flutter など iOS/Android 両方のネイティブアプリを開発できるクロスプラットフォーム技術もあるので、PWA（Web）独自のメリットではなくなっています。
関連記事
PWA のメリット(2) Webとして集客＋アプリとしてリピート促進の両方ができる
PWA は、通常の Web アプリをネイティブアプリと同じ感覚で使えるようにするための仕組みです。
広く集客できる Web でありながらプッシュ通知やバックグラウンド同期・オフライン利用など、ネイティブアプリ同様の機能を使うことができます。
検索エンジンでヒットし、URL を叩けば誰でも閲覧できるため、新規集客からプッシュ通知でのリピート促進までワンストップで対応可能です。
- 「Clipchamp」は標準のデスクトップアプリと比較して PWA のユーザー維持率が 9% 向上した
- Corel Corporation の「Gravit Designer」は、PWA ユーザーのアクティブ度が 24%、リピートユーザー数が 31% 増加
出典：プログレッシブ ウェブアプリ 導入によるメリット（web.dev）
PWA のメリット(3) 通常の Web よりもユーザー体験が良くなる
ServiceWorker によってキャッシュが効き、オフライン利用もできるので、UX（User Experience）が向上します。
「Web やアプリの動作が速くなるとコンバージョン率が上がる」「ページの読み込みに時間がかかると離脱率が上がる」というデータは昔から何度も提示されてきているように、読み込みが早くなることは非常に重要です。
PWA のメリット(4) クロスプラットフォーム運用
PWA＝スマホというイメージはありますが、PC でも使える Web アプリなので、パソコンから起動してインストールした後に、デスクトップアプリとしても利用可能です。
発案者の Google 側もPC・タブレット・スマートフフォンすべてのデバイス/ブラウザで快適に利用できるユニバーサル展開を推奨しています。
パソコンから利用の場合も、通知を受け取るかを顧客に訴求することができます。
PWA のデメリット(1) iOS という不安要素を抱えながら PWA だけで完結できるか？という疑問
メリットとデメリットは、表裏一体です。
理論上は
- 新規集客用の Web サイト
- パソコン用の Webアプリ
- スマートフォンのネイティブアプリ
という三つの役割ができますが、果たして本当に PWA 一つでデジタル基盤が完結するか？という疑問は残ります。
不安要素はいくつかあるのですが、最大の不安要素は「基本的に乗り気ではない」とも感じる Apple の対応です。
プッシュ通知とバックグラウンド同期に 5 年以上も対応しないままだったことや、EU のデジタル市場法に準ずるために PWAのサポートを廃止するという発表をした過去は不安要素です。 ※翌月には撤回されました。
マーケティング・データアナリティクス企業の Kantar 社によると、2023 年 12 月の iPhone と Android のユーザー数は以下の通りです。
| 国 | Android | iOS |
|---|---|---|
| 日本 | 51.7% | 47.7% |
| アメリカ | 43.4% | 55.7% |
| 中国 | 56.8% | 25.3% |
| フランス | 65.6% | 34.3% |
| スペイン | 76.6% | 22.6% |
世界的に見ても、iPhone ユーザー比率が高い国であるため、PWA の iOS 対応を疎かにすることはできません。
データ出典：Android vs. iOS
PWA のデメリット( 2 ) 開発費用問題
プッシュ通知やアイコン化など Web アプリを PWA として機能させるための開発が必要なため、通常の Web サイト・Web アプリでの運用よりは開発費用・運用費用が高くなります。
また、ネイティブアプリと比較すると開発費は抑えられますが、上記のように PWA だけで完結せずにネイティブアプリも並行して開発する場合は結局コストが高くなってしまいます。
PWA のデメリット( 3 ) 分析が弱い
PWA は、ネイティブアプリのように Firebase Analytics でユーザー行動を計測できるわけではないので、Google Analytics で分析することになります。
インストール（ホーム画面への追加）数、ホーム画面から起動したセッション数を追跡するにはカスタム開発が必要になります。
参考：Tracking PWA events with Google Analytics
また比較すると、ネイティブアプリのほうがさまざまな SDK を利用してユーザーの細かい行動ログを計測できます。一人のユーザーとして追跡しやすいという点も大きいです。
3. PWA でできること・できないこと
各機能の詳細と、Web・ネイティブアプリとの比較表は以下の記事でより詳しく解説しています。こちらでは各項目について概要をご紹介します。
関連記事
プッシュ通知の送信（iOS は今後に注目）
PWA（Service Worker をアクティブにした Web アプリ）では Push API/Notification API を使ってプッシュ通知を配信できます。Web アプリなので、Firebase・OneSignal などが使えます。
2023 年 3 月に iOS16.4 がリリースされたことにより、Apple 社が提供する OS アップデート可能な iOS と iPad OS でプッシュ通知が受け取れるようになりました。
ただし、iOS16.4 では「端末に PWA をインストール（ホーム画面に追加）済の場合のみ」配信可能で、下記のように Android に比べてインストールの誘導が難しい点が懸念されます。
ホーム画面に追加（iOS はまだ制約が多い）
通常の Web サイトでも、ブラウザアプリから「ホーム画面に追加」することでショートカットアイコンを作成し、ワンタップで該当の Web サイトに飛ぶことができます。
Android ではタップした際にインストールの許諾を取るリンクも作成でき、さまざまなパターンで「インストールしてホーム画面にアイコンを追加する」ためのバナーを出すことができます。
出典：PWA のインストールを促すためのパターン (web.dev)
一方、iOS 端末ではブラウザのメニューからのみで、文言も「ホーム画面に追加」となります。
↑ の Android のように切り替わりません
ホーム画面のアイコンから PWA を起動した際はブラウザのアドレスバーが出ないので、ネイティブアプリのアプリ内ブラウザ（WebView機能）で読み込んでいるような UI になります。 ※ブラウザアプリで URL を直打ちするとアドレスバーが出たままです
PWA では Service Worker によりキャッシュできる上に、ホーム画面からの起動時に上記のような UI になることから「インストール」という表現が使われます。
オフライン利用
Service Worker から Cache Storage API を介してネットワークのリクエストをキャッシュに残せるため、オフラインでもページを閲覧できます。PWA は全世界に Android ユーザーを持つ Google が主導する哲学のため、電波が悪い環境が多い地域で強みになります。
また、キャッシュが残るということは次回以降のページ読み込みが高速化できるということでもあります。
バックグラウンド同期（iOS はまだ）
オフライン時に操作した内容を、ネットワーク接続されたタイミングで同期する機能です。これによってリクエストによる待ち時間を減らし、ユーザーにストレスを与えずにアプリを提供することができます。
Android Chromeの最新バージョン（2024 年 4 月現在は 123）ではバックグランド同期がサポートされていますが、iOS の Safari ではまだ制限されています。
4. PWA の活用事例
PWA を導入することで成果を上げた事例は国内外で複数あります。PWA は Google によって提唱された哲学なので、Google が多くの事例を紹介しています。
楽天 24
楽天 24 は、日本の最大手 e コマース企業の一つである楽天が提供するオンラインショップです。 食料品、医薬品、医療用品、調理器具など、さまざまな日用品を取り揃えています。 なんでも購入できる楽天市場とは異なり、日用品や医療品などを大量に一度で購入する際に利用する方法がおすすめです。
楽天 24は、PWA 化したことで、以下のような成果をあげました。
- 他のウェブユーザーと比較して 1 ユーザーあたりのアクセス頻度が 310% 増加
- 1 か月間の訪問者維持率は、以前のモバイルウェブでのフローと比較して 450% 増加
- 顧客あたりの売上は 150% 増加、コンバージョン率は 200% 増加
出典：楽天 24 は PWA への投資によりユーザー維持率を 450% 向上
Gravit Designer
カナダが本社の Corel Corporation が提供するデザインソフトです。
Gravit Designerは、PWA 化によりファイルの読み込み時などのパフォーマンスの改善を行いました。
PWA ユーザーは、その他のプラットフォームを利用したユーザーと比較した際、アクティブ度は 24% 増加し、リピートユーザー数は 31% 増加、有料版の Gravit Designer PRO を購入する可能性は 2.5 倍になりました。
出典：PWA ユーザーが Gravit Designer PRO を購入する可能性は 2.5 倍
MishiPay
MishiPayは、イギリスのロンドンを拠点としたテクノロジー企業です。
スキャン＆ゴー・テクノロジーを使えば、買い物客はレジに並ぶことなく、自分の携帯電話で商品のバーコードをスキャンして支払いを済ませ、そのまま店を出ることができます。近年では日本でも類似サービスが出てきましたが、どちらかといえばアーリーアダプター層（最新商品やサービスを積極的に利用する人々）に好まれるサービスです。
当初は iOS/Android アプリのみリリースされていましたが、インストールの障壁がありユーザー数が増えていませんでした。PWA に切り替えることで、アプリをインストール手間を省くことができ、取引件数が 10 倍に増加しました。
出典： MishiPay's PWA increases transactions 10 times and saves 2.5 years of queuing
日本経済新聞
140 年以上の歴史を持つ日本経済新聞は、国内ではかなり早い時期といえる 2017 年 11 月に PWAをリリースしました。
PWA を導入することにより、以下のような成果を得ることができました。
- アプリが操作できるようになるまでの時間が 14 秒短縮
- 読み込み速度が 75% 改善される
- コンバージョン（サブスクリプション登録）が 58% 増加
- 1日のアクティブ ユーザー数が 49% 増加
出典：日経がマルチページ PWA で新たな品質とパフォーマンスを実現
Suumo
日本大手の大手不動産サイト、 Suumoは毎月 1,400 万人のユニーク ユーザーが新築住宅を検索しています。 多くのユーザーはスマートフォンで検索しており、 PWAを活用しアプリのようなスムーズな動きをする体験を提供することで、ユーザーは探している物件を簡単に見つけられるようになりました。
主に改善されたのは、読み込み時間が 75% 短縮したことと、 Android のモバイルウェブ ユーザー向けにプッシュ通知を実装し、プッシュ開封率 31％を達成しました。 プッシュ通知の開封率についてですが、海外サービスの Pushwoosh の調査では 1〜5% となっています。この数字と比較すると Suumoは非常に高い開封率かと思います。
出典：Suumo
5.まとめ
2015年に PWAという言葉が生まれ、日本国内でも 2018年から日経電子版にて Webパフォーマンスの改善に取り入れられるなどして注目をしてきました。
PWAは、ネイティブアプリ開発と比較した際、費用を安価に抑えられることや、 Webの良い面である新規顧客集客の高さ、ネイティブアプリのようにプッシュ通知を通してリピーター獲得にも役立つことが可能です。アプリの高速化にも役立っていることもあり、多くのメリットを得ることができます。
今や、「Web かアプリか」という二択で事業を考える時代ではありません。 “アプリに近いことができる” システムが増え、それぞれ自社の業態や事業規模などによって適切なものが異なります。当然、複数のプラットフォームでアカウントを同時運用することも求められます。それぞれの開発方法や知識について最適な方法を知ることが重要です。
BackApp では、スマートフォンアプリ黎明期からの開発実績をもとに、さまざまな業種の企業様に “型” を外さないアプリを提供できます。 事業規模に応じてパッケージ提供からスクラッチ開発まで幅広くご相談を承りますので、アプリの新規開発・リニューアルともにお気軽にご相談ください。 アプリは運用開始からが本番ということを熟知しておりますので、アプリの企画・設計から運用サポートまで伴走させていただきます。
- 「自社アプリを考えているが、初期投資を抑えてまずは試してみたい」
- 「LINE からの PUSH 配信で顧客と継続的に接点は作れているが、費用対効果が見合わなくなってきた」
- 「安すぎるシステムだと動作速度や拡張性などが不安」
といったお悩みを抱えている企業様に向けて、ノーコードでアプリを開発するサービス「PASTA」を展開しています。