Uygulama önbelleği kullanan bir çevrimdışı web uygulamam var. Temel olarak PNG resim dosyalarından oluşan, kaydedeceği (istemci tarafı) yaklaşık 10MB - 20MB veri sağlamam gerekiyor. İşlem şu şekildedir:

1. Appcache'de web uygulaması indirmeleri ve yüklemeleri (bildirim kullanır)
2. Sunucu PNG veri dosyalarından web uygulaması istekleri (nasıl? - aşağıdaki alternatiflere bakın)
3. Zaman zaman web uygulaması sunucuyla yeniden senkronize olur ve PNG veritabanına küçük kısmi güncellemeler / siler / eklemeler yapar
4. Bilginize: Sunucu, dosyaları almak için wwwroot'a yerleştirebilen bir JSON REST sunucusudur

İkili blob depolamasını işleyen istemci tabanlı "veritabanları" ile ilgili mevcut analizim burada

Altta GÜNCELLEMEYE BAKIN

• AppCache (manifest aracılığıyla tüm PNG'yi ekleyin ve ardından talep üzerine güncelleyin)
  • CON: PNG veritabanı öğesindeki herhangi bir değişiklik, bildirimdeki tüm öğelerin tam indirilmesi anlamına gelir (Gerçekten kötü haber!)
• Web depolama
  • CON: JSON depolaması için tasarlandı
  • CON: blob'ları yalnızca base64 kodlama yoluyla depolayabilir (muhtemelen kod çözme maliyeti nedeniyle ölümcül kusur)
  • CON: webStorage için 5MB'lık sabit sınır http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html
• PhoneGap ve SQLLite
  • CON: Sponsor, sertifikasyon gerektiren yerel bir uygulama olarak reddedecek
• sıkıştırılmış dosya
  • Sunucu bir zip dosyası oluşturur, onu wwwroot'a yerleştirir ve istemciyi bilgilendirir
  • kullanıcı manuel olarak açmalı (En azından ben böyle görüyorum) ve istemci dosya sistemine kaydetmeli
  • Web uygulaması dosyalara başvurmak için FileSystem API kullanır
  • CON: ZIP çok büyük olabilir (zip64?), Oluşturmak için uzun süre
  • CON: FileSystem API'nin her zaman korumalı alandan okuyup okuyamayacağından emin değilim (öyle düşünüyorum)
• USB veya SD kart (taş devrine dönüş ...)
  • Çevrimdışı olmadan önce kullanıcı sunucuda yerel olacaktır
  • Böylece ona bir SD kart taktırabilirdik, sunucunun kartı PNG dosyalarıyla doldurmasına izin verdik.
  • Ardından kullanıcı dizüstü bilgisayara, tablete bağlayacak
  • Web uygulaması dosyaları okumak için FileSystem API'yi kullanacak
  • CON: FileSystem API'nin her zaman korumalı alandan okuyup okuyamayacağından emin değilim (öyle düşünüyorum)
• WebSQL
  • CON: w3c onu terk etti (oldukça kötü)
  • Geri dönüş olarak IndexedDB ve WebSQL kullanan bir Javascript sarmalayıcısını düşünebilirim
• FileSystem API
  • Chrome, blobların okunmasını / yazılmasını destekler
  • CON: IE ve FireFox hakkında net değil (IE10, standart olmayan msSave'e sahiptir)
  • caniuse.com, IOS ve Android desteğini bildiriyor (ancak yine, bu yalnızca JSON'un r / w'si mi yoksa yazmak için tam blob API'si mi içeriyor?
  • CON: FireFox üyeleri FileSystem API'den hoşlanmaz ve blobları kurtarmayı destekliyorlarsa net değil: https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/
  • PRO: jsperf http://jsperf.com/indexeddb-vs-localstorage/15'e göre bloblar için IndexedDB'den çok daha hızlı (sayfa 2)
• IndexedDB
  • IE10, FireFox'ta iyi destek (kaydedin, blobları okuyun)
  • Bir dosya sisteminden daha iyi hız ve daha kolay yönetim (siler, güncellemeler)
  • PRO: hız testlerine bakın: http://jsperf.com/indexeddb-vs-localstorage/15
  • IndexedDB'de görüntülerin depolanması ve görüntülenmesi hakkındaki bu makaleye bakın: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
  • CON: Chrome'un henüz blob yazmayı desteklemediğini doğruladım (mevcut hata, ancak ne zaman düzeltileceği net değil)
  • GÜNCELLEME: Chrome geliştiricileri, hem masaüstü hem de android için bunun üzerinde çalıştıklarını onayladı! henüz zaman çizelgesi yok.
• LawnChair JavaScript sarmalayıcı http://brian.io/lawnchair/
  • PRO: IndexedDB, WebSQL veya sahip olduğunuz her türlü veritabanı için çok temiz bir paketleyici (polyfill'i düşünün)
  • CON: ikili blobları saklayamaz, yalnızca veri: uri (base64 kodlama) (kod çözme maliyetinden dolayı muhtemelen ölümcül kusur)
• IndexedDB JQUERY polyFill https://github.com/axemclion/jquery-indexeddb
  • Parashuram, ham IndexedDB arayüzü için güzel bir JQUERY sarmalayıcı yazdı
  • PRO: IndexedDB kullanımını büyük ölçüde basitleştirir, Chrome FileSystemAPI için bir dolgu / polyfill eklemeyi umuyordum
  • CON: Blobları işlemeli, ancak çalışmasını sağlayamadım
• idb.filesystem.js http://ericbidelman.tumblr.com/post/21649963613/idb-filesystem-js-bringing-the-html5-filesystem-api
  • Eric Bidelman @ Google, geri dönüş olarak Indexed DB kullanan, iyi test edilmiş bir PolyFill the FileSystem API yazdı.
  • PRO: FileSystem API, blob'ları depolamak için çok uygundur
  • PRO: FireFox ve Chrome'da harika çalışıyor
    • PRO: bulut tabanlı CouchDB ile senkronize etmek için harika
  • CON: Nedeni net değil, ancak IE10 üzerinde çalışmıyor
• PouchDB JavaScript Kitaplığı http://pouchdb.com/
  • bir CouchDB'yi yerel bir DB ile senkronize etmek için harika (WebSQL veya IndexedDB kullanıyor (benim sorunum değil)
  • CON: EKSİKSİZLİK YOK, PouchDB artık tüm yeni tarayıcılar (IE, Chrome, Firefox, mobil cihazda Chrome, vb.) Ve birçok eski tarayıcı için ikili blobları destekliyor. Bu yazıyı ilk yaptığımda durum böyle değildi.

NOT: bir veriyi görmek için: uri PNG kodlaması Bir örnek oluşturdum: http://jsbin.com/ivefak/1/edit

İstenen / Yararlı / Gereksiz Özellikler

• İstemcide yerel (EXE, PhoneGap, ObjectiveC, vb.) Uygulama yok (saf web uygulaması)
• Yalnızca dizüstü bilgisayarlar için en son Chrome, FireFox, IE10'da çalıştırılması gerekir
• Android Tablet için kesinlikle aynı çözümü istiyorum (IOS de iyi olurdu), ancak çalışmak için yalnızca bir tarayıcıya (FF, Chrome, vb.)
• Hızlı başlangıç ​​DB popülasyonu
• GEREKSİNİM: Web uygulaması ile depolamadan (DB, dosya) görüntülerin çok hızlı alınması
• Tüketiciler için tasarlanmamıştır. Tarayıcıları kısıtlayabilir ve kullanıcıdan özel kurulum ve görevler yapmasını isteyebiliriz, ancak bunu en aza indirelim

IndexedDB Uygulamaları

• IE, FF ve Chrome'un bunu dahili olarak nasıl uyguladığına dair harika bir makale var: http://www.aaron-powell.com/web/indexeddb-storage
• Kısacası:
  • IE, IndexedDB için Exchange ve Active Directory ile aynı veritabanı biçimini kullanır
  • Firefox SQLite kullanıyor, bu yüzden SQL veritabanına bir tür NoSQL veritabanı uyguluyor
  • Chrome (ve WebKit), BigTable'da mirası olan bir Anahtar / Değer deposu kullanıyor

Mevcut Sonuçlarım

• Bir IndexedDB yaklaşımı kullanmayı seçtim (ve blob desteği gönderene kadar Chrome için FileSystemAPI ile çoklu doldurma)
• Döşemeleri almak için bir ikilem yaşadım çünkü JQUERY çalışanları bunu AJAX'a eklemekle uğraşıyorlar
• JQUERY .ajax () https://github.com/pmp/xhr2-lib'e çok benzeyen Phil Parsons tarafından XHR2-Lib ile gittim
• 100 MB indirmeler için performans (IE10 4s, Chrome 6s, FireFox 7s).
• IndexedDB sarmalayıcılarından hiçbirinin bloblar için çalışmasını sağlayamadım (çim sandalye, PouchDB, jquery-indexeddb, vb.)
• Kendi sarıcımı yuvarladım ve performans (IE10 2s, Chrome 3s, FireFox 10s)
• FF ile, sql olmayan bir depolama için ilişkisel bir DB (sqllite) kullanmanın performans sorununu gördüğümüzü varsayıyorum
• NOT, Chrome'da IndexedDB'nin durumunu incelemek için olağanüstü hata ayıklama araçları (geliştirici sekmesi, kaynaklar) vardır.

NİHAİ Sonuçlar aşağıda yanıt olarak yayınlanmıştır

Güncelleme

PouchDB artık tüm yeni tarayıcılar (IE, Chrome, Firefox, mobil cihazlarda Chrome, vb.) Ve birçok eski tarayıcı için ikili blobları destekliyor. Bu yazıyı ilk yaptığımda durum böyle değildi.

PNG kaygan haritalar için Çevrimdışı blob önbelleği sonuçları

Test yapmak

• 171 PNG dosyası (toplam 3,2MB)
• Test edilen platformlar: Chrome v24, FireFox 18, IE 10
• Android için Chrome ve FF ile de çalışmalı

Web sunucusundan getir

• web sunucusundan blob indirmek için XHR2 (neredeyse tüm tarayıcılarda desteklenir) kullanma
• JQUERY .ajax () gibi Phil Parsons'ın XHR2-Lib ile gittim
  • https://github.com/pmp/xhr2-lib

Depolama

• IE ve FireFox için IndexedDB
• Chrome: Polyfill (FileSystem API kullanılarak depolanan blob, IndexedDB'de tutulan referans) polyfill
• "Tarayıcılar IndexedDB verilerini nasıl depoluyor" hakkında okunmalı bir makale
  • http://www.aaron-powell.com/web/indexeddb-storage
• Not: FireFox, NOSQL IndexedDB için SQLlite kullanır. Yavaş performansın nedeni bu olabilir. (blob'lar ayrı olarak depolanır)
• Not: Microsoft IE, genişletilebilir depolama motorunu kullanır:
  • http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• Not: Chrome, LevelDB http://code.google.com/p/leveldb/ kullanır.

Görüntüle

• Harita döşemelerini göstermek için Leaflet http://leafletjs.com/ kullanıyorum
• DB'den döşeme katmanını almak için Ishmael Smyrnow'un işlevsel karo katmanı eklentisini kullandım
  • https://github.com/ismyrnow/Leaflet.functionaltilelayer
• DB tabanlı fayans katmanını tamamen yerel (localhost: //) depolama ile karşılaştırdım
• Performansta gözle görülür bir fark yok! IndexedDB ve yerel dosyalar arasında!

Sonuçlar

• Chrome: Getirme (6.551s), Store (8.247s), Toplam Geçen Süre: (13.714sn)
• FireFox: Getirme (0,422sn), Mağaza (31,519s), Toplam Geçen Süre: (32,836sn)
• IE 10: Getirme (0,668sn), Mağaza: (0,896sn), Toplam Geçen Süre: (3,758sn)

Gereksinimleriniz için, diğer ikisine dayalı yeni bir çoklu dolgu geliştirmenizi öneririm: FileSystem API'den IndexedDB'ye ve IndexedDB'den WebSQL'e - en iyi seçenek.

İlki, Chrome (FileSystem API) ve Firefox'ta (IndexedDB) blobların depolanması için desteği etkinleştirirken, ikincisi Android ve iOS ( WebSQL ) için destek sağlamalıdır . İhtiyaç duyulan şey, bu çoklu dolguların birlikte çalışmasını sağlamak ve sanırım bu zor değil.

Not: Web'de bununla ilgili herhangi bir bilgi bulamadığım için, WebSQL polyfill kullanarak blob depolamanın iOS ve Android'de çalışıp çalışmayacağını test etmelisiniz. Yine de çalışması gerekiyor gibi görünüyor:

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

Kaynak

Harita önbelleğe alma örneklerim var (açık örnek, bölgeleri keşfetme ve yakınlaştırma, çevrimdışı değiştirme ve keşfedilen bölgeler mevcut olacaktır).

Orada map.js- çevrimdışı fayans için harita katmanı storage.js- IndexedDB ve WebSQL dayalı depolama uygulaması (ama kötü performans ile bu sadece bir test uygulaması).

• Site dosyaları (html, css, js vb.) İçin uygulama önbelleğini kullanmayı tercih ederim.
• Depolama için Indexed DB (blob desteği), Web SQL (yalnızca base64), FileWriter (blob desteği, ancak yalnızca chrome) kullanmayı tercih ediyorum. Açıkçası depolama bunun için büyük bir sorundur. Hepsini karıştıracak en hızlı anahtar-değer çözümüne ihtiyacınız var. Var olan çözümü kullanmak için iyi bir karar olduğunu düşünüyorum.
• Getirmek için CORS ile tuval kullandım. Ancak WebWorkers ve XHR2 hakkında düşünüyorum ve bu tuval yerine daha iyi olabilir çünkü tuvalin farklı tarayıcılarda ve diğerlerinde CORS ile bazı sorunları var (örneğin bu başlık operada kötü saklandı ).

2 milyar şehir ( Minsk ) için boyutlar hakkında ek bilgiler :

• Yakınlaştırma - 9, fayans - 2, boyut - 52 kb, önceki - 52 kb;
• Yakınlaştırma - 10, fayans - 3, boyut - 72 kb, önceki - 124 kb;
• Yakınlaştırma - 11, fayans - 7, boyut - 204 kb, önceki - 328 kb;
• Yakınlaştırma - 12, fayans - 17, boyut - 348 kb, önceki - 676 ​​kb;
• Yakınlaştırma - 13, fayans - 48, boyut - 820 kb, önceki - 1,5 mb;
• Yakınlaştırma - 14, fayans - 158, boyut - 2,2 mb, önceki - 3,7 mb;
• Yakınlaştırma - 15, fayans - 586, boyut - 5.5 mb, önceki - 9.3 mb;
• Yakınlaştırma - 16, fayans - 2264, boyut - 15 mb, önceki ile - 24,3 mb;

Birkaç yıl önce (tam olarak taş devri değil), sunucusunu senkronizasyon / güncelleme gereksinimleri için sorgulayan, sunucudan uygun dosyaları indiren ve bunları kullanıcının dosya sistemine (veritabanına değil) kaydedecek imzalı bir java uygulaması kullanıyordum. Uygulamayı yazacak ve imzalayacak birine ihtiyacınız olsa da bu çözüm sizin için işe yarayabilir. Veritabanı çözümleri için, böyle bir uygulama, uygun bir bağlantı noktasında localhost kullanarak çoğu veritabanı için mevcut jdbc'yi kullanabilir (örneğin MySQL için 3306). Uygulama etiketinin Html5'te kullanımdan kaldırıldığına inanıyorum, ancak hala çalışıyor. Android tabletlerde deneyim yok, bu yüzden bu kısım hakkında yorum yapamazsınız.