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

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

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

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

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

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

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

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

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

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

▲ 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. 接続できないイライラを解消できる

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

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

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

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

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

3. オフラインでも安心

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

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

1. Service Workerを使う

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と呼ばれる プラグイン を導入することです。

この プラグイン はモダン ブラウザ にも対応している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

まとめ

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

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