112

appcaching を使用するオフライン Web アプリケーションがあります。主にPNG画像ファイルで構成される（クライアント側）保存する約10MB〜20MBのデータを提供する必要があります。操作は次のとおりです。

  1. Web アプリケーションのダウンロードと appcache へのインストール (マニフェストを使用)
  2. サーバー PNG データ ファイルからの Web アプリ リクエスト (どのように? - 以下の代替案を参照)
  3. ときどき Web アプリがサーバーと再同期し、PNG データベースに対して小さな部分的な更新/削除/追加を行います
  4. 参考までに: サーバーは JSON REST サーバーであり、ピックアップのために wwwroot にファイルを配置できます

これは、バイナリ BLOB ストレージを処理するクライアント ベースの「データベース」に関する私の現在の分析です。

下部の更新を参照してください

  • AppCache (マニフェスト経由ですべての PNG を追加し、オンデマンドで更新します)

    • 短所: PNG データベース アイテムを変更すると、マニフェスト内のすべてのアイテムが完全にダウンロードされます (本当に悪いニュースです!)

  • ウェブストレージ

  • PhoneGap と SQLLite

    • 短所: スポンサーは、認証が必要なネイティブ アプリとして拒否します

  • ZIPファイル

    • サーバーは zip ファイルを作成して wwwroot に配置し、クライアントに通知します
    • ユーザーは手動で解凍する必要があり（少なくとも私はそう見ています）、クライアントファイルシステムに保存します
    • Web アプリは FileSystem API を使用してファイルを参照します
    • 短所: ZIP が大きすぎる可能性があり (zip64?)、作成に時間がかかる
    • CON: FileSystem API が常にサンドボックスから読み取ることができるかどうかはわかりません (私はそう思います)。

  • USBまたはSDカード（石器時代に戻る....）

    • ユーザーは、オフラインになる前にサーバーに対してローカルになります
    • そのため、彼に SD カードを挿入してもらい、サーバーに PNG ファイルを格納させることができます。
    • 次に、ユーザーはそれをラップトップ、タブレットに接続します
    • Web アプリは FileSystem API を使用してファイルを読み取ります
    • CON: FileSystem API が常にサンドボックスから読み取ることができるかどうかはわかりません (私はそう思います)。

  • WebSQL

    • CON: w3c はそれを放棄しました (かなり悪い)
    • フォールバックとして IndexedDB と WebSQL を使用する Javascript ラッパーを検討するかもしれません

  • ファイルシステム API

    • Chrome は BLOB の読み取り/書き込みをサポートしています
    • CON: IE と FireFox については不明 (IE10 には非標準の msSave があります)
    • caniuse.com は、IOS と Android のサポートを報告しています (ただし、これは単なる JSON の r/w なのか、それとも書き込み用の完全な BLOB API が含まれているのでしょうか?
    • CON: FireFox の人々は FileSystem API を嫌い、ブロブの保存をサポートしているかどうかは不明です: https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
    • PRO: jsperf http://jsperf.com/indexeddb-vs-localstorage/15 (page 2)によると、blob の場合は IndexedDB よりもはるかに高速です。

  • インデックスDB

    • IE10、FireFox での優れたサポート (保存、ブロブの読み取り)
    • ファイルシステムよりも優れた速度と簡単な管理 (削除、更新)
    • PRO: 速度テストを参照してください: http://jsperf.com/indexeddb-vs-localstorage/15
    • IndexedDB での画像の保存と表示に関する記事を参照してください: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
    • CON: Chrome はまだ blob の書き込みをサポートしていないことを確認しました (現在のバグですが、いつ修正されるかは不明です)
    • 更新: 2014 年 6 月のブログ投稿では、Chrome が BLOB をサポートするようになったことを示唆しています。IndexedDB
    • 更新:この caniuse/indexeddbは次のことを確認しています:「Chrome 36 以下では Blob オブジェクトを indexedDB 値としてサポートしていませんでした。」; >Chrome36 が Blob オブジェクトをサポートしていることを示唆しています。

  • LawnChair JavaScript ラッパーhttp://brian.io/lawnchair/

    • PRO: IndexedDB、WebSQL、またはお持ちのデータベースの非常にクリーンなラッパー (polyfill を考えてください)
    • 短所: バイナリ blob を保存できず、data:uri (base64 エンコーディング) のみ (デエンコーディングのコストによる致命的な欠陥となる可能性があります)

  • IndexedDB JQUERY polyFill https://github.com/axemclion/jquery-indexeddb

    • Parashuram は生の IndexedDB インターフェイス用の優れた JQUERY ラッパーを作成しました。
    • PRO: IndexedDB を使用すると大幅に簡素化されます。Chrome FileSystemAPI のシム/ポリフィルを追加したいと考えていました。
    • CON: ブロブを処理する必要がありますが、動作させることができませんでした

  • idb.filesystem.js http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api

    • Eric Bidelman @ Google は、インデックス付き DB をフォールバックとして使用する FileSystem API の十分にテストされた PolyFill を作成しました。
    • PRO: FileSystem API は BLOB の保存に適しています
    • PRO: FireFox と Chrome でうまく動作します
      • PRO: クラウドベースの CouchDB との同期に最適
    • CON: 理由は不明ですが、IE10 では動作しません。

  • PouchDB JavaScript ライブラリhttp://pouchdb.com/

    • CouchDB をローカル DB と同期するのに最適です (WebSQL または IndexedDB のいずれかを使用します (ただし、私の問題ではありません))。
    • 短所: 短所はありません。PouchDB は、最近のすべてのブラウザー (IE、Chrome、Firefox、モバイルの Chrome など) と多くの古いブラウザーのバイナリ BLOB をサポートするようになりました。私が最初にこの投稿をしたときはそうではありませんでした。

注: PNG の data:uri エンコーディングを確認するには、http: //jsbin.com/ivefak/1/editで例を作成しました。

欲しい機能・便利な機能・不要な機能

  • クライアントにネイティブ (EXE、PhoneGap、ObjectiveC など) アプリがない (純粋な Web アプリケーション)
  • ラップトップ用の最新の Chrome、FireFox、IE10 でのみ実行する必要があります
  • Android タブレットにも同じソリューションが必要ですが (IOS もいいでしょう)、必要なブラウザは 1 つだけです (FF、Chrome など)。
  • 迅速な初期 DB 作成
  • 要件: Web アプリケーションによるストレージ (DB、ファイル) からの画像の非常に高速な取得
  • 消費者向けではありません。ブラウザーを制限し、ユーザーに特別なセットアップとタスクを実行するよう求めることができますが、それを最小限に抑えましょう

IndexedDB の実装

  • IE、FF、および Chrome がこれを内部的に実装する方法に関する優れた記事がhttp://www.aaron-powell.com/web/indexeddb-storageにあります。
  • 要するに：
    • IE は、Exchange および Active Directory と同じデータベース形式を IndexedDB に使用します。
    • Firefox は SQLite を使用しているため、NoSQL データベースを SQL データベースに実装するようなものです。
    • Chrome (および WebKit) は、BigTable に継承されている Key/Value ストアを使用しています

私の現在の結果

  • 私は IndexedDB アプローチを使用することを選択しました (そして、blob サポートが出荷されるまで Chrome 用の FileSystemAPI でポリフィルします)
  • タイルを取得するために、JQUERY の人々がこれを AJAX に追加することについて熱心に考えているため、ジレンマがありました。
  • Phil Parsons の XHR2-Lib を使用しました。これは JQUERY .ajax() https://github.com/pmp/xhr2-libによく似ています。
  • 100MB のダウンロードのパフォーマンス (IE10 4s、Chrome 6s、FireFox 7s)。
  • BLOB に対して動作する IndexedDB ラッパーを取得できませんでした (lawnchair、PouchDB、jquery-indexeddb など)。
  • 独自のラッパーを作成しましたが、パフォーマンスは (IE10 2s、Chrome 3s、FireFox 10s) です。
  • FF では、SQL 以外のストレージにリレーショナル DB (sqllite) を使用することによるパフォーマンスの問題が発生していると思います。
  • 注: Chrome には、IndexedDB の状態を検査するための優れたデバッグ ツール (開発者タブ、リソース) があります。

回答として以下に掲載された最終結果

アップデート

PouchDB は、最近のすべてのブラウザー (IE、Chrome、Firefox、モバイルの Chrome など) と多くの古いブラウザーのバイナリ BLOB をサポートするようになりました。私が最初にこの投稿をしたときはそうではありませんでした。

4

4 に答える 4

26

結果 PNG の滑りやすいマップのオフライン blob キャッシュ

テスト

  • 171個のPNGファイル（合計3.2MB）
  • テスト済みのプラットフォーム: Chrome v24、FireFox 18、IE 10
  • Android用のChromeとFFでも動作するはずです

ウェブサーバーから取得

  • Web サーバーからの BLOB のダウンロードに XHR2 (ほぼすべてのブラウザーでサポート) を使用する
  • Phil Parsons による XHR2-Lib を使用しました。これは JQUERY .ajax() に非常によく似ています。

保管所

画面

  • Leaflet http://leafletjs.com/を使用してマップ タイルを表示しています
  • DB からタイル レイヤーを取得するために、Ishmael Smyrnow による機能的なタイル レイヤー プラグインを使用しました。
  • DB ベースのタイル レイヤーを純粋なローカル (localhost://) ストレージと比較しました
  • 性能に目立った違いはありません！IndexedDB とローカル ファイルの使用の間で!

結果

  • Chrome: フェッチ (6.551 秒)、ストア (8.247 秒)、合計経過時間: (13.714 秒)
  • FireFox: フェッチ (0.422 秒)、ストア (31.519 秒)、合計経過時間: (32.836 秒)
  • IE 10: フェッチ (0.668 秒)、ストア: (0.896 秒)、合計経過時間: (3.758 秒)
于 2013-01-23T17:14:04.520 に答える
4

あなたの要件のために、 FileSystem API から IndexedDBへ、およびIndexedDB から WebSQLへの 2 つの他のものに基づいて新しいポリフィルを開発することをお勧めし ます。これが最良の選択肢です。

前者は、Chrome (FileSystem API) と Firefox (IndexedDB) での BLOB の保存のサポートを有効にし、後者は Android と iOS ( WebSQL ) のサポートを提供する必要があります。必要なのは、これらのポリフィルを連携させるだけで、難しくはないと思います。

注意:これに関する Web 上の情報を見つけることができなかったので、WebSQL ポリフィルを使用した BLOB の保存が iOS および Android で機能するかどうかをテストする必要があります。ただし、動作するはずです：

var sql = ["CREATE TABLE", idbModules.util.quote(storeName), "(key BLOB", createOptions.autoIncrement ? ", inc INTEGER PRIMARY KEY AUTOINCREMENT" : "PRIMARY KEY", ", value BLOB)"].join(" ")

ソース

于 2013-01-01T21:38:12.900 に答える
2

マップ キャッシュの例があります(例を開く、地域とズームを発見する、オフラインに切り替えると、発見された地域が利用可能になります)。

map.js- オフライン タイル用のマップ レイヤー- storage.jsIndexedDb と WebSQL に基づくストレージの実装 (ただし、これはパフォーマンスの低いテスト実装にすぎません)。

  • サイト ファイル (html、css、js など) には、アプリケーション キャッシュを使用することを好みます。
  • ストレージには、Indexed DB (blob をサポート)、Web SQL (base64 のみ)、FileWriter (blob をサポートしますが、chrome のみ) を使用することを好みます。率直に言って、ストレージはこれにとって大きな問題です。それらすべてを組み合わせる最速のキーバリュー ソリューションが必要です。既存のソリューションを使用するのは良い決断だと思います。
  • フェッチには、キャンバスと CORS を使用しました。しかし、私は WebWorkers と XHR2 について考えています。これはキャンバスの代わりに優れている可能性があります。これは、キャンバスがさまざまなブラウザーなどで CORS に問題があるためです (たとえば、このタイトルはオペラに保存されていませんでした)。

20 億都市 (ミンスク) のサイズに関する追加情報:

  • ズーム - 9、タイル - 2、サイズ - 52 kb、前の - 52 kb。
  • ズーム - 10、タイル - 3、サイズ - 72 kb、前の - 124 kb。
  • ズーム - 11、タイル - 7、サイズ - 204 kb、前の - 328 kb。
  • ズーム - 12、タイル - 17、サイズ - 348 kb、前の - 676 kb。
  • ズーム - 13、タイル - 48、サイズ - 820 kb、前の - 1.5 mb;
  • ズーム - 14、タイル - 158、サイズ - 2.2 mb、以前のもの - 3.7 mb;
  • ズーム - 15、タイル - 586、サイズ - 5.5 mb、以前のもの - 9.3 mb;
  • ズーム - 16、タイル - 2264、サイズ - 15 mb、以前のもの - 24.3 mb;
于 2013-05-24T09:16:45.663 に答える
1

数年前（正確には石器時代ではありません）、同期/更新要件についてサーバーにクエリを実行し、サーバーから適切なファイルをダウンロードして、ユーザーのファイルシステム（データベースではない）に保存する署名付きJavaアプレットを使用していました。その解決策はあなたのために働くかもしれません、しかしあなたはアプレットを書いてそれに署名する誰かを必要とするでしょう。データベースソリューションの場合、このようなアプレットは、適切なポート（MySQLの場合は3306など）でlocalhostを使用するほとんどのデータベースで使用可能なjdbcを使用できます。アプレットタグはHtml5で非推奨になっていると思いますが、それでも機能します。Androidタブレットの経験がないため、その部分についてコメントすることはできません。

于 2013-01-01T19:18:18.620 に答える