私のブログ

yopr.netでは最近、低速回線や一時的な切断でも使いやすくするために、オフライン対応とローカルキャッシュ周りを強化しました。

せっかくなので今回は、実際にかなり遅い回線環境にして、その状態でこの記事を書いています。

テスト環境はかなり極端です。

10 kbps級の通信速度に加えて、遅延も大きめに設定しています。
普通にWebサイトを使うにはかなり厳しい環境です。

1 kbpsでもトップページは表示できた

まずトップページを開いてみたところ、表示開始までは約1.4分、すべての読み込みが完了するまでは約4.7分かかりました。

速いとはとても言えません。

ただし重要なのは、途中でタイムアウトして壊れず、最終的には表示まで完走したことです。

yopr.netでは、単に回線が遅いという理由だけで短時間のタイムアウトを発生させないようにしているため、通信自体が生きていればかなり低速な環境でも粘ります。

でも毎回4分待つのは現実的ではない

もちろん、トップページを開くたびに数分待つのは実用的ではありません。

そこで、キャッシュ済みデータをネットワークより先に利用するlocal-first寄りの動作を追加しました。

実際のテストでは、

1 kbps + 8秒の遅延

という環境でも、キャッシュ済みのチャット履歴は

75ms

で表示されました。

認証APIの応答を待つ前に、端末内に保存されているデータを先に表示します。

つまり、

回線が速いときは普通に最新データを取得し、回線が遅すぎるときは手元のデータですぐ使える状態にする

という動作になっています。

変更がなければ304

チャット履歴については、サーバー上の内容に変更がなければconditional requestを利用し、304 Not Modifiedで済ませるようにしました。

変更されていない履歴を毎回全部ダウンロードする必要がありません。

1 kbpsのような極端な低速回線では、数KBの差でも待ち時間がかなり変わるため、この節約は意外と重要です。

オフライン中でもチャット送信可能

チャットについては、完全に回線が切れた場合にも対応しています。

オフライン中に送信したメッセージは端末内に保存され、ネットワークが復帰すると元のルームへ順番に自動送信されます。

さらに、

重複送信防止
送信待ち一覧の確認
送信待ちの取り消し
ページを閉じた後の再送再開

にも対応しています。

つまり、送信ボタンを押した直後に回線が切れても、メッセージそのものが消える可能性を減らしています。

1 kbpsでもチャットは意外と使える

実際に短いメッセージを送信してみたところ、1 kbps級の環境でも約10秒程度で送信できました。

さらに、かなり長い文章も送信してみました。

当然かなり時間はかかりましたが、最終的には正常に届きました。

画像や動画を扱うには厳しい速度ですが、テキスト中心の通信なら1 kbpsでも完全には死なないというのは少し面白い結果でした。

QRコード生成などはネットを待たない

便利ツールについても、キャッシュ済みであれば遅いネットワークを待たずに利用できます。

たとえばQRコード生成は、Wi-Fiを完全に切った状態でも利用できます。

同様に、パスワード生成などブラウザ内だけで処理できるツールもオフラインで動作します。

ネットワークがない状態では外部サーバーへ通信すること自体ができないため、ローカル処理だけで完結するツールとの相性はかなり良いです。

利用規約とプライバシーポリシーもオフライン対応

利用規約やプライバシーポリシーもキャッシュ対象にしています。

そのため、通信できない状態でも内容を確認できます。

規約ページのように更新頻度が比較的低いページは、オフラインキャッシュとの相性も良いです。

アクセス権がなくなった場合はローカル履歴も削除

local-first化すると、端末内にデータが残ることによる問題も考える必要があります。

そのため、サーバー側でチャットへのアクセス権が取り消された場合は、端末内に保存されている該当履歴も削除するようにしました。

テストでは、

アクセス権取り消し → ローカル履歴削除 → JavaScriptエラーなし

まで確認しています。

今回のテスト結果

現在確認できているものは以下です。

PASS: unchanged chat history uses conditional 304.
PASS: 1 kbps, 8-second latency: cached chat visible in 75ms before auth returns.
PASS: cached tools and QR generation do not wait for slow network.
PASS: cached terms render immediately.
PASS: background refresh replaces history with server changes.
PASS: revoked access clears local history; no JavaScript errors.

つまり、単純な「オフライン対応」だけではなく、

耐低速回線
耐一時切断
ローカル優先表示
バックグラウンド同期
通信量削減

まで含めた動作になりました。

そしてこの記事も低速回線で書いている

ちなみに、この記事自体も低速回線を有効にした状態で書いています。

Webサービスの耐低速対応についての記事を、実際に低速回線で書くという、少し変なテストです。

1 kbpsではさすがに快適ではありません。

ただ、

遅いだけで使える

のと、

一定時間でエラーになって何もできない

のでは大きな違いがあります。

yopr.netは、通信環境が悪いときでも、できるだけ使える部分を残す方向で今後も改善していく予定です。