PWA（Progressive Web Apps）とは？機能や導入事例を紹介【2024年最新版】

利便性や機能の多様性から、Webサービスはダウンロード型のアプリケーションに比べて使用感に劣ると言われることも。しかし、近年はPWAという形態のWebサービスも登場しており、ブラウザ経由でより便利なサービスを提供できるとして注目されています。この記事ではPWAの機能や、実際の導入事例についてご紹介します。

【関連ページ】
アプリ開発にかかる費用・相場感や、あなたの目的別にアプリ開発会社をお探しいただけます。
アプリ開発の費用・相場
アプリ開発ができる会社一覧

PWAはProgressive Web Appsの略称で、Webブラウザから利用するサービスと、ダウンロードして利用するネイティブアプリの中間のような性能を備えたアプリケーションです。Webブラウザ経由でアプリを利用する場合、インターネット回線やブラウザの性能などにパフォーマンスが依存するため、ネイティブアプリと比べてその品質は低いと考えられてきました。PWAはWebアプリの一種ですが、従来のWebアプリの弱点をある程度克服しつつも、Webから気軽に利用できるのが特徴です。

PWAが注目されるようになった背景として、スマホの普及と多様化が挙げられます。ネイティブアプリを開発する場合、それぞれのOSに合わせて別途アプリを開発しなければならず、リリースにはコストも時間もかかってしまうことが多いです。しかしWebアプリであれば、OSに依存することなくサービスを利用できるため、PWAの登場によって今後さらなるWebサービスの活性化が期待されています。

Webデベロッパー向けの情報サイトである「Web.dev」では、Googleの推奨するPWA導入の際の「基本的かつ最適なチェックリスト」を紹介しています。主なポイントとしては、

・高速な起動と速度の維持
・ブラウザを問わない動作
・オフラインで利用できる
・必要に応じてインストールできる

などの点が挙げられます。Webアプリとはいえ、ネイティブアプリのように利用できるユーザビリティを確保することが望ましいといえます。

出典：Google Developers「優れたプログレッシブ Web アプリとは？」（ https://web.dev/pwa-checklist/ ）

PWAの機能としては、主に以下のようなものが挙げられます。ネイティブアプリとWebアプリを足したような機能を備えています。

PWAは、スマホのホーム画面にアイコンを設置し、タップすることで直接サイトへ訪問できる点が特徴です。従来のWebサービスの場合、ブラウザアプリから遷移する必要がありましたが、PWAはネイティブアプリと同様の遷移が可能なため、ユーザビリティに優れています。頻繁に利用するサービスの場合は非常に便利な機能です。

PWAはキャッシュ機能を使うこともできます。キャッシュ機能は、ユーザーの利用状況をブラウザ上に記録することで、会員情報やゲームのセーブなどを行えるというものです。また、キャッシュ機能はオフライン環境でも利用状況を保存できるよう促すので、Webアプリのオフライン利用においても効果を発揮します。

プッシュ通知は、スマホユーザーへ独自に通知を送るための機能です。ネイティブアプリでは一般的なプッシュ通知ですが、PWAもWebサービスではあるものの、ネイティブアプリ同様の通知を送ることができます。運営側の任意のタイミングで、お得なキャンペーン情報やサービスの利用を促すメッセージを直接ユーザーへ送信することが可能です。

検索エンジンからのサイト流入は、PWAならではの強みです。ネイティブアプリの場合、Webサービスと比べて頻繁に利用してもらえる機能性を備えているものの、一度アンインストールされてしまうとユーザーとの関係は断たれてしまいます。しかしPWAであれば検索エンジンからリーチができるので、Web検索流入という形で新規ユーザーや休眠ユーザーと接点を持つことが可能です。

なお、アプリ開発を外注するにあたって「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるアプリ開発会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

PWAの導入は、上記の機能性を活かした多様なメリットが期待できます。

PWAは、通常のWebサイトよりもスマホへの最適化が進んでいるため、表示速度に優れます。表示速度の高速化を支えているのがキャッシュ機能で、ユーザーデバイスに一度訪問したサイト情報を保存しておくことで、次回訪問時に前回訪問時の情報を参考にしながら、表示負担を軽減してくれるのです。

PWAはストアの審査を通さずともユーザーにアプリを提供できるのが強みです。通常のネイティブアプリの場合、ストアに陳列するためにはAppleやGoogleの審査を通過する必要があり、それにはいくつかの制約も含まれます。PWAの場合、審査に伴う機能制限などを考慮する必要がなくなるので、速やかな提供やサービスのフル提供が可能です。

Webブラウザを経由して提供するPWAは、 OSに依存することはありません。開発を別個に行う必要もなければ、このOSでなければユーザーが利用できない、という機能制限も発生しないので、ユーザビリティと開発のしやすさに優れる環境を提供します。これまでOS間の壁を越えるのに苦労していた人にとって、ありがたい仕様です。

PWAの導入に際しては、まずhttpsによるサイト立ち上げを行い、保護された環境を構築することが大前提です。その上でPWAの基本的な設定を記述する、マニフェストと呼ばれるJSONファイルを用意します。ファイルの中にはアプリの画像やテキストなどを保管します。そしてPWAの基盤となるServiceWorkerと呼ばれる機能を実装し、オンライン操作やプッシュ通知機能を使えるよう設定することが一般的です。これらの作業は相応のスキルが必要になります。このため、導入の際はプロのエンジニアに依頼するのがおすすめです。

最後に、現在も運用されている実際のPWAの導入事例についてもご紹介します。

イギリス発の決済サービスであるMishiPayは、PWAの導入でサービス利用数の顕著な増加が見られました。QR決済アプリの多くはネイティブアプリでの運用が主流であり、MishiPayもそのうちの一つでした。しかしサービスをPWAとして利用できるようにもしたところ、取引数は以前の10倍にまで増加し、およそ2.5年分にもなる店頭での行列の待ち時間の短縮に貢献したという結果が出ています。

出典：MishiPay's PWA increases transactions 10 times and saves 2.5 years of queuing （ https://web.dev/mishipay/ ）

ECサイト大手のAlibabaでは、PWAの導入によってブラウザ上で76%のコンバージョン率向上、月間アクティブユーザー数がiOSでは14%、Androidでは30%の増化、そしてホームスクリーンへのサービス追加のインタラクション率は4倍にまで向上しています。ネイティブアプリを利用していない層への強力な訴求効果が出ているといえるでしょう。

出典：Alibaba （ https://web.dev/alibaba/ ）

Twitterのスマホ版であり、ブラウザでの簡易利用を可能にしたTwitter Liteは、データ利用量を最小限に抑えた上で読み込み速度を向上し、不安定なネットワークでも利用しやすく設計されたPWAです。ネイティブアプリと比べて画像や動画の読み込みも抑えられており、最大70％のデータ量軽減を実現できます。

出典：Twitter Liteのご紹介 （ https://blog.twitter.com/ja_jp/topics/product/2017/twitter-lite_ ）

つづいては、アプリ開発を外注した際にかかる費用相場をご紹介します。

アプリ開発の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

PWAはWebアプリ利用の可能性を広げてくれる技術と言え、すでに多くのサービスで実装されています。運用には相応の技術力が求められるため、開発はプロへの依頼がおすすめです。
自社にノウハウがなくとも、PWAの実装・運用に強みを持つアプリ開発会社であれば、安心して依頼できるでしょう。アイミツではご要望を伺った上で、条件に合うアプリ開発会社を無料で複数社ご紹介可能です。会社選びでお困りの方は、お気軽にご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】
アプリ開発ができる会社一覧

【費用感を知りたいという方はこちら】
アプリ開発の費用・相場