Webアプリの擬似モバイルアプリ化（PWA）について

こんにちは。
NCDCのフロントエンドエンジニアとして、主にモバイルアプリの開発を担当している本田です。

本記事は、多数あるアプリ作成方法の中から最適なものを選択するためのポイントを解説していく連載記事の最後のひとつです。

連載

スマホで動作するアプリの全体像
PWAとは？
- PWAのメリット
- PWAのデメリット
PWAが適しているか否か選択のポイント
まとめ

スマホで動作するアプリの全体像

下図はスマホで動作するアプリの全体像です。これまでの記事でWebアプリとモバイルアプリの違いや、ネイティブアプリとクロスプラットホームアプリの違いを説明しましたが、最後に、Webアプリをモバイルアプリのように利用できる技術PWA（Progressive Web Apps）について説明します。

PWAとは？

PWAは、簡単に表現すると「Webサイト／Webアプリをモバイルアプリっぽく使えるようにするための技術」です。
PWAの正式名称はProgressive Web Apps（プログレッシブウェブアプリ）で、Progressiveは「拡張する」などの意味を持ちます。つまり、PWAは「Webアプリを拡張してモバイルアプリのようにする」ものだと理解してください。

詳しい違いは以前の記事（モバイルアプリとWebアプリの比較）を参照していただきたいのですが、Webアプリはモバイルアプリと比較するといくつか明らかなデメリット（実現できないこと）があります。
しかし、PWAという技術によってそのデメリットを一部克服できるのです。

WebアプリとPWAの代表的な違い

Webアプリはユーザーの端末のホーム画面にアプリを表示できないが、PWAならできる
Webアプリはオフラインでは実行できないが、PWAならできる

PWAの事例としてよくTwitterが用いられるので、Twitterを例に説明します。
下図はiPhoneの画面です。
左のTwitterがPWAのアイコン、右のTwitterがStoreからインストールしたネイティブアプリのアイコンです。このように見た目だけではPWAなのかネイティブアプリなのかまったく差がわかりません。

PWAのメリット

PWAの主なメリットをいくつかご紹介します。

まず、上記の通りアプリアイコンをホーム画面に置けることは大きなメリットになります。繰り返し使ってもらう場合、普通のWebアプリはユーザーに自ら特定のURLを訪問してもらう必要があり使用のたびに手間がかかりますが、ホーム画面にアイコンがあれば１タップでアクセスできるため大幅に使いやすくなります。
同様に、ユーザーに繰り返し使ってもらいたい、または必要な時にすぐにアプリを起動してもらいたいという目的がある場合、PWA化でプッシュ通知できるようになるのは大きなメリットです（ただし現時点ではAndroidのみ対応）。

また、最初に書いた通りPWAは「Webサイト／Webアプリをモバイルアプリっぽく使えるようにする」技術なので、一からネイティブアプリをつくるのと比べると開発期間やコストの大幅な削減が期待できます。
ネイティブアプリと比較すると、App StoreやGoogle Playストアを通さずにユーザーにアプリを提供できることも特長です。PWAはWebサイトから直接インストールできるので、開発側から見れば、リリース時やバージョンアップ時にストアへ申請し審査を受ける手間がなくなります。これも大きなメリットになりえます。

設定次第でオフラインでも実行できることもPWAの特長です。普通のWebアプリはインターネットに繋がっていないと使えませんが、PWAはWebから持ってきたデータをキャッシュ（一時保存）しておけるので、上手にキャッシュを活用するよう設計すればオフラインでの使用も可能です。

PWAのデメリット

ここまでの説明ではPWAがすごく良いものに見えるかもしれませんが、もちろんデメリットも存在します。
簡単にいえば、PWAは未だ発展途上の技術であり、OSやブラウザによって使用できる機能に違いがあることが最大のデメリットです。
PWAは特にGoogleが推しているのですが、今のところAppleは非対応の部分が多くあります（2022年6月現在）。例えば、Push通知はAndroidなら使えるのですが、iOSは対応していないためiPhoneユーザーには通知を届けられません。

他の手法と比較するとPWAは比較的事例が少なく、世に出ている情報も少ないこともデメリットのひとつです。メジャーなもの、確立された技術なら、開発中にトラブルがあったとしても解決策がすぐ見つかりますが、発展途上の技術だとそうはいきません。

世に出ている情報が少ないという点では一般ユーザーにPWAがどんなものか認知されていないこともデメリットです。
先にPWAはApp StoreやGoogle Playストアを通さずにアプリを配信できると書きましたが、一般ユーザーの多くは「アプリ＝ストアからダウンロードするもの」と考えているため、それ以外のかたちでインストールを進められても戸惑う（インストールしない）ユーザーが相当いると考えられます。

PWAが適しているか否か選択のポイント

最後に、PWAを導入するかどうかで迷われている場合の、選択のポイントをいくつか紹介したいと思います。

既にWebアプリがあり、開発コストをできるだけ抑えて機能を拡張したい場合は、PWAは重要な選択肢になります。とくに既存のWebアプリをより頻繁に使ってもらえるようにしたいというような目的の場合は、ユーザーのホーム画面にアプリアイコンを置けて、Androidならpush通知もできることは大きなポイントになると思います。
ユーザーのOSやブラウザをある程度限定できるのであればPWAのメリットを得やすいのではないでしょうか（たとえば会社でAndroid端末を支給していて、従業員が使うOSやブラウザがわかっているなど）。

一方で、Android、iOSの両方に対応する必要がある場合は、各OSの対応状況を調査できるエンジニアがプロジェクトにいないと難しいかもしれません。とくにpush通知やBluetooth等端末側の機能(ネイティブ機能)を利用するような場合は、OSによる違いやバージョンによる違いがわかっていないと、意図した機能が実際は一部のユーザーにしか使えないというような問題が生じかねません。

※実際にはもっと多様な選択のポイントや考慮すべき制約がありますが、この記事ではわかりやすく単純な例を用いた説明に留めています。

まとめ

本記事では、Webアプリの擬似モバイルアプリ化（PWA）についてご紹介しました。

どの手法を採用するか正しく判断を下すためには、アプリに求める機能性、開発コスト、保守のしやすさ、技術の将来性…などさまざまな観点を持って考える必要があります。
そのため、ビジネスサイドの方とITサイドの方、両者が参加するプロジェクトチームで協議するのがお勧めです。外部ベンダーに開発を依頼する場合は実装方式の相談にも乗ってくれるようなパートナーを選定するのが良いでしょう。

NCDCは、モバイルアプリを用いたサービスの全体像を検討するところから、アプリ開発の要件定義、UX/UIデザイン、実装まで一元的にお客様をご支援することを得意としています。
目的に応じた適切な技術の選定からご相談いただけますので、モバイルアプリの開発を検討されている方はぜひお問い合わせください。