Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【PWA】プログレッシブ・ウェブアプリとネイティブアプリ/ハイブリッドアプリ/ウェブアプリの違い - 連載 【PWA】プログレッシブ・ウェブアプリ 概要 -

  • 連載 【PWA】プログレッシブ・ウェブアプリ 概要 -

f:id:duo-taro100:20160218004611p:plain

第2回 【PWA】プログレッシブ・ウェブアプリとネイティブアプリ/ハイブリッドアプリ/ウェブアプリの違い

前回はプログレッシブ・ウェブアプリ(以下PWA)の概要と個人的な思いを記事にした。

www.sky-limit-future.com

今回はPWAとネイティブアプリ・ハイブリッドアプリ・既存のウェブアプリを比較してみる。
ネイティブアプリ/ハイブリッドアプリ/既存のウェブアプリの特徴と比較については以前の記事を。

www.sky-limit-future.com

この記事の比較内容と同じ、以下の項目で比較を実施。

<開発者視点>

開発コスト・メンテナンスのしやすさ

PWA ◎
ハイブリッド ○
ネイティブ △
WEB ◎

開発するための労力やメンテナンスの労力で比較。
PWAやWEB、ハイブリッドは基本的にクロスプラットフォーム性があり、開発・メンテナンスコストは低くできる。
その中でも、PWAやWEBは開発環境構築もかなり簡単で、そういった面でもハイブリッドアプリより開発・メンテナンスコストは低い。
ネイティブアプリはiOSならSwift、AndroidならJavaとソースを分ける必要があるので、開発・メンテナンスコストは高いと言える。
この項目については、公式ストア(AppleStoreやGooglePlay)を経由しないPWAやWEBアプリの方が利点が大きい。
まずは、公式ストアのルールによる制限がないので開発しやすい。もちろんリジェクトの心配もない。
また、いつでも好きな時にリリース、アップデートが可能なのも大きい。

開発制約

PWA △
ハイブリッド ○
ネイティブ ○
WEB △

開発する際の規制・ルール関連で比較。
これに関しては一長一短な気がする。個人によってどう思うかってところ。
PWAに関しては、現段階で最大の売りの一つであるService Workerを、iOSがサービス対象外としていることが欠点。
このことを考慮した実装が必要になる。現在、iOSも対応する方向で動いているらしいので今後に期待。
また、PWAはネイティブで使える機能をいくつか含んでいるが、やはり使えない機能もある。
ハイブリッドアプリやネイティブアプリは基本的には使えない機能もなく、制約は公式ストアによるものしかない。
その公式アプリの制約もGoolePlayはあってないようなものだし、AppleStoreも慣れてしまえば問題ない。
WEBアプリについては、使える機能に限りがある。

<ユーザー視点>

動作速度

PWA ◎
ハイブリッド ○
ネイティブ ◎
WEB ○

PWAはもともとネイティブのような快適さを求めて提唱されたものなので、動作速度は文句無し。
ネイティブも言うことなし。
ハイブリッドアプリは実装方法によるが、動作速度を求める部分をネイティブ化すればいいし、動作速度に不安はないと思う。
ネイティブでない部分については、若干動作速度が気になることもある。
WEBアプリもある一定の条件下であれば(最近は)動作速度を気にすることは少なくなった。処理が複雑化する箇所では重く感じることも。
ただし、この少し遅く感じる、という箇所がユーザー離れを加速させるので、甘く見てはいけない。

利用環境 (オフライン?オンライン?)

PWA ○
ハイブリッド ○
ネイティブ ○
WEB △

既存のWEBアプリは基本的にはオンライン環境下での利用が普通。
ネイティブやハイブリッドに関してはインストールして使用する分、オフライン環境下で使用できる機能もあるが、オンラインでないとできないものもある。
PWAはService Workerを使うことでオフライン状態でも、最後に取得した情報を使い動作する。そして、オンライン状態になった瞬間に最新情報を取得しに行く。
もちろんどんなアプリを作成するかによって、この項目を重要視するかどうかが変わってくる。
DBからの情報を取得して、それらを閲覧するというアプリなどにとってはかなり重要。

<共通>

公式ストア

PWA ○
ハイブリッド ◎
ネイティブ ◎
WEB △

公式ストア経由での公開には、より多くのユーザーの目に付きやすいという大きなメリットがある。
公式ストアの情報を見てみても、市場はまだまだ大きくなっていくと思う。また、公式ストア経由ではアプリアイコンをホーム画面に落として、そこからアプリへのアクセスが可能。
これによってユーザーの再帰率が全然違うらしい。
一方で、アプリ数もかなり多いのでライバルが多いと見ることもできるかも。ランキング上位に入るのは至難の技。
PWAやWEBアプリは公式ストア経由ではない。ユーザーの目に付きにくいしという点では、現段階ではデメリットのひとつである。
PWAに関してはネイティブなど同じような感覚でホーム画面にアプリアイコンを落とすことができるので、この点は問題ない。
WEBアプリでもホーム画面への追加はできるが、面倒な操作があることでユーザーがそれを渋る可能性が高い。

今後PWAが主流になっていけばPWAのデメリットはほぼなくなると、個人的には思っている。

デバイス機能の利用

PWA ○
ハイブリッド ◎
ネイティブ ◎
WEB △

デバイス機能の利用はネイティブ・ハイブリッドの得意分野で、基本的には全ての機能にアクセスできる。
実装の幅も広がるし、その分ユーザーの求めるアプリに近づけることが容易になる。
WEBアプリはデバイスへのアクセスができないので、使用できる機能に大幅な制限がある。
PWAにもアクセスすることのできない機能はあるが、重要な「プッシュ通知」などが利用できるようになっている。
「プッシュ通知」はユーザーに必要な情報を教えるという点と、再帰率を高めるというWinWin機能。

UI・UX

PWA ◎
ハイブリッド ○
ネイティブ ◎
WEB ○

動作速度の項目と似ている。
PWAはもともとネイティブのような快適さを求めて提唱されたものなので、UI・UXは文句無し。
ネイティブも言うことなし。
ハイブリッドアプリ・WEBアプリに関しては、まだ不足する部分もあるが、あまり複雑でない箇所に関しては気にならないことが多い。

まとめ

以上のように、PWAの欠点といえば
・公式ストア経由ではない
・Service WorkerがiOSでサービス対象外(2017年9月時点)
くらい。Service Workerの問題が解決すれば、もう欠点はないと言っても過言ではないのでは?

次回は【PWA】プログレッシブ・ウェブアプリの特徴