この記事でわかること

PWAの導入を検討しているけど普通のアプリとの違いやメリットが分からないというお客様向けに、下記の内容をまとめてみました。

• PWAとは
• ネイティブアプリでなくPWAを選定する基準

導入

スマートフォン向けのアプリケーションを作る際、通常ならiOSとAndroidのアプリを両方作る必要があります。

これについて、

• 「開発コストが高いなぁ…」
• 「そもそもApp StoreやGoogle Playストアでの公開がめんどくさいんだよなぁ…」
• 「iOSとAndroidのエンジニアを探すのが大変だなぁ…」

などの点から、開発や運用のコストがどうしても高くなりがちです。

ネイティブアプリの開発をする際、「コストを下げて開発を行いたい」、「迅速に柔軟性を持ってWebのような開発を行いたい。」という感情があるもの。
このペインは開発者目線だけでなく、結果的に全て、お客様の利益となってフィードバックされることです。

そんな中、本当にスマホアプリを開発すべきか？Webアプリとして開発するか？という話によくなります。
結果Webアプリで良ければそれで良いのですが、顧客やユーザー目線からすると、

• 「アプリっぽい何か」に対する、慣れ親しみ
• スマホを開いてすぐホーム画面からアプリアイコンで起動できることでの日常的なリーチのしやすさ

などから、やっぱりアプリで開発したいんだよね〜というニーズはあるかと思います。

そこでアプリっぽいものを作りたいけど、上記ネイティブアプリのつらみは避けたい。
そんな場合にPWA(プログレッシブウェブアプリ)という選択肢があります。

PWAとは

PWA（プログレッシブウェブアプリ）はWebアプリをネイティブアプリのように扱える技術のことです。

理解しやすくするため、比較概念として下記を挙げておきます。

Webアプリ

Webアプリとは、ブラウザ上で使えるアプリケーションのことです。
一般的にブラウザで検索して出てくるホームページなどの静的なWebサイトと比べ、よりリッチな動的なアプリケーション動作をするものをWebアプリということが多いです。

ネイティブアプリ

ネイティブアプリとは、iPhoneならApp Store、AndroidならGoogle Playといったアプリストアからインストールして使用するアプリのことです。「アプリ」と聞いて多くの人がイメージするものです。

PWA(Progressive Web Apps)

PWAはネイティブアプリのような体験を提供できる一方で、実質的にはWebアプリの延長線で作れるため、比較的コストが低く柔軟な開発が行えることから、近年導入されることが増えています。

Webアプリと比較して追加される、分かりやすい機能としては以下が挙げられます。

PWAの特徴

デバイスにインストールできる

ネイティブアプリのようにインストールすることができ、ホーム画面に追加されます。
普通のWebアプリは、ブラウザで検索またはURLを指定してアクセスする必要がありますが、ホーム画面でいつでも使用することができます。
また、ネイティブアプリのように全画面で使用できます。

プッシュ通知を送信できる

ネイティブアプリの様に、プッシュ通知を使って、ユーザーに情報を通知することができます。

ストレージの利用と裏で働くサービスワーカー

通常のWebアプリは常に通信を行い、サーバーでページを作成する必要があるため、オンラインでしか使用できません。
PWAでは、ブラウザの裏側で動いているサービスワーカーという仕組みにより、通信できない場合や特定の場合はキャッシュからページを呼び出すなど、より細かい制御ができることで、高速化やオフラインに対応できます。
この裏側で動いているサービスワーカーとブラウザのストレージを組み合わせることで、通常のWebアプリを超えた、ネイティブアプリの様な動作を表現できます。

このように、ネイティブアプリの様な体験を提供できる一方、Webアプリの柔軟性や開発効率の高さのいいとこ取りをできる点が、PWAのメリットとなります。

これまでPWAを選定する諦めとなってたポイント

え、PWAめっちゃいいじゃん。もうよっぽどネイティブ由来の機能が必要じゃないなら、全部PWAで開発しよ…！
初めてPWAについて知った時、私も思いました。

しかしこれまで、致命的な採用を見送る問題がありました。
それは、iOS(Safari)ではPUSH通知ができなかったこと。
これによってアプリを作りたいお客様は、PUSH通知使いたいという場面が多かったので、大体見送られてました。

ただこちら、iOS 16.4以降でついに対応されたのです！
https://webkit.org/blog/13966/webkit-features-in-safari-16-4/

iOS 16.4は2023/3/27にリリースされております。
https://support.apple.com/ja-jp/HT213676

これによって、実際選定するかどうかを議論しやすい状態になってきました。

PWAとネイティブアプリの比較

とはいえ、全ての場合にPWAを使ったらいいという訳ではありません。
ネイティブでしかできないことももちろん存在します。

ここではPWAとネイティブアプリを比較してみます。

PWAの選定基準

では、上記比較を踏まえた上で、本題の、実際PWAはどのような場合に選定できる、した方が良いのか、という部分について検討してみます。

どちらかというと、本当にネイティブアプリでやる必要があるのか、PWAで事足りるのではないか、という視点で考えてみるのがいいかもしれません。

①ネイティブ固有の機能とパフォーマンスが欲しいか

ネイティブアプリは、デバイス固有の機能やパフォーマンスを活かすことができます。指紋スキャン、センサー、NFC、Bluetooth、ジオフェンシング、アプリ間通信、高度なカメラコントロールを活用したアプリや、高速な動作が必要なアプリにおいては、ネイティブアプリの方が適しています。また、最適なアニメーションや画面遷移を提供することが可能で、より良いユーザー体験を演出できます。

一方、PWAも一般的な要件であれば、ネイティブアプリと遜色ないユーザー体験を提供することを目指したものです。上記のようなネイティブ体験がどうしても必須なのかどうかを検討することが、最初の選定基準となるでしょう。

②ディスカバリーとインストールの体験

PWAは、Web上でホストされるため、ユーザーがブラウザで直接アクセスし、インストールすることができます。これにより、アプリストアでの検索やインストールの手間が省けます。また通常のWebページ同様、インストールする前から利用することもできる上、Web検索での発見も期待できます。デメリットとしては、PWAという概念に対するユーザーの認知が低いことで、Webからインストールするというアクションの理解がないことが考えられます。画面上で案内を出すことや、その他適切な方法でユーザーにインストールができることを認識させる必要があります。

一方、ネイティブアプリはアプリストアでのインストールが必要ですが、アプリストアに慣れたユーザーがストアで検索ができることや、レビュー機能を活用することができます。

プロジェクトの目標やターゲットユーザーの行動パターンに応じて、適切なディスカバリーとインストールの体験を選択することが重要です。

③予算とスケジュールは潤沢か

開発予算やプロジェクトのスケジュールも重要な要素です。PWAは、クロスプラットフォームに対応することやWeb技術が使用できることにより、開発コストや時間を節約することができます。

一方、ネイティブアプリは、各プラットフォームに合わせた開発やテストが必要なため、開発コストや時間がかかります。

プロジェクトの予算とスケジュールに余裕がある場合は、ネイティブアプリを選択することができますが、限られた予算や時間であれば、PWAが適しているかもしれません。

終わりに

どうでしょう？なんとなくスマホで動くアプリが作りたい！と思っていたけど、PWAを採用できるケースも十分考えられるのではないでしょうか。

やはり、ネイティブアプリと比較したPWAの開発における迅速性・柔軟性・コストについては、非常に大きなメリットかと思います。
ラズレイトではお客様のニーズに充足するなら、PWAでの開発もお勧めしております。

また、今回は記載しませんでしたが、ハイブリッドアプリという、クロスプラットフォーム対応だけどストアで公開できる、ネイティブアプリにより近く開発できる手法もあります。

個人的には下記順にコストが上がっていくため、どの部分までで機能要件が満たされるのかを検討するのが良いかと考えています。
「通常のWebアプリ」→「PWA」→「ハイブリッドアプリ」→「ネイティブアプリ」

ラズレイトではお客様の要件をヒアリングして、最適な方法を共に検討させていただきます！

ご相談お待ちしております。