PWAとは？メリットや対応方法を解説！

近年、様々なメディアやサイトが導入しているPWA(Progressive Web Application)。一言で表すと、「Webアプリでありながら、ネイティブアプリのような動作が実現できるもの」となります。つまり、ゼロからスマホアプリを開発し直すことなく、既存のWebアプリを活用し、プッシュ通知や動作の軽量化などが可能になります。

この記事では、PWAとは何か？導入するとどんなメリットがあるのか？導入はどれくらい大変なのか？詳しくご紹介していきます。

PWAってどんなもの？

「Webアプリでありながら、ネイティブアプリのような動作が実現できるもの」とご紹介しましたが、もう少し詳しくPWAのメリットと注意点を挙げると、以下のようになります。

メリット

• スマホのホーム画面にアイコンが表示できる
• プッシュ通知が打てる
• 通信量の軽減を通して、動作を早くできる
• iOS、Androidで開発を分ける必要なし
• SEO対策など、通常のWebサイトと同じ施策が可能
• アプリストアにかかわる審査や手数料などが発生しない

注意点

• ネイティブアプリとあわせて運用する場合はコストが倍
• デバイスやブラウザによってPWAの対応状況が異なる
• アプリストアを通したアプローチができない

Webアプリやネイティブアプリの特徴はどんなものなのか、そしてPWAの位置付けをご紹介していきます。

そもそも、Webアプリ、ネイティブアプリとは？

通常のWebアプリは、ChromeやSafari、Firefoxといったブラウザ上で動作します。たとえば、ブラウザからTwitterやInstagram、YouTubeといったサービスにアクセスすると、Webアプリとしてその機能が提供されます。

Webアプリはインストール無しで手軽に利用できますが、インターネット環境がなければそもそもアクセスができません。たとえば、あるチャットサービスを使っていて、そこに新着メッセージが来ていたとしても、ユーザー自身がブラウザからそのチャットサービスにアクセスしない限りは、新着があるかどうかさえ分からなくなってしまいます。

これらのサービスには、App StoreやGoogle Playといったストアから、端末に直接インストールするかたちのアプリも提供されています。iOSやAndroidなどのOS上で動作するもので、一般にネイティブアプリと呼ばれています。電卓やメモ帳といったWebを利用しないアプリも、全てネイティブアプリです。

ネイティブアプリなら、「新着メッセージをスマホのホーム画面に通知する」「一度見たメッセージのデータを残しておいて、次回サクサク見られるようにする」といったことが可能です。しかし「あらかじめアプリをインストールしなければならない」という点は、ユーザーにとってハードルとなるでしょう。また提供側からしても、アプリをストアに設置する際の料金や審査はネックになってきます。

さらに、ネイティブアプリの弱点として、開発コストが挙げられます。WebアプリはHTML、CSS、JavaScriptなどで開発できますが、iOSアプリならXcodeにSwift、AndroidアプリならAndroid StudioにKotlinなど、それぞれ独自の開発環境や言語を持っています。同じ機能をiOS、Android、Webで提供したい、というだけでも、3種類のプロダクトを作ることになってしまうのです。

PWAとハイブリッドアプリ

そこで、Webアプリとネイティブアプリのいいとこ取りをして、弱点を緩和したい、というのが自然な発想です。アプローチとして考えられたのが、PWA、そしてハイブリッドアプリになります。

PWAは、Webアプリをベースに、ホーム画面への追加、プッシュ通知、オフライン閲覧といった機能を追加し、ネイティブアプリのような動きを実現するものです。ストアを通さずインストール可能で、開発もJavaScriptで出来るため、ユーザー側も提供側もストレスやコストを削減することが可能です。

一方のハイブリッドアプリは、ユーザー側から見ればネイティブアプリと大差はなく、開発手順が大きく異なります。まずJavaScriptなどWeb向けの技術で作り、それを「iOS用」「Android用」それぞれにビルドする、というような手順を踏みます。Webアプリの知識でネイティブアプリが開発できるほか、OS固有の言語も利用できるため、PWAより高度な機能も実現可能となります。

ただし、OSの機能をフルに活用したい、とにかく処理速度が要求される、といった場合には、やはり各OS固有の言語に軍配が上がります。ゲームなど、グラフィックや計算を大量に扱う場合には、PWAやハイブリッドアプリは向かないでしょう。

PWAの対応方法は？どれくらい大変？

最低限これだけは必要！　PWA化の方法

PWA化に最低限必要なものは以下の2つです。

• manifest.json
• Service Worker

また、サイトそのものがHTTPSに対応している必要があります。

manifest.jsonは、アプリの名前や、ホーム画面に追加した際のアプリアイコン、起動時に開くURLといったアプリに関する情報を記述したファイルです。JSON形式で記述します。

Service WorkerはJavaScriptの一種です。通常のWebページ閲覧時にページに紐づいて動作するものとは異なり、ブラウザの裏側で動くことのできるJavaScriptがService Workerと呼ばれます。この特殊なJavaScriptのおかげで、ユーザーがページを開いていないときでも、裏でキャッシュを更新したり、プッシュ通知を送信することができます。ブラウザによって対応状況は異なるため、実装の際は注意が必要です。

Googleが考える「最適なPWA」とは？

PWAの普及はGoogleが中心となって進めており、こちらのページ（英語）で、より良いPWAを構築するためのチェックリストを公開してくれています。実際にPWAを開発する上での重要なポイントが揃っています。ずらっと内容を並べてみますと、以下のようになります。

基本的な要素

• サクサク動作する
• どのブラウザでも使える
• どんな画面サイズでも表示できる
• オフライン時のページが用意されている
• デバイスにインストールできる

最適化するための要素

• オフラインでも動作が可能
• アクセシビリティがしっかり確保されている
• 検索サービスからたどり着ける
• マウス、キーボード、タッチ画面など、どんな入力デバイスからも入力可能
• 通知や位置情報などを使う際、適切にユーザーの許可を取る
• 健全なコードで書かれている

丁寧に作られたWebアプリなら、いくつかの条件はPWA化の前から満たせているはずです。レスポンシブや、アクセシビリティなどの対応が追いついていない……という場合は、あわせて改修を検討してみると良いでしょう。

新規サイトでの対応方法

JavaScriptフレームワークを使う

Vue.jsやReact.jsといったフロントエンドのためのJavaScriptフレームワークや、それらから派生したNuxt、Gatsby、Nextなどのフレームワークには、PWA開発に役立つモジュール・ライブラリが多く存在します。公式チュートリアルが用意されている場合もありますので、技術選定の際にはPWA対応を見据えて比較検討してみてはいかがでしょうか。

生のJavaScriptコードを書く

もちろんライブラリやキット、フレームワークを用いなくてもPWAの開発は可能です。ほかの対応方法と同じく、JavaScriptやService Workerについての知識が必要になります。フレームワークでは簡単に実現できるベストプラクティスも自分で実装することになるので、動作の軽量化などにはより技術が必要となるでしょう。しかし、余計なライブラリでファイルを肥大化させずに、欲しい機能だけを記述することが可能です。

Web Starter Kitを使う

Web Starter Kitは、SassやESLint、組み込みのローカルサーバーといった、Webサイト・Webアプリ制作に便利な機能を一括化したキットです。PWAの基本条件である「オフライン時のページを用意する」も満たしてくれています。

2016年以降は更新がなく、少々古い部分もありますが、開発環境の参考にしたり、JavaScriptフレームワークが使えない場合の土台にするなど、活用は可能です。なお、Node.js、Gulpがあらかじめ必要となります。

既存サイトの場合

チェックリストをもとに改修する

既存のサービスでも、先ほどのチェックリストに沿って改修することで、PWA化が可能になります。どんな改修でも同じですが、大規模なサービスや、長年継続してきたアプリほど工数を多く見積もることになります。

Workboxを使う

Workboxは、Googleが提供するService Worker導入のためのライブラリです。コーディング上の様々なベストプラクティスを利用しやすくまとめてくれていますので、改修のスピードが上がるかもしれません。

またPWA化しても、新規ユーザーは今まで通り、検索や広告などから訪れることになります。ネイティブアプリを作ってストアで公開した方が、新規ユーザーが見込める……といったケースも考えられますので、比較検討してみてください。

導入の際の注意点

PWA化にはService Workerが必須とお伝えしましたが、Internet Explorerなどのブラウザには対応していません。世界で使われている約95%のブラウザで利用可能となっていますが、プロジェクトのサポートするブラウザの範囲をチェックしておくことが望ましいでしょう。

また、PWAをスマホにインストールした際の動作も、OSの種類やバージョンで異なってきます。例えば、プッシュ通知が使えない、キャッシュの許容量が違う、など、思い通りの動作ができない可能性があります。サービスのサポート範囲に基づいて、しっかりテストしていく必要がありそうです。

大きな流れとしては、各社によるPWA関連の機能拡充は年々進んでいます。現在の主流はスマホ向けのものですが、PCでもデスクトップアプリのような動作を実現するデスクトップPWAの流れも盛り上がってきています。PC版Chromeでは2019年リリースのバージョン73からサポートされています。

PWA化された有名事例（まとめ）

Twitter Lite

Twitterは早くからPWAを導入している有名メディアのひとつです。名前にLiteと付いてはいますが、機能が制限されているわけではなく、バックグウンド処理やキャッシュを活用して軽快に動作するように設計されています。実際に通信量が節約できたという報告も多く見られます。

日経電子版（日本経済新聞）

日本経済新聞が運営するWeb版でもPWAが活用されています。Google Developersによる記事では、セッションあたりのPVが2倍、1日あたりのアクティブユーザーが49%増加するなど、かなり大きな施策効果が紹介されています。なおこの記事では、技術的にどのような改善を行ったのかも詳しく解説されています。

このように、大きな成果を出すことも可能なPWA。「インストールできるようにする」「プッシュ通知を送信する」といった機能追加も魅力ですが、Webアプリそのものの動作改善、ユーザー体験の向上といった点に、より多くの選択肢を与えてくれるところが最大の強みでしょう。ぜひ導入を検討されてみてはいかがでしょうか。