PWA ～ネイティブアプリのようなウェブアプリ～

PWAとは

プログレッシブウェブアプリ(Progressive web apps)は
ネイティブアプリのように振る舞うウェブアプリの事を指しています。

これはGoogleが始めたもので、FIREとよばれる4つのユーザー体験を提供する事を目的としています。

FIREとは

• Fast: パフォーマンスの良い、軽快な動作
• Integrated: OS と統合されたユーザー体験
• Engaging: Web サイトの価値向上 高速で信頼性の高いエンゲージメント

最も印象的な機能はインストール機能です。
PWAはアプリストアを通さずにアプリをインストールでき、
ネイティブアプリと同様にホーム画面にアイコンを表示できます。

ユーザーはお気に入りのウェブアプリをホーム画面のアイコンから起動する事ができます。

導入しているサイトとしてはTwitter, Qiita, アメーバブログなどがあります。

メリット

前述したインストール機能を含めて、メリットとしては以下が挙げられます。

• アプリストアを通さずにインストールができる
• オフラインでも機能させる事ができる
• プッシュ通知が行える
• 表示速度を向上させられる

デメリット

デメリットとしては以下が挙げられます。

• iOS(safari)ではバグやPush通知不可などの致命的な欠点がある
• インストール数の管理が出来ない
• Push通知に許諾が必要となり、ユーザーにストレスのかかるUXになりやすい
• PWAに対応した広告商材が少ない

PWAの構成

主な構成要素は3つあります。

SSL対応済のウェブアプリ

HTTPSに対応していないウェブアプリの場合、PWAではエラーが発生し有効になりません。

Service Worker

アプリの振る舞いを制御するJavaScriptを指します。
これはアプリ内で実行されているJavaScriptとは別スレッドで動作する為、
Service Workerでアプリ内のDOMにアクセスする事はできません。

Manifest

PWAの設定(アプリのスコープや
概要、言語、サムネイル、表示方式など)を行うJSONファイルです。

この3つを揃えるとPWAを開始できます。

開発に便利なツール

Workbox

Workboxは利用する事でService Workerのコードを生成してくれるGoogle製のライブラリです。
ドキュメントが充実しているので、導入しやすくなっています。

PWA Builder

PWA Builderはマイクロソフトが提供している開発ツールです。
SSL化されているWEBサイトであればこのツールを利用してPWA化する事ができます。

まとめ

いかがでしたか？

今回は、WEBアプリとネイティブアプリの中間的な位置にあるPWAをご紹介しました。

ネイティブアプリを作りたいけどコストを抑えたい/お試しでやってみたい。
そんな方はまずはPWAで開発してみてはいかがでしょうか。
WEBアプリ → PWA → WebViewネイティブアプリ → ネイティブアプリという具合に段階を踏むのもオススメです。

＼　ログインしなくても検討機能が使える♪　／

新着のエンジニア案件を見てみる