オフラインモード

概要

ネットワーク接続がないときにキャッシュされたページを表示し、オフラインモードを JavaScript で制御します。Android と iOS で同じ JS API を使用します。

機能	Android	iOS
オフライン状態の取得	✓	✓
オフラインモードの制御	✓	✓
キャッシュ制御	✓	✓

対応プラン: Basic 以上

オフライン状態の取得

現在オフラインモードかどうかは cache.getOfflineMode() で同期的に取得します。

const isOffline = window.unveilyBridge.cache.getOfflineMode();  // boolean

if (isOffline) {
  showOfflineBanner();
}

app.getInfo のレスポンスにも同じ値が isOffline フィールドとして含まれます。

window.unveilyBridge.app.getInfo("onAppInfo");

function onAppInfo(info) {
  console.log(info.isOffline);  // boolean
}

オフライン状態はポーリングで確認します

SDK はネットワークの変化に対するグローバルイベントを発生させません。状態が必要なタイミングで getOfflineMode() または getInfo() を使って直接取得してください（例: 画面表示時、リクエスト失敗時）。

setOfflineMode

オフラインモードを明示的に有効・無効にします。第 1 引数は boolean で、第 2 引数として結果コールバック名（文字列）を任意で渡せます。

// オフラインモードをオンにする
window.unveilyBridge.cache.setOfflineMode(true);

// 結果を受け取るにはコールバック名を渡す
window.unveilyBridge.cache.setOfflineMode(true, "onOfflineModeResult");

function onOfflineModeResult(result) {
  console.log(result.enabled);  // boolean — 適用された状態
  console.log(result.success);  // boolean — 成功したかどうか
  // 失敗時は result.error に理由が入ります
}

コールバック名を省略すると、デフォルトの onOfflineModeResult が使用されます。

オフラインフォールバックページの設定

ネットワークがないときに表示するページを assets/config.json で設定します。

assets/config.json

{
  "offline": {
    "enabled": true,
    "fallbackPage": "offline.html"
  }
}

app/src/main/assets/offline.html を作成します。SDK はネットワーク変更イベントを発生させないため、再試行ボタンでページをリロードするように構成します。

app/src/main/assets/offline.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>オフライン</title>
</head>
<body>
  <h1>インターネット接続を確認してください</h1>
  <p>ネットワーク接続が回復したら、下のボタンを押して再試行してください。</p>
  <button type="button" onclick="window.location.reload()">再試行</button>
</body>
</html>

キャッシュ制御

clearCache

WebView のキャッシュを初期化します。アプリのアップデート後に強制リロードが必要なときに使います。引数は boolean で、true を渡すとキャッシュ初期化後にページをリロードします。

window.unveilyBridge.cache.clearCache(true);   // 初期化してリロード
window.unveilyBridge.cache.clearCache(false);  // 初期化のみ