PWA〈Progressive Web Apps〉とは？PWAの機能と導入するメリットを解説

PWA（Progressive Web Apps）とは、モバイル向けWebサイトをスマートフォンアプリのように使えるようにするための仕組みのことです。

ここでは、PWAの概要や機能、導入するメリット、注意点、日本国内での導入事例について紹介します。

「PWAの機能を導入するか迷う」「SEOに影響が出ないか気になる」など気になる点がございましたら、こちらの無料相談フォームよりお気軽にご質問ください。

PWAとは

PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。

PWAはそれ自体が何か特殊な一つの技術、というわけではありません。

レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。

PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせることができます。

これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

PWAの機能

PWAはアプリ的な側面とWebサイト的な側面を併せ持っています。特徴的な機能は以下の通りです。

①ユーザーの手元の端末にインストール可能

モバイル端末のホーム画面にアイコンを設置できるため、ユーザーはアイコンをタッチするだけでWebサイトを閲覧することができます。

似た機能に「ウェブページのショートカットアイコンをモバイル端末のホーム画面に追加する」という既存機能があげられます。

しかし、PWAは単にショートカットをホーム画面に設置した場合と異なり、後に紹介するプッシュ通知やキャッシュの利用などの機能が備わっています。

また、PWAのアイコンから起動したWebサイトは、URLバーもなくフルスクリーンで表示できますし、起動時のスプラッシュスクリーンも設定できます。

ネイティブアプリのインストールではなくPWA対応したサイトをインストールできることは、サイト運営者にとってもサイトユーザーにとってもメリットがあります。

【サイト運営者側のメリット】

①アプリサイトを経由しないため、アプリサイトの審査不要

ネイティブアプリの場合、GooglePlayやApp Storeなどでアプリを登録する際には審査が必要なため、アプリが配信できるようになるには時間がかかります。

PWAはストアを経由しないため、PWAを実装したサイトをリリースすればすぐにアイコン設置が可能です。

②OSごとの個別対応が不要

ネイティブアプリの実装はOSに依存するため、インストールする端末がAndroidなのかiOSなのかによってアプリをそれぞれ用意する必要があります。

一方、PWA対応サイトはあくまでもWebサイトであり、OSには依存しません。Android、iOSそれぞれに個別対応する必要がないのです。

【サイトユーザー側のメリット】

・通信量、データ容量を食わない

通常のアプリに比べ、PWAではダウンロードするデータ量が少なく、通信量やデータ容量が少なくすみます。

②キャッシュの利用

PWAでService Workerの機能を利用すると、キャッシュの利用が可能になります。

これにより、以下のようなメリットが生まれます。

・ページ表示速度の高速化

キャッシュによってページを先んじて読み込めるため、ページの表示速度が早くなりユーザーがページを移動しやすくなります。

・オフライン対応

インターネットに接続していなくてもキャッシュを利用してページを表示するため、オフラインでもサイトを閲覧できます。

オフラインの間に入力されたデータをオンラインになったら送信するといったこともできます。

③プッシュ通知

Service Workerの機能により、従来のWebサイトではできなかったプッシュ通知が可能になります。

アプリ同様の積極的な通知・呼びかけがWebサイトからもできるようになります。

参考：Service Worker の紹介 | Web | Google Developer

④検索結果やURLから、通常のサイトと同じようにアクセスすることができる

アプリ的な機能が取り上げられがちですが、もともとはWebサイトなので、通常のWebサイトと同じようにアクセスすることができます。

知人とページをシェアするときはアプリとは違いURLを送ればページを共有できますし、検索エンジンからPWA対応のサイトを見つけることもできます。

＼社内展開用に本記事のPDF資料をお使いくださいませ／

PWAをサイトに導入するメリット

これらの機能を備えるPWAですが、実装することで得られるメリットは以下の2点にまとめられます。

①ユーザーエンゲージメントの向上

ユーザーのモバイル端末のホーム画面にサイトのアイコンを設置できるため、ユーザーはより手軽にサイトにアクセスできます。

またサイト側もプッシュ通知を活用することで、一定期間来訪がないユーザーへのアプローチやキャンペーンの通知などを積極的に行うことができます。

これらの取り組みにより、サイトに対するユーザーエンゲージメントを高める事が可能だと考えられます。

②ユーザー体験の改善

PWAによりサイト読み込み速度が飛躍的に早くなり、またオフラインでもサイトを利用する事ができるようになります。

データサイズやインターネット環境などの要因でユーザーの閲覧が阻害されないため、ユーザーがより快適にサイトを利用できるようになります。

0.1秒表示が遅れるごとに売上が1%減ると言われるほど、Webサイトにおいて快適なユーザー体験は重要な要素です。

ユーザー体験の改善によって、間接的にサイト上でのユーザー指標が改善すると考えられます。

参考：　[ブログ記事] モバイルサイト表示速度の重要性と高速化の方法 - Google 広告 ヘルプ

導入事例（日本国内で馴染みあるサービスに限る）

日本国内に限っても、PWAを導入し成果があったサイトがいくつか存在します。ぜひアクセスしてPWAを体験してみてはいかがでしょうか。

Retty（Rettyグルメニュース）

https://retty.news/

実名グルメサービス「Retty」の運営メディア「Rettyグルメニュース」もPWAに対応しています。

モバイル端末で記事を読むストレスを軽減し、ユーザー体験向上を図ることを目的に導入されました。

【実装の成果】

• モバイル向けWebページの高速表示
• プッシュ通知で新着やオススメの記事情報をお知らせ
  

参考：　実名グルメサービスRetty、PWA対応により「Rettyグルメニュース」の表示速度を高速化

日経電子版

https://r.nikkei.com/

日本最大級の経済紙である日経の電子版サイトです。毎月900本の記事を配信し、無料会員も含めると300万人に閲覧されている日経電子版では、ページ速度の改善などを目的にPWAを導入しました。

【実装の成果】

• モバイルに比べパフォーマンスが2倍に改善
• PC版と比べるとSpeed IndexとStart Renderが3分の1に短縮

参考：日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa // Speaker Deck

SUUMO

https://smp.suumo.jp/

日本の大手物件検索サイトもPWAに対応しました。毎月4,000万人が物件を検索するサイトで、その多くがモバイルユーザーです。

【実装の成果】

• 読み込み時間が75%減少
• プッシュ通知の開封率は31％

参考：　Suumo | Web | Google Developers

PWAの注意点

①アプリストア経由で新規ユーザーに接触できない

PWAは基本的に、Webサイトを訪問したユーザーに直接インストールしてもらいます。

ネイティブアプリのように「アプリストアで偶然見つけてもらう」ということはありません。

Webサイトとネイティブアプリを運用していれば、Webからもアプリストアからも新規ユーザーを獲得する機会があります。

しかし、ネイティブアプリを持たずWebサイトにPWAを実装させた場合、アプリストアなどで新規ユーザーを獲得する機会は得られません。

ネイティブアプリも運用しながらPWAも導入することももちろん可能ですが、その場合はネイティブアプリとPWAの両方を維持・運用するためのコストも二重になります。

ネイティブアプリとの兼ね合いについては検討が必要です。

②iOSでは一部機能が制限される

iOSはiOS11.3からService Workerへのサポートを始めましたが、Androidに比べると一部の機能が制限されています。

【制限される機能の例】(2023年11月現在)

• オフラインのデータ容量が制限される（50メガバイト）
• PWAのインストールを促すバナーが使えない

参考：iOSの11.3からのPWA対応でできるようになったこと

まとめ

WEBページでありながらアプリのような機能を持ったPWAにより、ユーザーへのアプローチができる、ユーザー体験を改善できるなど、Webサイトの可能性が広がりつつあります。

以前はiOSに対応しておらず国内ではなかなか広がらなかったPWAですが、Safari11.1がService-Workerに対応し、iOS 16.4からプッシュ通知が使えるようになったことで、今後様々なサイトで実装が進むと考えられます。

※PWAの実装方法の詳細はこちらのページをご覧ください