ウェブアプリケーション
ほとんどのWebアプリはHTMLを基盤技術としており、WebブラウザはDOMを介してドキュメントへのアクセスを可能にしている。Webアプリに求められる性能が高まるにつれて従来のDOM更新速度が不十分になり、DOM更新に関わるいくつかの技術が登場した。仮想DOM(Virtual DOM)、DOM templating(lit-html)はその例である。
これによってブラウザへはあたかもオンラインであるかのようにプログラムが返され、オフラインのWebアプリ起動が可能になる。
失敗するネットワークリクエストの処理・オンライン復帰時の同期
多くのWebアプリは起動後もネットワークを介した情報のやり取りを行う。オフライン時にはネットワーク途絶によりこれらのネットワークリクエストが失敗する。ゆえに
失敗リクエストの処理(適切に失敗し、アプリを落とさない)
失敗リクエストの保存・破棄
オンライン復帰時の失敗リクエストリトライ
オフラインの間に外部で発生した情報との競合解決・同期
などに対応する必要がある。
例えばGmailなどのメールアプリは、適宜メールサーバーへ新着メールの問い合わせをおこなっている。オフライン時にはネットワーク途絶によりメールの送信ができなくなるが、リクエストを単に破棄すると書いたメールを捨てることになってしまう。失敗リクエスト時にメールを送信待ちリストに加えるのか、あるいは下書きに戻すのかなどが重要な設計項目になる。待ちリストに加える場合はオンライン復帰時の適切な再送信(リトライ)機能が必要である。またオフラインの間にPCブラウザのGmailから下書きを編集し、同時にスマホのGmailからも下書きに別の変更を加えた場合、オンライン復帰時に2つの相反する編集が存在するため、競合を解決・同期しなければいけない。
Webサーバーとの通信(ネットワーク)が途絶している状態をオフラインという。ソフトウェアがオフライン時にも動作するには
ローカルに存在するソフトウェアプログラム
失敗するネットワークリクエストの処理
オンライン復帰時の同期
などが必要とされる。Webアプリは一般にインストール(プログラムのローカルへの保存と組み立て)を必要としないため、オフライン状態ではそもそもアプリのプログラムにアクセスできない。そのためWebアプリではオフライン対応に特別な仕組みが必要になる。オフライン対応を前提としたWebアプリへの標語として「オフラインファースト/offline first」がある。
ローカルに保存されたプログラム
Webアプリでは、ブラウザがWebアプリのURLへrequestを送りそのresponseを実行することでアプリが起動・動作する。よってWebアプリのオフライン対応ではまず、ネットワークrequestをインターセプトしローカルに保存されたプログラムを代わりにresponseとして返す、すなわちプロキシとキャッシュの仕組みが必要になる。現代のWebアプリではService Worker APIのFetchEventとCacheによって実現される。Service Worker内で検知されたfetchEventに応じてrequestを止め、事前のアクセス時にキャッシュされていたresponse(プログラム)をCache storageから取り出しrequestへのresponseとする。