接続タイプ: 理論と未来
接続タイプ (イーサネット wifi 2g 3g 4g など) の情報を提供するW3C のネットワーク情報 APIのドラフト仕様がありますが、以下を除いて、まだどのブラウザーにも実装されていません。
Android 2.2+ のストック Android ブラウザー (Google Chrome ブラウザーではありません)
navigator.connection.type
// W3C ドラフトに基づく (ストック Android ブラウザに実装)
正確にはブラウザではないPhoneGap
navigator.network.connection.type
// PhoneGap で
将来その情報があれば、ユーザーがセルラーデータを持っているかどうかを検出し、画像の src を一時的に削除して、確認ダイアログでユーザーに尋ねることができます。
また、おそらく次を使用してアプリのキャッシュ更新をキャンセルする必要があります:
window.applicationCache.abort()
(ドキュメント)
現実
残念ながら、現時点では Net Info API は利用できません (少なくとも普及していません) が、将来的には確実に役立つでしょう。
ロングショット
ネットワーク速度 (DIAL = ダイヤルアップ、DSL = ブロードバンド/ケーブル、COMP = 会社/T1) を含むデータベースがありますが、私はそれを使用したことがなく、役立つとは思えません。
動的アプリ キャッシュ
これをチェックしている間、ネットワーク情報 API と組み合わせるために、その場でマニフェスト宣言と共に html タグを生成しようとしましたが、AppCache マニフェストは JavaScript の実行前に読み込まれ、その後は影響を受けません。そのため、Javascript を使用してその場でマニフェスト ファイルを変更することはできず、データ URI はオプションではありません。
代替ソリューション
HTML5 アプリケーション キャッシュは、現時点では手付かずの野獣であり、それを改善するための話し合いが行われています。より複雑な構成をサポートするように変更されるまでは (帯域幅レベル フラグはすばらしいでしょう)、ソリューションの見方を変えることができますが、現時点では App Cache が最適かもしれません。
画像の大きさによっては、通常のブラウザ キャッシュに頼ることができます。localStorageと遠未来の有効期限 HTTP ヘッダーを組み合わせることができます。ロード/キャッシュされた画像を追跡するための LocalStorage。
- 最初に、画像の HTTP ヘッダーに有効期限のはるか先の日付を追加します
- ページの読み込み時に、imgs からすべての src を削除します
- 画像をループし、各画像が過去に読み込まれたかどうか localStorage を確認します
- 過去に読み込まれていない画像がある場合、それらの画像のダウンロードを確認するダイアログを表示します
- 画像が過去に読み込まれた場合は、src を img に戻します
- ダウンロードした画像ごとに、その URL を localStorage に保存します