スマートフォンでホームページを閲覧することは、現在は一般的な行動となりました。
しかし、こうした日常の中でも、瞬間的に私たちを悩ませている問題があります。
電車の中で電波が届かなかったり、月末にパケット容量を使いすぎて通信制限がかかったりして、ホームページがうまく繋がらなくなってしまう場合です。

インターネット通信を行わないモバイルアプリケーションであれば、インターネットに接続をしているかどうかにかかわらず利用することができます。
しかし、インターネットに接続をしないと利用できない場合は、通信環境が悪くなるとそれだけUXが悪化してしまいます。

UXを高めるほとんどの施策はエンジニア側で操作することができます。
ところが、インターネット環境に関して言えば、ほとんどこちらの打つ手はないように思えます。
結局は外部要因によってUXが低下してしまうのは、避けることはできないのでしょうか。

そのような問題を解決するために注目されているのが、「オフラインファースト」(offline-first)という考え方です。
インターネットに接続していなくとも、キャッシュやクッキーにあるデータを利用することで表示できるものは表示してしまおうという考え方です。

今回は、オフラインファーストの概要を紹介しながら、オフラインファーストなホームページを作る3つのメリットと実装方法をご紹介していきます。

オフラインファーストとは何か？なぜ必要か？

offline.jpg

オフラインファーストとは、一般的なネイティブアプリのようにホームページでもオフラインで利用できるようにする考え方や具体的な施策のことを指します。

オフラインファーストという言葉自体は今から5年以上前の2012年頃には提唱されていた考え方です。
しかし、近年、モバイル端末でのインターネットの閲覧が4分の3を超えているとも言われており、改めてオフラインファーストの重要性が見直されています。

世界規模で考えてみましょう。
インドではスマートフォンユーザーは年々増え始めていますが、実のところまだ回線はほとんどが2G程度です。

India-Internet-Statistics-2020.jpg
▲ Source: How Internet in India Will Look in 2020: 12 Exciting Statistics!

CISCOによれば、急速な技術革新のなかで、2015年に5.1Mbpsだった回線速度は2020年には12.9Mbpsにまで上がるとも言われています。
しかしながら、どんな回線速度でも(もちろんオフラインの場合でも)よいUXを実現するためには、オフラインファーストでホームページを設計する必要があるのです。

(ちなみに2016年時点で世界のインターネット平均速度は6.1Mbps、日本は第9位の17.1Mbpsになっていますが、前年比では日本はあまり速度が速くなっていません)

参考：
Akamai State of the Internet / Q2 2016 Report (pdf)

オフラインファーストなホームページを作る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

まとめ

パケットの通信制限や飛行機搭乗中の機内モード時など、意図していないのに通信に不具合があっても、オフラインファーストにしていれば無事に解決することができます。

単純にオフラインの状況でも閲覧できるだけでなく、オンラインであっても読み込み速度が向上するなどのメリットもあります。
オフライン時の対策がまだの方は、取り入れてみてはいかがでしょうか。