Webサイトをアプリ化する「PWA」とは？ネイティブアプリとの違いやメリットを基礎から解説
監修者
松野尾 絢三氏
合同会社ワイヤーフレームズ代表社員
NPO法人クリエイター育成協会 理事
みん100株式会社 取締役
2011年に合同会社ワイヤーフレームズを創業し、WordPressを中心としたメディアサイトやウェブアプリケーションのデザインおよび開発をスタート。要件定義からデザイン・設計・実装すべてを一人でカバーしながら、これまでに50以上のプロジェクトに参画。みん100株式会社など、自らがファウンダーとして起業するケースも。現在は主に新規インターネットビジネスのスタートアップなど、ビジネス開発やUXからプロジェクトに参画し顧客と伴走しながら提案を行っている。PWAについてはAppCache時代から現在のServiceWorkerに至るまで、様々な用途での提案・実装経験を持つ。HAL大阪・京都産業大学などで非常勤講師も務め、教育分野でも積極的に活動。
目次
PWAとは？
PWAとは「Progressive Web Apps」の略称で、モバイル向けWebサイトをネイティブアプリのように利用できる仕組み・技術を指します。ネイティブアプリとはiOSやAndroid上で動作するスマートフォン向けアプリのことであり、PWAをひと言で表せば「Webサイトをスマホアプリ化するもの」と言えるでしょう。
PWAとネイティブアプリの違いとは？
PWAとネイティブアプリには、どのような違いがあるのでしょうか。ここでは基本的な違いについて説明します。
ストアへの登録・審査の必要性
ネイティブアプリを配信する場合、iPhoneであればApp Store、AndroidであればGooglePlayといったストアにアプリを登録し、審査を通過しなくてはなりません。PWAはWebサイトであるため、ストアへの登録や審査は必要なく、リリース後すぐにユーザーはアクセスすることができます。
アプリのアップデートの必要性
ネイティブアプリで対応環境や機能が変更された場合、ユーザーが最新のアプリを使用するには、ストア経由でアプリのアップデートを行う必要があります。PWAはブラウザ上で更新を行うことで、最新の状態での利用が可能です。
厳密には、PWAにも"アップデート"の仕組みがあります。PWAでは、ブラウザ内のキャッシュストレージに必要なリソースを保存（キャッシュ）し、レスポンス速度の向上やオフライン環境での動作を実現しています。サービスの機能やUIに変更が加わった際は、PWAが自らキャッシュストレージを更新し、PWA自体を"アップデート"させることが可能です。
厳密には、PWAにも"アップデート"の仕組みがあります。PWAでは、ブラウザ内のキャッシュストレージに必要なリソースを保存（キャッシュ）し、レスポンス速度の向上やオフライン環境での動作を実現しています。サービスの機能やUIに変更が加わった際は、PWAが自らキャッシュストレージを更新し、PWA自体を"アップデート"させることが可能です。
ホーム画面にアイコンが追加されるか否か
ネイティブアプリをインストールすると、ホーム画面にアイコンが自動的に追加され、次回からはアイコンをタップすることでアプリを起動することができます。PWAはWebサイトであるため、アクセスしただけではホーム画面にアイコンが追加されません。
ただし、iPhone/Android共に、ユーザー側の操作によってホーム画面にWebサイトのショートカットを作成することが可能です。PWAでは、ショートカットのアイコンや名前をあらかじめ定義できるため、ネイティブアプリのように「ホーム画面のアイコンをタップして開く」という挙動を実現することができます。
プッシュ通知の可否
ネイティブアプリと同様に、PWAもプッシュ通知をさせることが可能です。ただし、iPhoneでPWAのプッシュ通知を利用するには、iOS16.4以降が必要です。
Android端末では古くからPWAのプッシュ通知に対応していましたが、iOSを使うiPhoneでは対応していませんでした。そのため、toCのサービスを作る際は、プッシュ通知ができないPWAを選択肢から外さざるを得なかったのです。2023年3月にリリースされたiOS16.4では遂にプッシュ通知に対応したため、これからPWAを採用するデベロッパーも増えるのではないでしょうか。
Android端末では古くからPWAのプッシュ通知に対応していましたが、iOSを使うiPhoneでは対応していませんでした。そのため、toCのサービスを作る際は、プッシュ通知ができないPWAを選択肢から外さざるを得なかったのです。2023年3月にリリースされたiOS16.4では遂にプッシュ通知に対応したため、これからPWAを採用するデベロッパーも増えるのではないでしょうか。
ダウンロードの有無
ネイティブアプリは、インストール時にスマートフォンにデータがダウンロードされます。PWAはキャッシュの挙動をコントロールすることにより、データのダウンロードを最小限に抑えることも、最初のアクセス時にすべてのデータをダウンロードさせることも可能です。
PWA導入のメリットとは？
PWAには、ネイティブアプリにはないメリットが複数あります。ここではPWAの導入により、開発者やユーザーにもたらされるメリットについて説明します。
開発工数の軽減
ネイティブアプリの場合、iOSとAndroidでは開発言語や開発環境が異なります。クロスプラットフォームにより、1つの開発言語で両OSのアプリを開発することも可能ですが、すべての開発ステップが同じわけではありません。PWAはWebサイトであるため、原則的にOSの違いを考慮した開発が必要なく、開発工数を抑えられるメリットがあります。
ストア申請が不要
PWAは、AppStoreとGooglePlayといったアプリストアへの登録が必要ありません。そのため、申請に必要な作業や、審査に落ちた場合のスケジュール再調整など、登録や審査にかかる運用コストを抑えられます。
ネイティブアプリとほぼ同じ挙動が実現
PWAは、ブラウザ経由でホーム画面にショートカットアイコンを追加することにより、ネイティブアプリと同じように起動させることが可能です。また、Android及びiOS16.4以降ではプッシュ通知にも対応しており、ネイティブアプリとほぼ同じ挙動を実現させることができます。
SEO等による導線が期待できる
ネイティブアプリへの導線は、ストア内の検索が多くを占めています。一方、PWAはWebサイトとして、検索エンジンでのオーガニックサーチによる導線も期待できます。ユーザー増加の大きな要因になりうるでしょう。
インストール不要
PWAは、アプリストアからダウンロードやインストールをする必要がありません。ユーザーはブラウザから直接アクセスすればよく、手軽に使い始めることができます。
常に最新
PWAはキャッシュの挙動をコントロールすることで、利用時に自動的に更新することが可能です。ユーザーはアップデートの有無を意識することなく、常に最新のバージョンを使用することができます。
デバイスのストレージ節約
PWAはキャッシュするデータ量を制御できるため、ストアからダウンロードするネイティブアプリと比較して、デバイスのストレージ使用量を節約できます。
開発者にとって一番大きなメリットは、ワンソースでほぼネイティブアプリの挙動を実現できることでしょう。最初から工数をかけてiOSとAndroid向けにアプリを開発することなく、PWAでスモールスタートが切れるのは大きな利点と言えます。
また、PWAはPC用アプリにも対応できるほか、バックエンド処理など一部の処理をネイティブアプリ向けに流用することも可能です。つまり、ワンソースでさまざまなデバイスのアプリに対応できることになり、管理コストの軽減にもつながります。
開発者にとって一番大きなメリットは、ワンソースでほぼネイティブアプリの挙動を実現できることでしょう。最初から工数をかけてiOSとAndroid向けにアプリを開発することなく、PWAでスモールスタートが切れるのは大きな利点と言えます。
また、PWAはPC用アプリにも対応できるほか、バックエンド処理など一部の処理をネイティブアプリ向けに流用することも可能です。つまり、ワンソースでさまざまなデバイスのアプリに対応できることになり、管理コストの軽減にもつながります。
PWAのデメリットとは？
ここではPWAによるデメリットについて説明します。開発要件によっては無視できない場合もあるため、入念に考慮したうえで導入を検討するようにしましょう。
ハードウェアの機能を利用しにくい
PWAはブラウザ上で動作するため、以前はカメラにアクセスできないなど、使用できるハードウェアの機能に制限がありました。現在は技術の向上により「運転免許証を撮影してアップロードする」といった挙動も可能になりましたが、機能によってはネイティブアプリに比べて実装が困難なケースも存在します。
ブラウザの互換性
iPhoneはSafari、AndroidはChromeといったように、スマートフォンによって標準ブラウザは異なります。PWAのすべての機能がブラウザでサポートされているとは限らないため、リリース時には複数のブラウザで動作確認を行う必要があります。
Service Workerの設定が複雑になる場合がある
Service Workerとは、ブラウザに表示されるWebページとは別に、バックグラウンドで動作するJavaScript環境およびプログラムを指します。これにより、プッシュ通知やオフラインでの利用といった、ネイティブアプリに近い実装が可能になります。
ただし、PWAで高度な機能を実現したい場合は、Service Workerの設定やキャッシュ管理が複雑になり、誤った実装が予期せぬ動作を引き起こすことがあります。
オフライン利用の可否がユーザーにわかりにくい
Webサイトとは異なり、オフラインでも利用可能なのがPWAの特徴の1つです。ただし、PWA側の仕様によっては、すべての機能がオフラインで利用できるとは限りません。どの機能がオフラインで利用できないか、ユーザーは事前に知り得ないため、「オフラインでも使えると思ったのにできなかった」とユーザー体験を損なう可能性があります。
ショートカットアイコンをホーム画面に追加することにより、ネイティブアプリのように扱えるのがPWAのメリットではありますが、そもそもホーム画面へ追加する方法を知らないユーザーも少なくありません。PWAの開発側は、ネイティブアプリとはアクセスの仕方が異なることをユーザーに説明する必要があり、ドキュメントの作成などの運用コストを見込む必要があります。
ショートカットアイコンをホーム画面に追加することにより、ネイティブアプリのように扱えるのがPWAのメリットではありますが、そもそもホーム画面へ追加する方法を知らないユーザーも少なくありません。PWAの開発側は、ネイティブアプリとはアクセスの仕方が異なることをユーザーに説明する必要があり、ドキュメントの作成などの運用コストを見込む必要があります。
PWAを導入するために必要な４つのステップとは？
ここではPWAを導入するために必要なステップについて説明します。
1サイトのセキュリティを強化する（HTTPS導入）
PWAの導入にはService Workerが欠かせません。Service Workerはセキュリティ上の理由からHTTPS環境でのみ動作するため、まずはHTTPSを導入し、サイトのセキュリティ強化を行いましょう。
2ライブラリや通知サービスの選定
実装したい機能に合わせて、PWA構築を支援するWorkboxなどのライブラリや、Firebase Cloud Messaging（FCM）といった通知サービスを選定します。利用するライブラリやサービスによって実装方法が大きく変わるため、最適なサービスを選ぶ必要があります。
3基本設定を定義した「マニフェスト」を作成する
マニフェストとは、PWAの基本的な設定を記述するファイルです。起動時に表示される内容や、規定のテーマカラー、アイコンのサイズや画像ファイルなどが含まれます。機能要件に合わせてマニフェストを作成しましょう。
4Service Workerの機能を活用する
前述のService Workerを作成し、プッシュ通知やオフライン対応、キャッシュ管理などの機能を実装します。
プログラミング言語や開発環境の理解が必要なネイティブアプリ開発に比べ、PWAはWebやJavaScriptの知識がベースとなるため、Webに関わる人であれば学習コストはそこまで高くありません。ただ、キャッシュのコントロールなどは自前で作り込まねばならないこともあるため、要件によっては経験者の力を借りることを検討してもよいでしょう。
プログラミング言語や開発環境の理解が必要なネイティブアプリ開発に比べ、PWAはWebやJavaScriptの知識がベースとなるため、Webに関わる人であれば学習コストはそこまで高くありません。ただ、キャッシュのコントロールなどは自前で作り込まねばならないこともあるため、要件によっては経験者の力を借りることを検討してもよいでしょう。
PWAを導入したサイト事例4選
PWAを導入したサイトには、どのようなものがあるのでしょうか。ここではPWAを導入している大手サイトの実例から、その特徴を紹介します。なお、記載内容は記事執筆時点のものであり、仕様は将来的に変更される場合があります。
X（旧Twitter）
- 高速な読み込み：キャッシュを活用して、トレンドやタイムラインを高速に読み込み、オフラインでも閲覧が可能です。
- プッシュ通知：新しいツイートやダイレクトメッセージがあった場合、リアルタイムでユーザーに通知します。
- データの節約：データーセーバー機能を利用して、データの使用量を削減しながらもスムーズな操作を実現しています。
YouTube
- 動画のキャッシュ：オフライン時でもキャッシュされた動画を視聴することができます。
- バックグラウンド再生：ほかのタブやアプリを開いている間も、動画の音声をバックグラウンドで再生することができます。
- アダプティブUI：デバイスや画面サイズに応じて、UIを最適化します。
日経電子版
- オフライン閲覧：キャッシュを活用して、オフライン時でも記事を読むことができます。
- リアルタイム通知：重要なニュースや更新情報を、プッシュ通知でユーザーに知らせます。
SUUMO
- 物件のキャッシュ：キャッシュを活用して、オフライン時でも物件情報を閲覧することができます。
- 物件情報の通知：新しい物件が登録された際や、情報が更新された際に、プッシュ通知でユーザーに知らせます。
- 高速な検索：最適化されたデータベースと、PWAのキャッシュを活用して、物件の検索を高速化していると思われます。
PWAについてよくあるQ&A
ここからは実際にSNS上などでよく挙がるPWAに関する疑問についていくつかピックアップし、監修者の松野尾氏に回答していただきます。
Q.1他社のサイトがPWAかどうかを見分ける方法はありますか？
ソースを見れば判別できますが、外見だけでPWAか否かを見分けるのは難しいかと思います。PC版のChromeの場合、PWAを表示するとブラウザのアドレスバーにダウンロードボタンが表示されるので、ボタンの有無で判別することは可能です。
Q.2「PWAは流行らない」「PWAは"オワコン"」という意見もあるようですが、なぜそう言われるのでしょうか。また、実際はどうなのでしょうか。
PWAが一部で「オワコン」と見なされる主な理由は、これまでiOSがPWAのプッシュ通知をサポートしていなかったことにあります。これが、多くのtoCサービスがPWAではなくネイティブアプリを選択する要因となっていました。しかし、2023年3月にリリースされたiOS16.4でPWAのプッシュ通知に対応したことで、PWAの普及が加速すると予想されます。この変化は、PWAの将来にとって重要なターニングポイントとなるでしょう。
Q.3PWA導入に必要なスキルについて教えてください。
HTML、CSS、JavaScriptといったフロントエンドのスキル、およびService Workerの知識が基本的なものになると思います。また、Googleが提供するライブラリである「Workbox」は、キャッシュコントロールに独自APIが用意されており、慣れるとかなり使いやすいのでおすすめです。FCMなどの通知サービスも把握しておくと、要件に沿った機能を実装しやすくなるでしょう。
まとめ
PWAは、ネイティブアプリに比べて開発工数や運用コストが抑えられるといったメリットがあります。近年はカメラなどのデバイスを利用できたり、iOSがプッシュ通知に対応したりなど、その可能性はますます高まっていると言えるでしょう。スマートフォンのアプリを開発する際は、PWAという選択肢を検討してみてはいかがでしょうか。
