web-dev-qa-db-ja.com

オフラインWebアプリケーションのイメージデータの保存（クライアント側のストレージデータベース）

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

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

バイナリBLOBストレージを処理するクライアントベースの「データベース」の現在の分析は次のとおりです。

下部の更新を見る

  • AppCache（マニフェスト経由ですべてのPNGを追加し、オンデマンドで更新します）
    • CON：PNGデータベースアイテムの変更は、マニフェスト内のすべてのアイテムの完全なダウンロードを意味します（本当に悪いニュースです！）
  • WebStorage
  • PhoneGap＆SQLLite
    • CON：スポンサーは認定を必要とするネイティブアプリとして拒否します
  • Zipファイル
    • サーバーはZipファイルを作成してwwwrootに配置し、クライアントに通知します
    • ユーザーは手動で解凍し（少なくともそれが表示される方法です）、クライアントファイルシステムに保存する必要があります
    • WebアプリはFileSystem APIを使用してファイルを参照します
    • CON：Zipが大きすぎる（Zip64？）、作成に時間がかかる
    • CON：FileSystem APIが常にサンドボックスから読み取ることができるかどうかわからない（そう思う）
  • USBまたはSDカード（石器時代に戻る...）
    • ユーザーはオフラインになる前にサーバーに対してローカルになります
    • そのため、SDカードを挿入して、サーバーにPNGファイルを入力させることができます。
    • その後、ユーザーはそれをラップトップ、タブレットに接続します
    • WebアプリはFileSystem APIを使用してファイルを読み取ります
    • CON：FileSystem APIが常にサンドボックスから読み取ることができるかどうかわからない（そう思う）
  • WebSQL
    • CON：w3cはそれを放棄しました（かなり悪い）
    • IndexedDBとWebSQLをフォールバックとして使用するJavascriptラッパーを検討するかもしれません
  • FileSystem API
    • ChromeはBLOBの読み取り/書き込みをサポートしています
    • CON：IEおよびFireFox（IE10、非標準のmsSaveがあります）について明確ではありません）
    • caniuse.comレポートIOS and Androidサポート
    • CON：FireFoxの人々はFileSystem APIを嫌っており、ブロブの保存をサポートしているかどうか明確ではありません： https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
    • PRO：jsperfによるblobのIndexedDBよりもはるかに高速http://jsperf.com/indexeddb-vs-localstorage/15 （ページ2）
  • IndexedDB
    • IE10、FireFoxでの良好なサポート（保存、BLOBの読み取り）
    • ファイルシステム（削除、更新）よりも優れた速度と簡単な管理
    • PRO：速度テストを参照してください： http://jsperf.com/indexeddb-vs-localstorage/15
    • IndexedDBでの画像の保存と表示に関する次の記事を参照してください。 https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
    • CON：Chromeはまだblob書き込みをサポートしていないことを確認しました（現在のバグですが、修正時期は明確ではありません）
    • 更新：Chrome開発者は、デスクトップとAndroidの両方でこれに取り組んでいることを確認しています！まだタイムラインはありません。
  • LawnChairJavaScriptラッパー http://brian.io/lawnchair/
    • PRO：IndexedDB、WebSQL、または使用しているデータベースの非常にクリーンなラッパー（ポリフィルを考えてください）
    • CON：バイナリblobを保存することはできません。data：uri（base64エンコーディング）のみ（おそらく、エンコード解除のコストによる致命的な欠陥）
  • IndexedDB JQUERYpolyFill https://github.com/axemclion/jquery-indexeddb
    • Parashuramは、生のIndexedDBインターフェース用のNice JQUERYラッパーを作成しました。
    • PRO：IndexedDBの使用を大幅に簡素化します。Chrome FileSystemAPIにshim/polyfillを追加したいと考えていました
    • CON：BLOBを処理する必要がありますが、動作させることができませんでした
  • idb.filesystem.jshttp://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では機能していません
  • PouchDBJavaScriptライブラリ http://pouchdb.com/
    • couchDBをローカルDBと同期するのに最適（WebSQLまたはIndexedDBを使用します（ただし、私の問題ではありません）
    • 短所：短所、PouchDBは、最近のすべてのブラウザー（IE、Chrome、Firefox、Chromeモバイルなど）および多くの古いブラウザーでバイナリBLOBをサポートするようになりました。最初にこの投稿をしました。

注：PNGのdata：uriエンコーディングを確認するには、次の場所にサンプルを作成しました。 http://jsbin.com/ivefak/1/edit

望ましい/有用な/必要な機能

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

IndexedDBの実装

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

私の現在の結果

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

最終結果は以下に回答として投稿されます

更新

PouchDBは、すべての最近のブラウザー（IE、Chrome、Firefox、Chromeなど、モバイル）など）と多くの古いブラウザーでバイナリブロブをサポートするようになりました。 。

javascripthtml5web-applicationsindexeddbleaflet
103
Dr.YSG

結果PNGスリッピーマップのオフラインBLOBキャッシュ

テスト

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

ウェブサーバーから取得

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

ストレージ

  • IEおよびFireFoxのIndexedDB
  • Chrome：ポリフィル（FileSystem APIを使用して保存されたブロブ、IndexedDBに保持される参照）ポリフィル
  • 「ブラウザがIndexedDBデータを保存する方法」に関する記事を読む必要があります。
  • 注：FireFoxはNOSQL IndexedDBにSQLliteを使用します。これがパフォーマンスの低下の原因である可能性があります。 （ブロブは個別に保存されます）
  • 注：Microsoft IEは、拡張ストレージエンジンを使用します：
  • 注：ChromeはLevelDBを使用します http://code.google.com/p/leveldb/

ディスプレイ

  • 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秒）
24
Dr.YSG

要件については、他の2つに基づいて新しいポリフィルを開発することをお勧めします：FileSystem API to IndexedDBおよびIndexedDB to WebSQL—最適なオプションです。

前者はChrome（FileSystem API）およびFirefox（IndexedDB）でのBLOBの保存のサポートを有効にし、後者はAndroidおよびiOSのサポートを提供する必要があります（ WebSQL ）必要なのは、これらのポリフィルを一緒に機能させることであり、難しくはないと思います。

NB：これについて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(" ")

ソース

4
Bogdan Kulynych

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

1
Manidip Sengupta

マップキャッシングがあります examples （例を開き、領域とズームを検出し、オフラインに切り替えて、検出された領域が利用可能になります）。

がある map.js-オフラインタイルのマップレイヤー、storage.js-IndexedDbおよびWebSQLに基づくストレージ実装（ただし、これはパフォーマンスの低い実装をテストするだけです）。

  • サイトファイル（html、css、jsなど）の場合、アプリケーションキャッシュを使用することを好みます。
  • ストレージには、Indexed DB（blobをサポート）、Web SQL（base64のみ）、FileWriter（blobをサポート、ただしchromeのみ）を使用することを好みます。率直に言って、これはストレージが大きな問題です。それらすべてをミックスする最速のキーバリューソリューションが必要です。既存のソリューションを使用することをお勧めします。
  • 取得には、CORSでcanvasを使用しました。しかし、私はWebWorkersとXHR2について考えていますが、キャンバスは別のブラウザなどでCORSといくつかの問題を抱えているため、代わりにcanvasを使用する方が良い場合があります（たとえば this title は保存済み opera で悪い.

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;
0
tbicr