エンジニア全般
2015年にGoogleがリリースしたPWA（Progressive Web Apps）は、新しいアプリの形として今注目を集めています。
日本でも多くの企業がPWA（Progressive Web Apps）を導入し始めていますが、どんな機能があるのかWebアプリとの違いなど分からないと感じる人も多いでしょう。
そこで本記事ではPWAの基礎知識や機能、Webアプリとの違いを解説していきます。
PWA（Progressive Web Apps）の導入を検討している担当者はぜひ参考にしてください。
文系出身・未経験でIT業界に入り、システムエンジニアとしてモバイルアプリ開発を経験。初心者でもわかりやすいような記事を心掛けています。 最近はマーケティング、Webデザインの勉強中。
PWA（プログレッシブウェブアプリ）とは？
PWAとは、「progressive web apps」の略です。従来のウェブサイトとネイティブアプリの中間に位置する新しいアプリケーションの形態で、ウェブサイトのシンプルさとアプリの高機能さを併せ持っているのが特徴です。
PWAはブラウザの機能を活用して、オフライン表示やホーム画面へのアイコン設置などの高度な機能を実現します。
一方で、アプリストアへの登録は不要で、ウェブサイトの改良のみでPWA化できるため、開発コストや時間を大幅に抑えられます。ユーザーもアプリのインストール無しで利用可能で、使いやすさに優れています。
スマートフォンの普及によりモバイル利用が当たり前となった今、モバイル体験を意識したPWAの需要が高まっています。ネイティブアプリ並の高機能性とウェブサイトの手軽さを兼ね備え、iOS/Androidの両方に対応できるのがPWAの大きな利点です。
最近のブラウザがPWA対応を標準搭載していることも後押し、ユーザーエンゲージメントの向上や業績アップが期待できるためPWAへの投資効果は高いと言われています。
先進的なサイトでは既にPWA化が進んでおり、今後は一般サイトへの導入が広がると予想されます。ウェブサイトの強化とユーザー獲得・継続利用を高めたい場合には、PWAの活用が有力な選択肢となります。
PWA（プログレッシブウェブアプリ）とWebアプリの違い
PWAはウェブアプリケーションの一種で、ネイティブアプリやハイブリッドアプリとは異なる特徴を持っています。PWAは開発しやすく、アプリのような体験を実現できる存在です。これを比較表で簡単に説明しましょう。
| 特徴 | PWA | ネイティブアプリ | ハイブリッドアプリ |
| 開発言語 | HTML、CSS、JavaScript | Swift、Java、Kotlin、Objective-C | HTML、CSS、JavaScript |
| インストール不要かどうか | ウェブブラウザからアクセス（不要） | アプリストアからダウンロード（必要） | アプリストアからダウンロード（必要） |
| クロスプラットフォーム | ○ | ○ | ○ |
| オフライン動作 | 一部可能 | 可能 | 一部可能 |
| ユーザーエンゲージメント | 一般的に低い | 高い | 中間 |
| プッシュ通知 | 可能 | 可能 | 不可 |
| カメラ機能 | 可能（一部制限あり） | 可能 | 不可 |
| 位置情報取得 | 可能（一部制限あり） | 可能 | 不可 |
| パフォーマンス | ネイティブアプリより劣る場合がある | 速い | 比較的遅い |
| SEO | 有利 | 不利 | 有利 |
| アプリストア審査 | 不要 | 必要 | 不要 |
| アップデート | ブラウザ経由で自動更新 | アプリストア経由で手動更新 | ブラウザ経由で自動更新 |
PWAとネイティブアプリ/ハイブリッドアプリの違いは、主にアクセス方法に関係があります。
PWAはウェブブラウザからアクセスでき、ネイティブアプリ/ハイブリッドアプリはアプリストアからダウンロードする必要があります。ネイティブアプリのように使えるPWAですが、あくまでWebアプリなので、ブラウザ上で表示されます。
またPWAは、iOSやAndroidのそれぞれの環境に合わせた開発やアップデートが不要になり、開発にかかるコストを削減できます。近年UXを重視する観点からも、オフラインで動作し、自動更新ができる点もPWAの利点といえるでしょう。
PWA（プログレッシブウェブアプリ）導入のメリット
PWAにはさまざまなメリットがあります。開発のしやすさやアプリ並みの機能など、様々な点でウェブサイトを改善できます。
以下に、PWAを導入することのメリットについて事例も交えながら詳しく解説していきます。
開発・運用コストが削減できる
PWAを導入するメリットとして、開発や運用のコストを削減できることが挙げられます。アプリ開発にはiOSとAndroidの両方に対応した開発が必要になり、その分工数費用がかかります。ですが、PWAの場合、iOS・Android用に開発する必要がなく、コストを削減して導入することができます。既存のWebサイトに変更を加えるだけなので、工数がかからずコスト削減が可能です。
インストールが手軽にできる
参照：スターバックス
ネイティブアプリやハイブリッドアプリは、アプリストアからインストールが必要になりますが、PWAの場合はブラウザからアクセスが可能なため、インストールが手軽です。PWAはホーム画面にアイコンを追加して使用できます。
ネイティブアプリやハイブリッドアプリのように、アプリストアからインストールするには申請や審査が必要になり、申請が通らなかった場合、リリースの延期や修正が必要になるため、非常に工数がかかります。
ですが、PWAはWebサイトから直接インストールできるので、アプリストアへの申請をする必要がなく、スケジュールに沿って開発を進めやすくなります。
オフラインにも対応している
Service Workerを使うことで、オフライン時でもコンテンツを表示できるようになります。インターネット回線が不安定な場合でも利用できます。Service Workerを使えば、ページのリソースをキャッシュしておき、オフライン時にそこからコンテンツを提供できます。インターネットに接続できない状況でも、ある程度のコンテンツ表示が可能になります。
ネイティブアプリの場合は、オフライン時にはそもそも起動できないのが通常です。インターネット回線が不安定な環境での利用を考えるのであれば、オフライン時の対応ができるPWAの方が安定してサービスを提供できると言えます。
コンテンツの閲覧をメインとするサービスでは、このオフライン対応は大きなメリットになります。
ネイティブアプリに近い機能を実装できる
参照：タウンワーク
Ajaxやスマホ向けUIフレームワークを使うことで、アプリのような操作感と見た目を実現できます。コストをかけずに使いやすいUIが実装できるのが魅力です。
PWAなら余計なコストをかけることなく、アプリ並みのインターフェースを実現でき、既存のウェブ技術とスキルを活用して手軽にアプリのようなUIを実装できるのはPWAが持つ大きなメリットです。
SEOとユーザー体験が向上する
PWAはウェブサイトなので、検索エンジンで自然に表示され、アプリよりも検索で自社サイトを上位表示しやすいというメリットがあります。
Service Workerを使ったキャッシュ機能を活用し、ページの表示速度が向上することで、待ち時間の削減からユーザーのストレス軽減につながります。キャッシュしたリソースを活用することで再度の通信が不要となり、待ち時間を短縮化できます。
また、適切なSEO対策を行えば、オーガニック流入の増加やコンバージョンの上昇、PV数の向上など多くのメリットを得られます。
PWA（プログレッシブウェブアプリ）のデメリットや流行らない理由
PWAにはデメリットもあることに注意が必要です。これらのデメリットはPWAが流行らないと言われる理由の一つです。
特にコスト面やブラウザ対応などがなかなか流行らない理由と言えるでしょう。もし導入を検討している場合は、ウェブサイト以上の課題がある点を把握する必要があります。
以下、PWAのデメリットについて詳しく解説していきます。
デバイスやOSによって動作が異なる
PWAでは最新のブラウザが必要です。古いOSでは正常に動作しない可能性があり、対応デバイスの制限も課題です。PWAに必要な技術は、比較的最近のブラウザでしかサポートされていないものが多くあります。そのため、古いスマートフォンやガラ携ではPWAが利用できない場合があります。
例えば、iOSのSafariではiOS 11.3以降しかService Workerに対応していません。Androidでも古いOSではPWAの機能が十分に動作しないことがあります。ユーザーの端末が古い場合PWAを使うことができない可能性があるため、ターゲット層によっては普通のモバイルサイトの方が望ましい場合もあるでしょう。
対象ユーザーの端末環境を考慮し、PWAのメリットが活かせるか見極める必要があります。
パフォーマンスや機能に制限がある
ネイティブアプリとPWAでは一定の機能差があります。
PWAはWebテクノロジーに基づくため、ネイティブアプリがデバイスのハードウェアやOSの機能にフルアクセスできるのに対し、PWAには制限があります。
具体的には、カメラ、GPS、連絡先、指紋認証などのネイティブAPIへのアクセス権限の制限などです。また、アプリ間の連携や、バックグラウンドでの動作なども、ネイティブアプリの方が自由度が高くなっています。
ただ、PWAはプッシュ通知、バックグラウンド同期、オフラインサポートなど、ネイティブアプリと同等の体験を提供できる機能も備えています。
PWAの機能も拡張され続けているため、ネイティブアプリとの機能差は徐々に小さくなっていくと考えられており、要件次第ではPWAで十分事足りる場合も多いです。
アプリストアへの掲載ができない
アプリストアへの掲載は、ユーザーへのリーチ力を大きく向上させる一方、プラットフォーム providersの審査を通過する必要があり、一定の手間とコストがかかります。
PWAはWebで動作するため、この審査プロセスを経ずに配信できるメリットがあります。
ただし、アプリストアには掲載されないため、ユーザが見つけにくい点がデメリットになり得ます。優先順位次第では、アプリストア掲載とPWA配信のハイブリッド戦略を検討しましょう。
PWA（プログレッシブウェブアプリ）の実装方法
PWAを実装する方法や何が必要なのかを解説します。PWAではプッシュ通知やオフラインで使う場合に、Service Workerを実装する必要があります。Service Workerの実装やほかにも必要となるマニフェストファイルの作成など、PWAの実装方法について詳しく見ていきましょう。
1. 基本要素の準備
はじめにPWAを実装するにあたって、以下の基本要素の準備が必要になります。
- アプリの表示部分を記述（index.html）
- Service Workerの処理情報を記述（sw.js）
- PWAの設定情報を記述（manifest.js）
index.htmlを作成し、manifest.jsonとservice worker を読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="./manifest.json">
<link rel="stylesheet" href="./css/styles.css">
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register ('/pwa_test/service-worker.js')
}
</script>
<title>PWA test</title>
</head>
<body>
<h1>PWA Test</h1>
</body>
</html>参照：Qiita
2. マニフェストファイルの作成
PWAの設定情報を記述するためにマニフェストファイルを準備します。
マニフェストファイルに名前やアイコンの情報を記述することで、PWAに表示することができます。
{
"name": "PWA Test",
"short_name": "PWA",
"background_color": "#000000",
"icons": [{
"src": "/pwa_test/img/icon.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/pwa_test/",
"scope": "/pwa_test/",
"display": "standalone"
}
参照：Qiita
3. Service Workerの実装
Service Workerの/sw.jsを作成して実装していきます。
プッシュ通知やオフライン対応、キャッシュ管理などの機能が必要な場合にService Workerを実装しましょう。
Googleが提供するWorkboxを使うと簡単にService Workerを作れます。ライブラリやプラグインの利用ができるのでおすすめです。
self.addEventListener('fetch', function (e) {
console.log('service worker fetch')
})
self.addEventListener('install', function (e) {
console.log('service worker install')
})
self.addEventListener('activate', function (e) {
console.log('service worker activate')
})
参照：Qiita
4. Service Workerの登録
3でjsファイルの設置が完了したら、次にService Workerを登録する必要があります。
Webサイトメインのjsから、以下のように/sw.jsを登録します。
self.addEventListener('fetch', function (e) {
console.log('service worker fetch')
})
self.addEventListener('install', function (e) {
console.log('service worker install')
})
self.addEventListener('activate', function (e) {
console.log('service worker activate')
})
参照：Qiita
PWA（プログレッシブウェブアプリ）導入をおすすめするパターン
PWAは特に以下のような目的に適していると言えます。自社の要件と照らし合わせ、PWAのメリットが活きるケースか判断することが重要です。以下に、細かく解説していきます。
開発コストを抑えたい場合
PWAなら安価にアプリのようなサービスが提供できます。大規模なアプリ開発予算が取れない場合でも、PWAなら実現可能な選択肢です。
PWAはネイティブアプリほどの予算を要しないため、資金に余裕がないスタートアップなどにとっては有効な選択肢といえます。アプリ開発が困難な場合でも、PWAなら手軽にアプリライクなサービスを実現できます。
素早くリリースしたい場合
PWAをリリースする場合、アプリストアへの申請や審査が必要なく、手軽にリリースが可能です。
企業によっては、プライバシーや機密保持の観点から、アプリをアプリストアで公開したくないケースもあるでしょう。その場合はPWAが最適です。
アプリストアが求める要件をクリアする必要がなく、審査や手数料もないのでコストやルールを気にすることなく安心して配信が可能です。
頻繁な更新が必要な場合
頻繁に更新をする必要がある場合、ブラウザ上で自動更新できるPWAが適しています。
ネイティブアプリでは、アプリストア経由で手動でアップデートする必要があるため、ユーザー体験の向上にはつながりにくくなります。そのため、頻繁に更新する予定があるのであれば、PWAの導入がおすすめです。
クロスプラットフォームの対応が必須な場合
iOS、Android、Windows、macOSなど、異なるプラットフォームで同じ仕様のアプリケーションを動かすにはクロスプラットフォームが必須になります。
PWAはクロスプラットフォームなので、それぞれの環境ごとに必要となる開発を省き、手軽にWebサイトをアプリにすることができます。ネイティブアプリはiOSやAndroid別々に開発を進める必要がありますが、PWAは分けて開発する必要がないため、クロスプラットフォームの対応が必須な場合はPWAを導入しましょう。
SEO対策が重要な場合
PWAはウェブサイトなので、検索エンジンで自然に表示され、自社サイトを上位表示するSEO対策をすることもできます。表示速度の向上やオフラインでも利用できるなど、ユーザー体験向上にも繋がり、SEO対策を重視しているWebサイトには適しています。
PWA（プログレッシブウェブアプリ）開発の費用
PWAの開発費用相場は、開発規模や機能、開発会社によって大きく異なります。
フリーランスへ外注した場合は5万円〜10万円程度から可能ですが、開発会社へ外注した場合は10万円〜数百万円程度になることも。
また、アプリの内容次第でも費用相場には幅があります。
シンプルな情報閲覧アプリであれば数万円〜、中規模のECアプリになると30万円〜、より複雑な機能を持つアプリになると数百万円〜です。
| PWA | ネイティブアプリ | モバイルサイト | |
| 開発コスト | 数十万円～数百万円 | 数十万円～数千万円 | 数万円～数百万円 |
| 開発期間 | 数週間～数ヶ月 | 数ヶ月～1年程度 | 数週間～数ヶ月 |
PWAは専門的な知識が必要となるため、シンプルなものであれば数十万ですが、一般的なコストは数百万円前後とされています。
ただし、それでもネイティブアプリの1/2〜1/3程度に費用を抑えられる点が大きなメリットで、開発にかかる期間も同時に抑えられます。
比較的に安価に開発をできるPWAですが、開発コストが高くなるパターンもあります。
- 外部アプリやサービスとの連携が必要な場合
- PWA開発に高度な専門性が必要な場合
外部サービスと連携する場合、データの同期やAPI連携の管理が必要になります。また、Service Worker、Webマニフェスト、PushAPIなどに精通したエンジニアが必要になるため、高度な専門性が求められるでしょう。
PWA（プログレッシブウェブアプリ）の導入事例
PWAはすでに多くのサービスで導入されており、効果を発揮しています。代表的な事例を以下で詳しく見ていきましょう。
Uber
UberはPWAを導入することで、アプリの読み込み速度を75%も改善できました。
また、アプリ未登録のユーザーの獲得数も大幅に伸ばすことに成功しています。
UberのPWAはアプリ未登録のユーザーにも気軽にサービスを利用してもらうことを主眼に置いて開発されました。そのため表示速度の最適化に注力しており、アプリ版よりも大幅に高速化を実現しています。
X（旧Twitter）
X（旧Twitter）は世界最大級のSNSとして知られていますが、最近ではPWA版の提供も積極的に進めています。
X（旧Twitter）のPWA版は通信環境が不安定な地域でも、比較的軽快に動作することが特徴です。アプリのダウンロードが困難なユーザーにとっても、ウェブアプリとしてアクセスできるPWAは有効な選択肢となります。
またPWAなら高速表示が可能なため、ツイートのタイムラインをストレスなく快適に閲覧できるのも大きなメリットの1つです。
YouTube
YouTubeは世界最大の動画共有サービスとして知られています。
近年はPWA版の提供を積極的に進めており、2021年には本格的なPWAサービスを開始しました。
YouTubeのPWA版は、オフライン視聴機能が実装されているのが大きな特徴です。インターネットに接続できない環境でも、ある程度は動画を視聴できるのはユーザーにとって大きなメリットです。
またPC版では、ウィンドウをフルスクリーン化できたり、タスクバーへのピン留めが可能になるなど、操作性の改善も図られています。動画サービスにとってのPWAの可能性を示す好事例と言えるでしょう。
Pinterestは画像共有SNSとして有名ですが、近年PWAへの移行を進めています。PWAへの切り替えにより、モバイルサイトのパフォーマンスが大きく改善しました。
具体的には、ページの読み込み時間が40%短縮されユーザーの長期滞在率が5%向上するなど、継続利用度のアップに成功しました。また広告収入も2%増加するなど、事業面でのメリットも得られています。
PinterestはJavaScriptのファイルサイズ削減など、表示速度を重視したPWA開発を行った結果、平均的なスマートフォンでも快適に利用できるサービスを実現しています。長時間の画像閲覧に適したUIはPWAの強みを活かしている良い例と言えそうです。
Spotify
Spotifyは音楽ストリーミングサービスの先駆けとして知られていますが、近年PWAへの移行を進めています。PWA化により、ウェブサイトの読み込み速度が大幅に改善されました。
また、サービスのアイコンをホーム画面に登録できるようになったことで、ユーザーはアプリのように気軽にSpotifyを利用できるようになりました。オフライン再生機能もPWAなら実現可能で、ユーザーエクスペリエンスの向上につながっています。
音楽ストリーミングサービスにとって表示速度は重要です。SpotifyのPWAは、快適な操作性と利便性の提供に大いに貢献していると言えます。
まとめ：PWA（プログレッシブウェブアプリ）は注目の次世代アプリ
PWAとは、ウェブサイトをより使いやすくアプリ化したものです。
PWAならアプリのような操作性と高機能を、アプリ開発に見合うコストをかけずに実現できます。代表例としては、高速表示、プッシュ通知、オフライン動作などの機能を簡単に搭載可能です。
今や主要なサービスもPWAを導入し、ユーザーエクスペリエンス（UX）の改善や業績向上の効果を上げています。ウェブサイトの強化において、PWAはもはや選択肢の1つではなく、必須の存在と言えるでしょう。
流行らない理由は先述したデメリットもありますが、まだまだ認知度が低い点も挙げられます。
新しい技術を使って開発をしたいと考えている方や、PWAについてさらに知りたい場合は、ぜひJitera社にお問い合わせください。様々な実績から最適なものをご提案できます。お困りごとがあれば、お気軽にご相談ください。
