ユーザーがWebページを見る機会が減少し、アプリケーションの開発競争が激化しているなか、Webページをアプリケーションのように利用できる技術「PWA」が注目されています。このPWAによりユーザー体験は大きく向上。アプリのインストールやオンラインネット環境は必須のものではなくなりました。

PWAとは何か、注目の背景やメリット・デメリットなどについて解説します。

PWAとは

PWAとは「Progressive Web Apps（プログレッシブウェブアプリ）」を略した言葉で、WebページやWebアプリをスマートフォン向けのアプリのように利用できる技術のことです。

• アプリをインストールしなくてもスマートフォンのホーム画面にWebサイトのアイコンを表示できる
• プッシュ通知設定も可能
• Webで表示されたページデータを一時的に保存するキャッシュ機能も搭載
• キャッシュが完了するとネット環境なしで閲覧できる

このように、PWAにはさまざまなメリットがあります。

レスポンシブとの違い

よくある間違いで、PWAと“Webサイトのレスポンシブ化”が混同される場合があります。レスポンシブ化はWebサイトをパソコン・タブレット・スマートフォンそれぞれに適したサイズで表示する技術を指すもので、両者の性質はまったく異なるものです。

PWAは、Webブラウザで展開するコンテンツと、スマートフォン向けに開発されたネイティブアプリ双方のメリットを併せ持った技術です。今後、PWAに対応したWebページやWebアプリの開発は加速していくでしょう。

PWAの利用・開発環境が普及

PWAが注目を集めている主な理由には、以下の2点が挙げられます。

• PWAの利用環境の整備
• PWAに対応したNoCodeの登場

PWAはもともとAndroidのみしか利用できませんでしたが、iOSもバージョン11.3からPWAに対応。利用できるユーザー層が急速に広がりました。

また「Glide」や「Adalo」といった、PWAに対応したNoCode開発が普及していることも注目される要因のひとつです。PWAに対応したNoCode開発により、深いプログラミング知識のない非エンジニアでも質の高いユーザー体験を提供できるようになってきています。

PWAとネイティブアプリ・Ｗebブラウザとの違い

PWAは、これまでのアプリやWebブラウザでのみ表示されるページとは異なるものです。

まず、ネイティブアプリとPWAでは、インストールの有無や開発のしやすさが異なります。また、ＷebブラウザとPWAの大きな違いは、キャッシング機能による読み込み速度やネイティブアプリのようなユーザー体験に見られます。

アプリとの違い

開発・運営側、そしてユーザー側。両者から見たPWAとネイティブアプリの違いは以下の通りです。

ユーザーから見ると、PWAはインストールの手間を省きつつ、ネイティブアプリのようにタップのみで簡単に起動できる、利用の手軽さが大きな魅力となるでしょう。

開発者側としても、各プラットフォームの開発審査工程や手数料の支払いが省かれ、PWAの方がより効率的に開発運用に取り組めるというメリットがあります。

Webブラウザとの違い

続いて、PWAとWebブラウザの違いを見ていきましょう。

PWAとWebブラウザでは開発環境に大きな差はありませんが、リーチのしやすさに違いがあります。Webブラウザはブラウザを開き、検索して、目的のページにたどり着かなければサービスを利用できません。一方、PWAはスマートフォンのホーム画面にアイコン化できるため、モバイルユーザーに効率的にリーチできます。

ユーザーから見ると、ブラウザから起動させる必要がなく、ネイティブアプリのように気軽に起動でき、ネット環境なしでも利用できるPWAは使い勝手がよく感じられるでしょう。

PWAでできること

PWAの代表的な機能として、以下の4つを解説していきます。

• プッシュ通知
• 端末へのアイコン設置
• キャッシュの利用
• URLでもアクセス可能

PWAは、ネイティブアプリの特徴であるプッシュ通知やホーム画面へのアイコン化に加え、読み込み速度を向上させるキャッシュ機能やURL経由でのアクセスも可能です。

プッシュ通知

プッシュ通知機能とは、アプリケーションのお知らせを自動で通知して表示する機能のことです。例えば、SNSやメールなどの新着メッセージやお知らせは、プッシュ通知としてスマートフォンの画面に表示されます。

プッシュ通知はアプリを起動していない状態でも機能するため、Webブラウザよりもユーザーとの接触回数を増やすことができます。そのため、マーケティング施策の一環としてもPWAは注目されているのです。

端末へのアイコン設置

スマートフォンやデスクトップのホーム画面にアイコンとして設置できることも、PWAの大きな特徴です。ネイティブアプリのようにアイコン化され、ユーザーはアイコンのタップのみで起動が可能になります。

このアイコン化により、検索エンジンなどの外的要因に左右されることなくユーザーにサービスを提供できるようになるため、Webページへのアクセスやコンバージョンの拡大も期待されます。

キャッシュの利用

キャッシュ機能とは、Webで表示されたデータをデバイスに一時的に保存しておくことで、Webページの表示速度を上げる仕組みのことです。キャッシュした時点のページデータが保存されるので、Webページが更新されると反映されなくなってしまいますが、キャッシュが完了したページは表示スピードも速く、オフラインでも閲覧が可能になります。

また、表示速度のアップは検索エンジンからの評価にもポジティブな影響を与えるものです。Webページ自体の評価向上にもつながるでしょう。

URLでアクセス可能

PWAはネイティブアプリのように利用できますが、その性質はWebサイトであるため、URL経由でもサービスにアクセスできます。URLのみで共有が可能なため、ページの拡散性も損なわれることがありません。もちろん、検索エンジンからもアクセスできます。

PWA導入のメリット

PWA対応のWebページのメリットを、「開発・運営側」「ユーザー側」、双方の視点から解説します。

開発・運営側のメリット

開発・運営側の視点に立つと、PWAにはさまざまなメリットがあることがわかります。

●ユーザーに利用してもらう機会が増える

PWAはアイコン化・プッシュ通知・URLでの共有など、Webブラウザやネイティブアプリと比べてユーザー利用のチャネルは多岐にわたります。これにより、サイトへの流入増加、およびエンゲージメントの向上が期待されます。

●ネイティブアプリよりも開発運営コストを抑えられる

ネイティブアプリはGoogleやAppleのプラットフォームに依存した開発を余儀なくされるため、審査工程や手数料の支払いが発生します。一方、PWAは既存のプラットフォームに依存していないため、自由度の高い開発を実現でき、運用コストも軽減できます。

●マーケティングに活用できる

PWAによるプッシュ通知機能は、ダイレクトマーケティングやリターゲティングマーケティングにも活用できます。マーケティング戦略の幅を広げるという意味でも、PWAは注目されている技術です。

ユーザー側のメリット

ユーザー側も、PWAによるメリットを十分に享受できます。

●ホーム画面から簡単にアクセスできる

ブラウザを立ち上げることなく、タップひとつでWebページを開けるようになるほか、キャッシュ機能の活用でネット環境に左右されずに利用できるようになります。

●情報を共有しやすい

ユーザー同士の共有のスピード感は、快適にWebを利用するうえで重要なポイントとなるものです。相手にURLを送信するだけで共有できるスピード感は、ユーザー体験の向上に大きく寄与するでしょう。

PWA導入のデメリット

注目を集めるPWAですが、まだまだ課題も残されています。こちらも「開発・運営側」「ユーザー側」、両者の視点から確認していきましょう。

開発・運営側のデメリット

開発・運営側から見たPWAのデメリットは以下の3つです。

●開発コストがかかる

PWAはプラットフォームに依存しないため、ネイティブアプリよりも開発コストは下がりますが、Webブラウザのみでの展開と比較すると若干開発コストがかかります。基本的な設計は大きく変わりませんが、プッシュ通知やアイコン化など、PWAの特徴を反映させるための開発が追加で必要になるためです。

●普及率がまだ低い

普及率がまだそれほど高くないこともデメリットとなりえます。普及率が低いと開発事例やGitHubなどでの開発情報も少ないため、導入に難色を示すプロジェクトもあるでしょう。

●アプリストアから新規ユーザーを獲得できない

Google PlayやAppStoreでは、PWAは取り扱われないため、アプリストアから新規ユーザーを獲得することはできません。ネイティブアプリとPWA、両方の運用も可能ですが、その分コストもかかってしまいます。

ユーザー側のデメリット

ユーザー側から見たPWAのデメリットは以下の2つです。

●更新やアップデートに弱い

キャッシュ機能を用いることで、PWAは素早い読み込みやオフラインでの利用を可能にしています。しかし、Webページの更新やアップデートが行われると、キャッシュされたデータの一部は使えなくなります。また、キャッシュデータはデバイスに保存されるため、データ容量が重くなると動作が遅くなる可能性もあります。

●iOSの機能不足

現在、PWAはiOSにも対応していますが、iOS14ではプッシュ通知とバナー通知は対応外となっています。iOSユーザーにとってのPWAの使用感は、まだまだ発展途上の段階にあるといえるでしょう。

PWAの作り方

PWA開発では、主にHTML、CSS、JavaScriptが使われます。開発する際は、PWAの機能を段階的に導入できるため、モバイルアプリ開発と同様の要領でPWA化が可能です。

PWA開発で欠かせないのがService Workerと呼ばれるJavaScriptの活用です。Webページを作る部分とは別に、Webブラウザがサーバー側で動くよう指示するために使用されます。

このService Workerの活用で、主なPWA機能の実装が可能になります。

• オフライン対応
• プッシュ通知
• キャッシュ機能

なお、PWA技術を開発したGoogle Chrome DevelopersがYouTubeで提供している「Progressive Web App Training」でも、PWA開発について解説されています。

Webサイトの可能性を広げるPWA

ネイティブアプリとWebブラウザのメリットを兼ね備えたPWAは、今後も注目を集める技術となるでしょう。またNoCodeでPWA開発が可能になるなど、開発の難易度も下がってきています。ユーザー体験の向上のため、エンジニアにとってPWA開発のスキルは今後欠かせないものとなっていくかもしれません。