オフラインファーストなホームページを作る3つのメリット

1. 接続できないイライラを解消できる

annoy.jpeg

スマートフォン端末でインターネットがうまく繋がらないと、どうしてもユーザーはイライラしてしまいます。
たとえどれだけページを軽量にしたとしても、外的な要因ですばやく読み込めない場合もあります。

しかし、そうした場合にオフライン対応していれば、先にキャッシュやクッキーから表示できる部分だけ読み込んでおき、インターネットに接続したら一部をバックグラウンド更新するということもできるようになります。
なかなかページが表示されないのはUXの悪化を招きますが、オフラインファーストなホームページを作成すれば、少しでもそうしたイライラを解消することができるのです。

2. 読み込み速度も改善される

ipad.jpg

オフラインファーストに対応したホームページを作成することができれば、ブラウザに保存するキャッシュなどを利用することになるので、結果的にすべてのファイルをゼロから読み込む必要がなくなり、表示速度も速くなります。

例えば、のちほど紹介するService Workerという技術を使うことができれば、ページの表示速度が最高約10分の1にまで短縮することができます。

3. オフラインでも安心

mozilla.jpg

もちろん言うまでもありませんが、オフラインファーストなホームページではインターネットに接続していない環境でもスムーズに表示することができます。
接続がうまくいかなかったときに、Firefoxブラウザの恐竜でゲームをして暇つぶしをする必要もなくなります。

オフラインファーストなホームページにする方法

1. Service Workerを使う

serviceworker.jpg

Service Workerとは、Webページの裏側で働く独立したJavaScript環境のことです。
Service Workerを使うと、Webページのオフライン対応をはじめ、プッシュ通信などこれまでのWebではできなかったことを実現することができます。
また、Webページを開かなくとも、バックグラウンド通信によって最新の情報に更新することができます。

一度Service WorkerがWebページからインストールされると、Webページとは独立したライフサイクルの中で作動します。
例えば、オフライン状態でも、Webページを表示していたタブを閉じても、必要があればService Workerが作動します。

しかし、Service WorkerはWebページ側のDOMに直接アクセスすることができない、永続的に接続をすることができないなどのデメリットもあります。

Service Workerの具体的な仕様に関してはここでは割愛しますが、昨年から大きく注目を集めている技術のひとつです。
具体的な実装方法が知りたい方は下記の記事を参考にしてみてください。

参考：
Service Workerの紹介｜Google Developers
Service Worker、はじめの一歩｜CodeGrid

2. JavaScriptプラグイン「upup」を使う

upup.jpg

現在もっとも簡単にオフラインファーストが実装できるのが、upupと呼ばれるプラグインを導入することです。

このプラグインはモダンブラウザにも対応しているservice workerを使いながら、初心者でも簡単に導入できる、無料のオープンソースプラグインです。
service workerは仕様が複雑なため、初心者には障壁が高いと感じてしまうようですが、こちらは例えば下記のようなコードで実装することができます。

<script src="/upup.min.js"></script>
<script>
UpUp.start({
　　'content-url': 'offline.html' // 見せたいオフラインページ
});
</script>

たった数行で簡単にオフラインファーストなホームページが作れてしまいます。

3. HTML5のApplication Cache機能を使う (非推奨)

現在では非推奨となっていますが、以前はオフライン対応を可能にするHTML5の使用にApplication Cache API (通称App Cache)というものがありました。
2015年9月末にはMozillaも正式に非推奨となることを発表しており、代替案としてはやはりService Workerを使うことを推奨されています。

参考：
Application Cache API が廃止予定となりました | Firefox サイト互換性情報
HTML5のApplication Cacheを使う｜Qiita