PWA開発（Progressive Web Apps）とは？技術・開発環境・開発のメリット・注意点を解説【2024年最新版】

モバイルデバイスがWebアクセスの主流となった現在、なんとかしてスマートフォンユーザーにリーチしたいと考える企業・店舗の方であれば「Webとアプリのいいとこどり」といわれる「PWA」が気になっていることでしょう。しかし、PWAの全体像を把握している方は多くありません。

・PWA（Progressive Web Apps）とは？
・PWA開発が注目されている理由は？
・PWAとネイティブ・ハイブリッドアプリの違いは？
・PWA開発の方法は？

そこで本記事では、PWAの仕組みや技術・開発環境、導入のメリット、ネイティブ・ハイブリッドアプリとの違いなど、知っておきたいPWA開発の基礎知識を徹底解説！PWA開発を検討する際に、注意しておくべきポイントも紹介していきます。

※PWAの内製が難しい、優秀なアプリ開発会社にPWA開発を依頼したいという方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

【無料】おすすめのアプリ開発会社を紹介してもらう

アプリ開発に役立つ記事もご覧ください PWA開発におすすめ！アプリ開発かんたんマニュアル

PWA（Progressive Web Apps）とは

PWA（Progressive Web Apps）とは、ネイティブアプリのように利用できる、スマートフォン向けWebサイト / Webアプリのことです。「レスポンシブサイトとなにが違うのか？」疑問を感じる方がいるかもしれませんが、WebコンテンツをアプリのようにインストールできることがPWAの特徴。PWAなら、URLをブックマークする必要もありません。

2015年頃からGoogleが提唱していたPWAですが、当初はAndroidのみの対応だったため、日本における知名度は高いといえませんでした。しかし、iOSも2018年リリースのVer.11.3からPWAへの対応を開始。実行環境が整いつつあることから、改めてPWA開発への注目が高まっているのです。

レスポンシブデザインについてより詳しく知りたい方は、以下の記事も参考にしてください。
関連記事：レスポンシブデザインとは？仕組み・必要な理由・メリット・デメリット・作り方を解説！

PWAの事例：Rettyグルメニュース

画像引用：Rettyグルメニュース

Webブラウザの高機能化技術として、早くからPWAに注目していたRetty株式会社は、Rettyグルメニュースの配信頻度増加に合わせ、2017年2月からPWAを導入。新着記事の通知・高速表示・オフラインでの利用・ワンタップでのアクセスなど、ユーザーの利便性向上を実現しました。

たとえば、iPhoneのWebブラウザ「Safari」で同ページにアクセスし、「Add to Home Screen」をタップするだけで、「Rettyグルメニュース」のアイコンがホームに追加され、ネイティブアプリと同様の使い勝手を提供します。

【無料】PWA開発について相談する

PWAの特徴

Rettyグルメニュースの事例を踏まえたうえで、PWAにはどのような特徴があるのか。もう少し具体的に解説していきましょう。

ストアダウンロード / インストールが不要

ホームへのアイコン追加方法を見てもお分かりのように、PWAはWebブラウザ経由で端末にインストールされます。App Store / Google Playからのアプリインストールは不要であり、ストアへの登録・審査はもちろん、手数料も支払う必要はありません。

インストールするとはいっても、PWAの本体は「Webサイト・アプリのフロントエンド」のようなもの。HTML / CSS / JavaScriptで記述されたWebコンテンツであるため、容量は数MB程度に過ぎず、アプリのアップデートも不要です。PWAなら、ストレージの余裕がなくてアンインストールされる、といったことも避けやすいといえるでしょう。ただし、インストール不要であることはApp Store / Google Playによって新たなユーザー獲得はできないことには注意しましょう。

端末の機能を利用可能

モダンWeb技術を活用したPWAは、まるでネイティブアプリのように端末の機能を利用できます。たとえば、スマートフォンのカメラ・マイク入力・オーディオ出力・GPS・生体認証・Bluetooth・音声認識・プッシュ通知などです。ツールバーなしの全体表示も可能なため、見た目も含めてPWAを使っているとは思えない操作感を実現できます。PWAから端末の決済機能も利用可能です。

ただし、GoogleChromeなどでは動作する機能が、他のブラウザやPWAでは動作しないこともあるのです。なかでも、iOS13.4まではカメラ機能が動作できませんでした。ブラウザのアップデートによってPWAが動作しない事態もありうることには注意しましょう。

キャッシュを利用した軽快な動作・オフラインでの利用

チューニングにもよりますが、WebブラウザからWebサイト・アプリへのアクセスに比べ、ページ表示が2〜4倍速くなることもあります。データをキャッシュしておくPWAは、オフラインでも利用可能。ネットワークの届かない地下などでも、キャッシュされたコンテンツを閲覧可能です。

マルチデバイスで利用可能

PWAは、スマートフォン向けとして開発された技術ではありますが、HTML / CSS / JavaScriptといったWeb技術も応用されています。このため、利用するWebブラウザが対応していれば、PCやタブレットでもPWAを利用可能です。Chrome / Safariのほかにも、Firefox / EdgeなどのWebブラウザがPWAに対応しています。これは、1つのアプリを開発するだけであらゆるデバイスに対応可能となるので、アプリ開発期間や費用などの削減にもつながるのです。

ネイティブアプリ / ハイブリッドアプリとの違い

PWAのほかに、スマートフォンにインストールして利用できるアプリには「ネイティブアプリ」「ハイブリッドアプリ」があります。

ネイティブアプリとは、特定のOSで動作するように開発されたアプリのこと。スマートフォン向けネイティブアプリは、iOSアプリ、Androidアプリの2つです。
ハイブリッドアプリとは、iOS / Androidに標準搭載される「WebView（Webページを読み込んで画面に表示する機能）」、およびWeb技術（HTML / CSS / JavaScript）を活用して開発されるアプリのこと。

ネイティブアプリ / ハイブリッドアプリともに、ダウンロード / インストールにストアの登録・審査が必要という点がPWAと異なりますが、特徴もそれぞれ異なります。

そのため、PWA開発は「端末の機能をそれほど活用しないニュースアプリなどの開発」に適します。ネイティブアプリは「GPS・カメラ・通知機能などスマホ機能を活用する高機能アプリ」に向いています。ハイブリッドアプリは、「開発コストをなるべく安く、本体OSによるアップデートなどの影響を受けづらくしたい開発」におすすめです。

ネイティブアプリ開発についてより詳しく知りたい方は、以下の記事も参考にしてください。
関連記事：ネイティブアプリ開発のメリット！将来性・開発に必要な言語・環境も解説

ハイブリッドアプリ開発についてより詳しく知りたい方は、以下の記事も参考にしてください。
関連記事：ハイブリッドアプリ開発とは？Webアプリ、ネイティブアプリとの違いについて解説

【無料】PWA開発について相談する

PWA開発のメリット

それでは、注目の高まるPWA開発にはどのようなメリットがあるのか？PWAの特徴や、ネイティブアプリ / ハイブリッドアプリとの違いを踏まえたうえで紹介していきましょう。

開発コストを抑えられる

iOS / Android向けにそれぞれ開発する必要のあるネイティブアプリと異なり、クロスプラットフォーム・マルチデバイスで動作するPWAは、開発コストを抑えられます。モダンWeb技術を応用するという意味では、PWA開発もハイブリッドアプリ開発も同様ですが、ストアへの登録・審査が不要な分だけPWAの方が手間がかからないといえるでしょう。ハイブリッドアプリよりも操作性・パフォーマンスが優れているPWAは、開発側から見て魅力的な選択肢となり得ます。

ユーザーエクスペリエンスの向上

PWAはアイコンからの起動、軽快な動作、オフラインでの利用・デバイスの機能活用など、ネイティブアプリ並みの利便性を持ち、アップデートも不要です。そのため、Webサービスの提供のみよりもユーザーエクスペリエンスを大幅に高めらます。

アメリカのアプリ開発会社「MLSDev」の調査によれば、スマートフォンユーザーは1日にデバイスを利用する平均時間「3時間40分」のうち、およそ90%をアプリ利用に費やしているのが現実です。

画像引用：MLSDev「App Development Cost」

つまり、ネイティブアプリと同等のユーザーエクスペリエンスを提供できるPWAなら、Webサービスを提供するだけよりも、多くのスマートフォンユーザーにリーチできるといえるでしょう。日経電子版のサイトはPWAでの開発により、読み込み速度が75％改善などのユーザビリティアップの効果をもたらしています。

コンテンツマーケティングからの流入

Webサイト / WebアプリとイコールだといってもいいPWAは、コンテンツマーケティングを展開することによって、オーガニック検索からのユーザー流入が見込めるメリットがあります。「コンテンツマーケティングでユーザーが流入」「サイトからPWAをインストール」「ユーザーのエンゲージメント向上」という理想的なサイクルが生まれると期待できます。日経電子版のサイトはPWAでの開発により、オーガニック流入が以前の2.3倍になっているのです。

ストアに登録しないPWAは、スマートフォンユーザーに直接アピールできないという説もあります。しかし、そもそもストアには膨大なアプリが登録されています。ユーザーにアプリの存在を知ってもらうには、いずれにしても自社サイトのアピールが必要。PWA / ネイティブアプリどちらが合理的なのかは明らかです。

【無料】PWA開発について相談する

PWAの仕組みを支える技術

PWAを開発するにはどうすればいいのかを解説する前に、PWAの仕組みを支える技術を簡単に解説しておきましょう。Web開発者向けの文書を公開するMozillaの公式サイト「mdn web docs」では、PWAを定義する8つの原則を挙げています。

参考：mdn web docs

このうち、PWAで重要になるのは「Installable」「Network Independent」「Re-engageable」の3つ。あとの5つは、現代のWebサイト / Webアプリで必須とされている原則です。

Web App Manifest

アプリを端末ホーム画面に追加する「Installable」を担うPWAの技術が「Web App Manifest」です。アプリストアを経ることなく、端末のホーム画面にインストールできるようにする技術を指します。具体的には、サイト名・デフォルトでリンクするURL・アイコンなどのプロパティを含んだ「manifest.json」ファイルを作成し、Webサイト / アプリのルートディレクトリに設置します。「manifest.json」ファイルをWebサイト / アプリの全ページに読み込ませることで、PWAからすべてのサービスにリンクできるのです。

ただし、ホーム画面に表示されるアプリのアイコンは、iOSの場合ではWeb App Manifestのアイコンが反映されません。そのため、以下のようにHTMLのlinkタグを設定しましょう。

<link rel=”apple-touch-icon” href=”./icon_ios.png”>

またiOSでは、ホームページ画面のアイコンの角を円くする加工をOS側で自動的になされるので、アイコン画像は正方形のものを用意しましょう。

Service Workers

オフラインでも動作する「Network Independent」を担うPWAの技術が「Service Worker」です。Service Workerとは、Webブラウザのバックグラウンドで動作する「JavaScriptファイル」です。ブラウザ内のストレージ領域にPWAのデータをキャッシュすることで、オフライン時の動作を担保しています。

マニフェストファイル同様、作成したService Workerファイル（.js）はルートディレクトリに設置し、PWAで表示したいページを読み込ませます。ちなみに、Service Workerを経てユーザーにプッシュ通知を出すと、ユーザーに情報を送れます。

Push API

プッシュ通知を実現させる「Re-engageable」を担うPWAの技術が「Push API」です。Push APIとは、WebブラウザのAPIとService Workerを組み合わせ、通知を受け取ったりデータをバックグラウンドで更新するなどが可能。Googleでは、オープンソースのライブラリ「Workbox」を利用したPush API実装を推奨しています。

画像引用：Workbox

ただし、2022年7月時点「iOS向けSafari」ではPush APIをサポートしていません。つまり、iPhone / iPadなどでのPWA利用は可能ですが、プッシュ通知は使えないことに注意が必要です。

httpsサーバー

PWAはSSL対応されていることが条件です。URLが「https」になっており、上のように鍵マークがついています。

※PWAの内製が難しい、優秀なアプリ開発会社にPWA開発を依頼したいという方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

【無料】おすすめのアプリ開発会社を紹介してもらう

PWA開発の方法

PWA開発の方法は主に5つ

PWA開発の方法は大きく2つ。「既存のWebサイト / WebアプリをPWA化する」もしくは「PWAを実装したWebサイト / Webアプリを開発する」です。既存のWebサイト / WebアプリをPWA化する方法は以下の通り。

1. 「manifest.jsonファイル」を作成し、Webサイト / アプリのルートディレクトリに設置
2. 「manifest.jsonファイル」をWebサイト / アプリの全ページに読み込ませる
3. 「Service Workerファイル（.js）」を作成してルートディレクトリに設置
4. 「Service Workerファイル（.js）」をPWAで表示したいページに読み込ませる
5. 「Workbox」を利用してPush APIを実装

PWAを実装したWebサイト / Webアプリを開発する方法にはいくつかが考えられますが、通常のWebサイト / Webアプリ開発時に、上述した手順を加える形になるのが基本です。

上記手順を見て自社で開発するのが不安な方は、下記で紹介しているPWA開発に実績のあるアプリ開発会社をご参照ください。
関連記事：PWAに対応できるおすすめアプリ開発会社6選！

【無料】PWA開発について相談する

PWAの開発環境

それでは、PWAを実装したWebサイト / Webアプリを開発するにはどのような環境を整えればいいのか。代表的ともいえるPWAの開発環境を紹介しておきましょう。

JavaScriptフレームワーク・ライブラリ

Webサイト / Webアプリ開発といえば、PHPやRuby、Pythonなどでバックエンド開発（サーバ側で動作するアプリケーション）するイメージを持っている方も多いでしょう。もちろんそれでも問題ありませんが、PWAではシングルページアプリケーション（Single-page Application）を採用する場合がほとんどです。

シングルページアプリケーション（SPA）とは、単一のWebページで構成され、サーバとの通信をJavaScriptで実行するタイプのWebサイト / Webアプリのこと。フロントエンド側でコンテンツ切り替えも実行させるため、SPAを開発する場合はJavaScriptフレームワーク・ライブラリを活用してフロントエンド開発することがほとんどです。

画像引用：React

SPAに対応するJavaScriptフレームワーク・ライブラリとしては、「Angular」「Vue.js」「React」などが挙げられます。ゼロからPWA開発するのであれば、大規模アプリにも対応しやすい「React」がおすすめです。

ユーザーインターフェースライブラリ

アプリ画面となるユーザーインターフェースに関しては、HTML / CSSを組み合わせて作成することが一般的です。しかし、ネイティブアプリのようなインターフェースを実現するため、PWA開発では「ユーザーインターフェースライブラリ」が多用されます。

画像引用：Framework 7

UIライブラリは、利用するJavaScriptフレームワークに合わせて選ぶことになりますが、Reactフレームワークの場合であれば「Framework 7」がおすすめ。Vue.jsにも対応しています。「Framework7でアプリを作るのは、ウェブサイトを作るのと同じくらい簡単です。」とFramework 7公式サイトに記載があるほど、使いやすさは担保されているでしょう。

バックエンド環境

通常のWebサイト / Webアプリと同様、PWAにもバックエンド環境が必要です。PHP / Rubyなどで構築したバックエンド環境があるのなら、「REST API」を設置してフロントエンド側から呼び出し可能です。もっと気軽にバックエンド環境を構築したい場合は、mBaaS（mobile Backend as a Service）を活用してサーバレス環境を構築する方法もあります。

画像引用：firebase

mBaaSには、富士通が提供するクラウドサービス「二フクラ」、Googleのサーバレスサービス「Firebase」などがあり、ニーズに応じて選択可能。近年では、AWSのようにサービスを組み合わせて利用できる「Firebase」の人気が高まっているようです。

ただし、開発したアプリのFirebase構成ファイルやオブジェクトを手動で変更することは、Firebase公式サイトによると推奨されません。誤った形で変更すると、誤作動などユーザーに深刻な問題が発生する恐れがあるので注意しましょう。

Firebaseを活用したアプリ開発についてより詳しく知りたい方は、下記記事もご参照ください。
関連記事：アプリ開発を効率化するFirebaseとは？活用するメリット・注意点・アプリとの関係性を解説！

【無料】PWA開発について相談する

PWA開発で注意するべきポイント

いいことばかりのように思えるPWA開発ですが、開発に着手すべきかどうか、検討する際に注意しておきたいポイントもあります。

OS / WebブラウザによってPWA対応状況が異なる

2018年まで、iOSでPWAが利用できなかったことからもわかるように、OS / WebブラウザによってPWAの対応状況は異なります。正確には、Webブラウザに「Installable」「Network Independent」「Re-engageable」をサポートするAPIが組み込まれているかどうかが重要です。2022年7月現在「iOSのSafari」では「Re-engageable」がサポートされないため、プッシュ通知が使えません。

しかし、iOS 16からは「Re-engageable」がサポートされる見込みとなっており、状況は改善されてく見通しです。数年内には、PWAが動作しないWebブラウザ / 端末は限りなく少なくなっていくでしょう。

現時点ではネイティブアプリが主流

サービス提供側だけでなく、スマートフォンユーザーにとってもメリットの大きいPWAではありますが、上述した「MLSDev」の調査によれば「現時点で主流だといえるのはネイティブアプリ」であることは明白です。

画像引用：MLSDev「App Development Cost」

これは「PWAをインストール・実行できる環境が少なかった」こともあるかもしれません。しかし、まだPWAの知名度自体が高くないのも事実。ネイティブアプリ優位の状況がすぐに変わることはないかもしれません。

【無料】PWA開発について相談する

PWA開発まとめ

PWAとはどんなアプリか？PWA開発が注目されているのはなぜか？知りたい方に向け、本記事では、PWAの仕組みや技術・開発環境、導入のメリット、ネイティブ・ハイブリッドアプリとの違いなど、知っておきたいPWA開発の基礎知識を解説するとともに、PWA開発で注意しておきたいポイントも紹介してきました。

PWA（Progressive Web Apps）とは、ネイティブアプリのように利用できる、スマートフォン向けWebサイト / Webアプリのことです。WebコンテンツをアプリのようにインストールできることがPWAの特徴。PWAなら、URLをブックマークする必要もありません。

さまざまなメリットのあるPWAではありますが、あらゆるサービスにPWAが適しているというわけではありません。重要なのは、目的に応じたアプリ戦略の策定であり、戦略に最適なアプリはなにか？という視点をもつことです。

※PWAの内製が難しい、優秀なアプリ開発会社にPWA開発を依頼したいという方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

コンサルタントのご紹介 岩田 専任のコンサルタントが、
お客様の予算と目的を丁寧にヒアリング。
最適な会社をピックアップ・ご紹介させていただきます！
初心者の方でも安心してご相談いただけます。

【無料】おすすめのアプリ開発会社を紹介してもらう