モバイルアプリについて学ぼう（PWA：プログレッシブウェブアプリ）

モバイルアプリには大きく分けて４種類あることが発覚しました。

• PWA（プログレッシブウェブアプリ）
• ネイティブアプリ

• Webアプリ

• ハイブリッドアプリ

今回は「PWA（プログレッシブウェブアプリ）」について学んでいきます。

PWAとは

PWAとは「Progressive Web Apps（プログレッシブウェブアプリ）」の略で、PWAはデスクトップ機器とモバイル機器を含む標準に準拠したWebブラウザを備えたあらゆるプラットフォームで動作することを目的としています。
アプリのダウンロードが必要なく、アプリの動作速度を高める「キャッシュ」という技術が備わっているので、インターネット環境が悪くても利用可能です。
ホーム画面へのアイコン設定やプッシュ機能の通知など、これまではネイティブアプリでしか利用できなかった機能をブラウザ上で利用できます。

PWA（プログレッシブウェブアプリ）の特徴

• オフラインでも使える
• プッシュ通知の機能が使える
• ホーム画面にアイコンを表示できる
• Webサイトを高速に表示する

「アプリストアからインストールする必要がない」という点を除けば、PWAは私たちが日常的に使うネイティブアプリと同じような特徴を持っていることがわかります。

主な言語

Web標準技術(HTML、CSS、JavaScriptなど)
Vue.js、React、Angularなどのフレームワークを活用することで、効率的な開発が可能です。

メリット

• ホーム画面からアクセスできる
  PWAはホーム画面にアイコンを表示できるため、Webサイトへのアクセスがスムーズになります。
  ブラウザにはブックマーク機能がありますが「ブラウザを開く→ブックマークを開く→目的のWebサイトを探して開く」という操作が必要です。
  PWAの場合は1回のタップでWebサイトを開けるため、ユーザーは楽にアクセスできるので、明確なアクセスの目的がなくても、ホーム画面でアイコンが目に入ったからという開くこともあるでしょう。

• アプリストアを利用する必要がない
  PWAはWebサイトから直接インストールできるため、アプリストアを利用する必要がありません。
  PWAでのインストールは、ブラウザでWebサイトを閲覧している際に行い、操作方法はブラウザによって異なりますが、一般的にはメニューから「ホーム画面に追加」などの項目をタップすることによりインストールされます。
  アプリストアにアクセスする必要がないため、ネイティブアプリよりも少ない時間や手間でインストールできます。

• 検索からの流入が期待できる
  Googleなどの検索エンジンから流入・インストールが期待できるのもメリットの一つです。
  ネイティブアプリは不要になればユーザーにアンインストールされ忘れ去られる可能性がありますが、PWAは検索でヒットしたことをきっかけにユーザーが戻ってくることも考えられます。

• 開発・コストが削減できる
  ネイティブアプリの場合、iOSやAndroidそれぞれに対応したアプリ開発が必要です。
  iOS用のアプリをAndroidで動作させるといったことはできません。
  ネイティブアプリを開発する際は、iOSやAndroidそれぞれに対応したアプリ開発が必要なので、両方を開発するのか、またはどちらか片方を開発するのか検討する必要があります。
  PWAはOSに左右されないため、1回の開発でほとんどの端末に対応させることが出来るので開発の時間やコストが削減できます。

• プッシュ通知が使える
  プッシュ通知とは、ネイティブアプリからユーザーの端末に通知を配信する機能です。
  PWAでもプッシュ通知が使え、新商品やキャンペーンのお知らせなどを配信することにより、ユーザーがアクセスするきっかけになります。

PWAを介したプッシュ通知はiOS16.4からSafariでもプッシュ通知が届くようになりましたが、2024年2月頃から、AppleがiOS17.4のベータ版でPWAのサポートを廃止していることが明らかになりました。
AppleはPWAのサポート廃止について、「欧州連合(EU)のデジタル市場法に準拠するため」と説明していたのですが、多くの批判にさらされ、サポート廃止を撤回すると発表し、iOS17.4でもPWAのサポートを続ける事になったので、暫くSafari(iOS)でも使用が続くでしょう。

• ユーザーの直帰率が下がる
  「読み込み時間が3秒を超えると閲覧を諦める」というユーザーも存在するほど、Webサイトの読み込み時間は、ユーザーが閲覧するかどうかの判断材料になり、アクセスの機会を逃さないために、読み込み時間は1秒でも短縮したいところです。
  PWAはアイコンをタップしてすぐ起動するため、「直帰率」を下げることにつながります。

直帰率とは
Webサイトにアクセスしたユーザーが最初に閲覧したページでそのまますぐに離脱する割合を示す指標です。
計算式は「直帰率 = 直帰数 ÷ セッション数」

• 通信量・データ容量が少なくて済む
  PWAはネイティブアプリに比べ、通信量やデータ容量が少ないというメリットがあります。
  低速な回線での利用や、低スペックな端末でも利用可能になり、通信制限がかかってしまった場合や、通信環境が良くない場所に行った場合でも問題なく使用できるでしょう。
  また、インストールする際もアプリストアからのインストールよりも軽い傾向にあります。

• 表示速度が早い
  PWAはキャッシュによりWebサイトを表示させるため、表示速度が早いという特徴があります。
  キャッシュとはWebサイトの情報を初回のアクセス時に保管し、必要になったときに読み込んだデータを迅速に取り出せるようにする仕組みです。
  PWAはオフラインでも使えるため、電波の状況に左右されることもありませんし、オフライン時に入力したデータをオンライン時に送信するといったことも可能です。
  ホーム画面からのアクセス時はもちろん、Webサイト内でのページ遷移の際にも、同様に読み込み時間が短縮されます。

デメリット

• Webブラウザに依存する
  PWAはOS別の開発を必要としないのですが、Webブラウザに依存してしまいます。
  「Safari」と「Chrome」では動作に差が出ることもあり、まだネイティブアプリとまったく同じように活用するのは難しいといえるでしょう。

• 利用者数を把握しづらい
  アプリストアからダウンロードしてインストールする必要がないので、ダウンロード数やアンインストールの数を把握することができず、利用者数を把握することが難しくなります。

PWA（プログレッシブウェブアプリ）の開発事例

• Starbucks

• SUUMO

• Spotify

最後に

Google for Developers
「Livestream Day 1: Amphitheater (Google I/O '18)」

2018年のものですが、1:25:10あたりからPWAについて話しています。
そこでスターバックスやGoogleMapsについても軽く説明をしているので、興味があれば見てください。