Webを取り巻く技術は、環境に合わせて進化しています。とりわけ、ページ速度はユーザー体験(UX)とも密接に関わってくるため、多くのWebサイトがいかにページ速度を早くするかを競っています。

しかし、今回紹介するプログレッシブWebアプリという技術を使ってWebアプリケーションを実装すれば、ページが高速化するだけでなく、ネイティブアプリのようにオフラインでも利用できるWebサイトを構築することができます。

今回は、プッシュ通知まで使えると話題のプログレッシブWebアプリについての基本知識をご紹介します。

PWA(プログレッシブWebアプリ)とは？

app.jpg
イメージ画像 / Rawpixel

*PWA(プログレッシブWebアプリ)*は、スマートフォンやタブレット上で、Webブラウザで動かしているWebアプリケーションをネイティブアプリのように扱える技術のことです。

従来、ネイティブアプリを作成するにはswiftやJava、Objective-Cといった、Webデザイナーが普段使う言語とは別の言語や考え方を学ぶ必要がありました。

しかし、PWA対応のWebサイトを作成すれば、ネイティブアプリで利用できるプッシュ通知やカメラ機能、オフライン利用なども利用できるようになります。

Web
アプリ 		ネイティブ
アプリ 		PWA
処理速度 通信速度
に依存		 速い 速い
インストール 不要 必要 必要
更新 不要 必要 不要
開発
コスト		 普通 高め やや高め
オフライン
対応		 × ○ ○

これまで、Web技術は環境に合わせて独自の進化を遂げてきました。その端緒となるのがレスポンシブデザインです。レスポンシブデザインは、デスクトップで閲覧できるWebサイトを、端末の横幅に応じて多端末に対応させることで、モバイルにおける閲覧時の問題点を解決してきました。

一方、モバイル向けのWebアプリケーションの開発がこれまであまり活性化してこなかったのは、主にブラウザの制約が大きかったように思われます。

例えば、プッシュ通知やカメラ機能などをブラウザから直接操作できるかは、ブラウザのキャリアやバージョンによっても異なります。

しかし、PWAの対応ブラウザが増えることで、オフライン対応できたり、プッシュ通知が可能になります。ホーム画面から起動するときのUXも向上するので、ユーザーエンゲージメントも高まる可能性もあります。

PWAに関する基本用語

それでは、PWAを実装するには、何が必要なのでしょうか。ここでは、一般的にPWA対応のWebアプリケーションに必要な各種ライブラリ・フレームワークなどを紹介していきます。

1. Service Worker

1.png

Service Workerとは、PWA実装のかなめとなる、ブラウザがWebページとは別にバックグラウンドで実行するスクリプトです。

Service Workerを使うことで、プッシュ通知やバックグランド同期が利用できるので、Webアプリでもオフライン利用ができ、ネイティブアプリにかなり近い挙動を実装することが可能になります。将来的には位置情報の利用なども利用可能になると言われています。

Service Workerの対応状況は、Is service worker ready?という情報サイトで確認することができます。

ただし、注意点もいくつかあります。未対応ブラウザでは動かないという点に加えて、Service WorkerはHTTPS接続が必要になります。環境構築を行う際には、HTTPSで提供されているGitHub Pagesを利用するとよいでしょう。

Googleの開発者向けブログであるGoogle Developersでは、Service Worker の紹介で詳しいインストール方法などが紹介されています。

参考：
パケット容量がいっぱいでも安心！「オフラインファースト」なホームページを作る3つのメリットと実装方法

2. Webアプリマニフェスト (WAM)

2.png

*Webアプリマニフェスト (WAM)*は、モバイル端末のホーム画面などにWebアプリアイコンを設置する際、起動時の外観などを指定することができるJSON形式のファイルのことです。WAMは基本的にどのWebサイトでも利用できますが、PWAには実装が必須とされています。

Google Developersのウェブアプリ マニフェストで紹介されているように、マニフェストは非常に短いテキストファイルを作成し、「manifest.json」という名前をつけるだけです。このテキストデータの中に、スプラッシュ画像(起動時に現れる全画面画像)やアイコン、テーマ色などを指定します。

参考：
Web App Manifest | MDN

3. アプリケーションシェル (AppShell)

3.png

*アプリケーションシェル (AppShell)*とは、WebサイトのHTMLファイルをネイティブアプリのように瞬時に読み込めるようにする、PWAを構築するためのHTML・CSS・JavaScriptの特殊な構造のことを指します。

ネイティブアプリは、通常のWebサイトとは違って、画面遷移をすることなく、ヘッダーとフッターの間のページが切り替わっているように見えます。このページ遷移しない「骨子」のことを、アプリの「シェル」と呼びます。

Service Workerでシングルページのアプリケーションを構築する際には、AppShellアーキテクチャでページを構築することで、JavaScriptで各ページの動的コンテンツを読み込み、オフライン環境でも高速で利用することが可能になります。

Google DeveloperのAppShellモデルでは、AppShellで作成されたHTMLのサンプルを確認することができます。また、npmでもAppShell Generatorと呼ばれるスクリプトが配布されているので、活用してみるとよいでしょう。

4. Firebase

4.png

Firebaseは、データストレージやユーザー管理など、アプリケーションのサーバー側で処理が必要となる機能サービスを提供している、Google Cloud Platformの機能の一つです。

Firebaseはもともと埋め込み可能なリアルタイムチャットサービス(FireChat)の機能提供として始まりましたが、多くのユーザーが他の分野のアプリでリアルタイムにデータを同期するためにしようしたため、このサービスが切り離されました。

FirebaseをPWAに実装することで、オンライン時にページ遷移をすることなくリアルタイム同期を行うことが可能になります。vuefireと呼ばれる、Vue.jsでFirebaseを利用するツールも登場しています。

5. Workbox

5.png

Workboxは、Google Developersで配布されている、オフライン開発用のツールキットです。Workboxを使うことでキャッシュ操作が簡単になります。webpack、gulp、grunt、npmの各種タスクランナー・ビルドツールで利用可能です。

6. Lighthouse

6.png

LighthouseはGoogle Chromeの拡張機能およびコマンドラインで実行できる、Webアプリのパフォーマンスレポートを生成するツールです。コマンドラインではNodeモジュールとしてインストールする必要があります。

Lighthouseを活用することで、開いているページに対して各種パフォーマンスのテストを実施することができます。LighthouseはすべてのWebページに対する品質チェックを行うことができますが、PWA機能のチェックに重きを置いているので、PWA開発には欠かせないものになっています。