PWA（Progressive Web App）とは何か？ネイティブアプリとの違いを詳しく解説！
この記事では、PWA（Progressive Web App）についてその特徴や導入の利点などについて分かりやすくまとめてみた。
PWAはAndroid・iOSのネイティブアプリに替わる新たな選択肢のひとつとして、特に開発コストの削減を狙う企業から注目を集めている。
また、Angularにおける実装の例も紹介している。簡単にアプリをPWA化することが出来るので、開発者の人はぜひ実際に試してみてほしい。
PWAとは？PWAで出来る事
PWAは「progressive web application」の略で、Webアプリケーションをまるでデスクトップアプリのように使用するための技術。
インストールされたアプリはWindowsのアプリと同様にデスクトップのショートカット
を作成しすぐに呼び出すことができる。
また、制限はあるもののPWAのアプリはオフラインでも使用することができる。
PWAの利点
PWAを導入する一番のメリットはなんといっても開発コストの削減だろう。
Webアプリケーションをほぼそのまま、デスクトップ・Android・iOSのアプリとして使用することができるのだから、開発の規模は大幅に縮小することができる。
ただし、Webアプリをそのままデスクトップにすれば、使い心地という面ではネイティブアプリには遠く及ばないだろう。
また、クロスプラットフォームのアプリでは、ライブラリを手軽に導入することも難しくなるので、機能が制限されることも多々あるだろう。
PWAとネイティブアプリとの違い
次にPWAとネイティブアプリの違いについて確認しよう。
企業の視点から見た違い
まずは企業の視点から見たPWAとネイティブアプリの違いについて。
- 開発・メンテナンスのコスト
- ディストリビューションが容易
- サーチエンジンに登録可能
開発・メンテナンスのコスト
まず注目したいのは開発やメンテナンスに掛かる工数の違い。
PWAではWebのフロントエンド技術を一通り習得した開発者が数名いれば開発を行えるのに対し、ネイティブアプリを開発した場合は、アプリごとにJavaやSwiftなどそれぞれに必要なプログラミング言語を習得した開発者を雇わなければいけない。
すでに開発したアプリをメンテナンスする際にも同じことが言える。
ディストリビューションが容易
従来ネイティブアプリをリリースする場合はGoogle Play StoreやApple Storeへの登録が必要だった。
登録やアップデートする作業も開発チームへの負担となる。また、Google Play Storeにはすでに似通ったアプリが溢れており、ユーザに自分たちのアプリを見つけてもらうには、ASO（App Store Optimization）と呼ばれるようなテクニックが不可欠だった。
一方、PWAは自分たちのウェブアプリに訪れてもらいそこでアプリをクリックひとつでインストールしてもらう形となるので、ネイティブアプリのような煩わしい作業は必要ない。
サーチエンジンに登録可能
PWAはインターネット上に存在するウェブサイトなので、Googleといったサーチエンジンに登録することも可能である。
Webアプリケーションを訪れる人が多くなれば検索の上位に表示される可能性も高くなるし、上位に表示されるようになればアプリを利用するお客さんも増えるだろう。
ただし、Webアプリはユーザビリティを第一に考えて画面構成を考えるべきなので、SEOで評価されるようような画面を構築するのは難しいかもしれない。
ユーザの視点から見た違い
次にユーザ側から見たPWAとネイティブアプリについて考えてみよう。
- インストールが容易
- 一部のモバイル機能は利用できない
- パフォーマンスの面では劣る
インストールが容易
まず最初に挙げられる点はインストールが簡単であるという点だ。
PWAアプリをインストールするためには、任意のブラウザで目的のサイトを訪れURL入力欄の次に表示されているインストールボタンをクリックすればいい。
インストールの速度はネイティブアプリもよりも数倍速い。
一部のモバイル機能は利用できない
スマートフォンの進化に伴い、モバイルで出来る事も増えている。
例を挙げるなら「携帯電話を使った支払い」や「ユーザ名をタップして直接電話をする」などが挙げられるだろう。これらの技術はネイティブアプリであれば簡単に実装できるが、PWAアプリで実装するのは現時点では難しい。
PWAは発展途上にある技術であり、今後これらの弱点を補うような技術が開発される可能性もあるものの、機能重視のモバイルアプリを開発するならばネイティブアプリを開発したほうがいいだろう。
パフォーマンスの面では劣る
PWAはパフォーマンスの面ではネイティブアプリに劣る。
一般的にJavaScriptを使用するSPA（Single page application）はブラウザで動くことを前提としている、PWAアプリは疑似ブラウザ内でJavaScriptを動作させるためにネイティブアプリと比較するとパフォーマンスの面で劣ることがある。
ただし、これが写真にエフェクトを掛けるなどといった負担が掛かる処理を必要とする場合の話であり、そういった高度な処理が必要ないならばPWAアプリは悪い選択肢ではないだろう。
AngularでPWAを実装する
ここからはAngularをPWA化するための手順を確認しよう。
Angularプロジェクトを作成する
まずはPWAの元となるWebアプリを作成しよう。
Webアプリの内容はどんなものでも構わない。
ここでは例として、クリックする度に色が変わるボタンを配置したアプリを作成した。
AngularアプリをPWA化する
Angularでは、ライブラリを使用してPWAを簡単に実装することができる。
以下のコマンドをターミナルで実行しよう。
ng add @angular/pwaこれにより以下のファイルが自動で作成される。
- manifest.webmanifest
- ngsw-config.json
ngsw-config.json
ngsw-config.jsonはService Workerを起動する際に必要となる設定をまとめたJSONファイル。
Service Workerについて知りたい人はこちらの記事を参考にしてほしい。
manifest.webmanifest
manifest.webmanifestはPWAアプリを開く際に必要となる画像などのリソースファイルをまとめたマニフェストファイル。
また以下のファイルの内容がアップデートされる。
- angular.json
- package.json
- index.html
- app.module.ts
アプリをローカルで動かす
pwaコマンドを実行したら、アプリをローカルで動かしてみよう。
PWAアプリに必要であるService Workerは「ng serve」では動かすことが出来ないので他の方法でアプリを実行しよう。
まずはビルドを行う。
ng buildビルドされたアプリが「dist」フォルダ内に作成されたはずなので確認する。
http-serverライブラリをインストールする。
npm install -g http-serverターミナルで「dist/アプリ名」のフォルダに移動し、http-serverコマンドを実行する。
http-server
生成されたURL（http://127.0.0.1:8080）をクリックして開き、アプリが正常に起動しているか確認する。
正常であれば、デベロッパーツールを開きApplicationタブの「Service Worker」をクリックする。
Service Workerが登録されていることが確認できるだろう。
次にApplicationタブの「Cache Storage」をクリックする。
アプリの再生に必要となるファイルがキャッシュされているのが確認できるだろう。
PWAが正常に動作していれば、URLの入力バーの右端に以下のようなアイコンが表示されているだろう。
アイコンをクリックして「」を選択すればPWAアプリがアプリケーションとして開かれる。
アプリケーションとして開いたPWAアプリは、ショートカットを作成したりタスクバーにピン留めすることが可能となる。