はじめに

Webサービスはどれだけ早く表示されるかが、ユーザー体験を高めるために重要だということはよく知られていることだと思います。そこで、新しい技術の中で、Webサービスを高速で提供する方法を探してみました。そんな中で、PWAという形式でWebサイトを構築することが、新しいアプローチとして有効だとわかりました。
そのため、本稿ではPWAの概要について簡単に解説します。

PWA（Progressive Web Apps）とは

PWAはGoogleが提唱しているユーザ体験の向上を目的としている仕組みのことです。
時期としては、2015年の発表から注目をされ始めたようです。
PWAでできることは以下のようなものが挙げられます。

PWAに対応していないブラウザでも通常のWebサイトと同じように動作する
オフラインで（使える機能が）動作する
自動で最新状態へ更新する
プッシュ通知が使用できる
ホーム画面に（そのサイトの）アイコンを追加できる

PWA形式で作成されたサイトは、端末の環境が対応していればネイティブアプリと似た動きをさせることができます。
開発自体は、通常のWebサイト構築と同じく、エディタとGoogle Chrome（のようなPWA対応ブラウザ）があれば可能です。

PWAとしてブラウザに認識させるために必要なこと

Googleの定めているルールは下記の4つ

ユーザーが5分以上間隔を空けて2回訪れるか
HTTPSをサポートしているか
有効なJSONのマニフェストが含まれているか
Service Workerが含まれているか

※他のブラウザも対応してきているので、それぞれの開発元によって条件が変わる可能性があります。

ユーザーが5分以上間隔を空けて2回訪れるか

ユーザが複数回訪れないページでは、キャッシュしても無駄になってしまうためと考えられます。
ユーザが1回だけアクセスするようなWebページをPWA化することは無いと思いますので、この項目はほぼ考えなくてもよいでしょう。
また、サンプルを作成しているときに気が付きましたが、1回目のアクセスでも動いているように感じたので、ルールが変更されている可能性があります。

HTTPSをサポートしているか

Service Workerを使用するために必要なため、HTTPSのページでないと動作しません。

有効なJSONのマニフェストが含まれているか

JSON形式で記述されたマニュフェストファイルで、ホーム画面に追加する際の設定を指定するために記述します。
主なものとしては、ホーム画面のアイコン用の画像、アプリ名、ロード時の背景色、ウィンドウの表示方法といった情報の指定を行います。

Service Workerが含まれているか

Service WorkerはPWAの中核となるものであり、Webページでイベント駆動するJavaScriptの名称です。
プッシュ通知や、バックグラウンドでの同期といった機能を提供しており、特に今回の目的に沿うのは、キャッシュのコントロールができる部分です。
Service Worker自体が魅力的な技術でありますが、単体でもボリュームが大きいので、詳細は省略します。

PWA化のまとめ

ここまでの必要要素をまとめると、httpsで通信できるWebページで、Service Workerを組み込み、JSONのマニフェストを適切に記述すれば、PWAとしてWebサイトを構築することができる、ということになります。
本当にこれだけの設定で実装できるか検証したものを次回の記事にまとめていますので、是非御覧ください。

PWAの今後

AppleのSafariの開発チームがService Workerの導入に着手したという報告があるため、iOSやMacOS端末もPWAを利用できるようになる可能性があります。
MicrosoftのEdgeも、すでにService Workerが使えるようになっています。
ブラウザベースであるため、開発コストを抑えつつ、多くの端末をカバーできる強力な技術であり、近い将来で急激に発展する可能性が高いと言えるでしょう。

次の記事: https://qiita.com/OMOIKANESAN/items/5b23fa8ea9ea0d181df5