Atualmente, tenho um aplicativo de mapa HTML5 offline (desenvolvido no Leaflet & KendoUI com adições personalizadas) que possui um manifesto de aplicativo e funciona bem em várias plataformas. No entanto, hesito em usar o manifesto para armazenar os blocos de mapa reais dessa maneira (arquivos PNG armazenados como um cache de mosaico no estilo TMS).

Problemas:

• Pode haver muitos blocos (10 MB - 50 MB) em cerca de 1.000 arquivos PNG
• O download inicial pode ser muito lento (e difícil de mostrar o progresso para o usuário)
• Os manifestos de aplicativos funcionam ou, se não, todo o cache offline falhará (de acordo com [whatwg.org] [1])
• Ocasionalmente, o usuário off-line se reconecta e precisa receber atualizações dos ladrilhos. Estes são pequenos deltas, mas o mecanismo de manifesto do aplicativo recarregaria todos os arquivos js, css e PNG assim que as atualizações do manifesto

Idéia alternativa: mantenha o aplicativo da Web separado do armazenamento dos blocos de mapa deslizantes. Armazene os blocos em um banco de dados amigável para aplicativos da web

Atualizar:

[O PouchDB recentemente adicionou suporte para blobs binários. Estou obtendo bons resultados iniciais. Consulte: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]

• Isso é sugerido por Ben Nolan http://bennolan.com/2011/06/03/offline-mapping.html
  • Trabalho semelhante no Maps on a Stick: http://developmentseed.org/blog/2010/oct/02/maps-stick-version-2-released/ ([obsoleto] [2])
  • MBtiles http://mapbox.com/developers/mbtiles/
  • TileStream https://github.com/mapbox/tilestream
  • Lous Remi: http://louisremi.com/2011/10/07/offline-web-applications-were-not-there-yet/

Pergunta: O que a sabedoria coletiva (e a experiência) dizem sobre as seguintes opções para um banco de dados amigável para JavaScript:

1. SqlLite
   • Parece que você precisa criar um invólucro de aplicativo nativo para permitir que ele fale com JavaScript
   • Por exemplo, adicione sua DLL a um programa nativo para Windows e PhoneGap para Android / IOS
2. WebSQL
   • privado
   • mas era um SQL Lite que eu poderia gerar e distribuir facilmente a partir do servidor da web host

3. IndexDB

   • O armazenamento de blobs parece funcionar, consulte: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
   • Estou preocupado se esta é a única maneira de preencher inicialmente o banco de dados
   • Isso é basicamente um arquivo SQLLite? Posso enviá-lo para upload em massa de banco de dados?
   • Estou inclinado a isso como uma solução. São suas dicas que eu não conheço?

   Requisitos:

   • População inicial rápida (via download) para o banco de dados da Web do cliente
   • Compatível com a API Leaflet TileLayer atual (ou seja, eu preferiria não escrever uma camada personalizada, mas se necessário ...) (por exemplo, MbTiles)
   • Plataforma: laptops com Windows, mas tablets Android e IOS desejados (posso esperar até o IndexDB ser lançado, não preciso de suporte imediato)
   • Prefiro não escrever um aplicativo nativo (EXE, IOS, Android), mas se essa for a melhor maneira ...
   • Geração de mapas da Web no servidor (este será um processo automatizado). O usuário escolhe um local, escolhe mapas e eles são transformados dinamicamente e transformados em um cache de mosaico (esse trabalho já está em grande parte feito).
   • Download inicial em massa rápido
   • Atualizações delta de alteração de mapa (escreverei essa lógica, com base em números de estoque constantes e lógica de data de atualização)
   • Impacto mínimo no aplicativo da Web atual do Leaflet e KendoUI

Atualizar:

Ideia principal: enquanto o aplicativo Web é bastante estável, os blocos de mapas escorregadios são gerados rapidamente para sua localização e que tipo de problema você está fazendo (no back-end). Então, pensei em duas outras maneiras de transferir o 'big bang' inicial e depois atualizá-lo:

O arquivo zip (provavelmente não é uma boa ideia - pois adiciona carga do servidor) também a expansão na máquina do cliente exigirá interação do usuário, mas permite que blocos lisos usem URLs locais

API de arquivos HTML5: eu não olhei para isso em grandes detalhes. Mas parece que há muitas operações para criar uma árvore de arquivos local no formato TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/, o que será interessante testar é o desempenho (por exemplo, posso usar trabalhos na Web para maximizar a largura de banda em disco e na rede). O IndexDB não é amplamente implementado para ser amigável ao trabalhador da Web (interface de sincronização: /programming/10698728/indexeddb-in-web-worker-on-firefox

Encontrei algumas informações adicionais sobre o uso do IndexDB com o Leaflet:

https://github.com/calvinmetcalf/leaflet.pouch (sincroniza couchdb com indexdb para offline) Também aqui estão alguns testes para as velocidades de leitura / gravação para indexdb, websql e loja local: http://jsperf.com/indexeddb -vs-localstorage / 15

E aqui está como usar a API de arquivo de leitura / gravação do javascript: (e também para pedir para aumentar os limites de armazenamento) http://www.html5rocks.com/en/tutorials/file/filesystem/

Obrigado, Tom MacWright (aka tmcw), por alguns bons comentários. Seu exemplo realmente ajudará quando eu criar camadas personalizadas para ingerir os blobs binários.

Ontem fiz alguns testes com o IndexedDB e, usando alguns polyfills e bibliotecas, acho que isso resolverá meus problemas. Agora é hora de colocar um pouco de suor nisso, e irei relatar.

BTW: se você quiser ver meus resultados do meu estudo em bancos de dados do lado do cliente, consulte:

/programming/14113278/storing-image-data-for-offline-web-application-client-side-storage-database

PhoneGap e MBTiles .

WebSQL e IndexDB não serão suficientes. 'Laptops com Windows' não terão o mesmo código que os dispositivos móveis.

Resultados Cache offline de blob para mapas com faixas PNG

Teste

• 171 arquivos PNG (total de 3.2MB)
• Plataformas testadas: Chrome v24, FireFox 18, IE 10
• Também deve funcionar com o Chrome e o FF para Android

Buscar no servidor da web

• usando XHR2 (suportado em quase todos os navegadores) para baixar blob do servidor web
• Fui com o XHR2-Lib de Phil Parsons, que é muito parecido com o JQUERY .ajax ()
  • https://github.com/pmp/xhr2-lib

Armazenamento

• IndexedDB para IE e FireFox
• Chrome: Polyfill (blob armazenado usando a API FileSystem, referência mantida no IndexedDB)
• Um artigo obrigatório sobre "Como os navegadores armazenam dados do IndexedDB"
  • http://www.aaron-powell.com/web/indexeddb-storage
• Nota: O FireFox usa SQLlite para o NOSQL IndexedDB. Essa pode ser a razão do desempenho lento. (blobs armazenados separadamente)
• Nota: O Microsoft IE usa o mecanismo de armazenamento extensível:
  • http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• Nota: o Chrome usa o LevelDB http://code.google.com/p/leveldb/

Exibição

• Estou usando o Leaflet http://leafletjs.com/ para mostrar os blocos do mapa
• Eu usei o plugin da camada de blocos funcional de Ishmael Smyrnow para buscar a camada de blocos do DB
  • https://github.com/ismyrnow/Leaflet.functionaltilelayer
• Comparei a camada de blocos baseada em banco de dados com um armazenamento puramente local (localhost: //)
• Não há diferença perceptível no desempenho! entre usar o IndexedDB e arquivos locais!

Resultados

• Chrome: Buscar (6.551s), Store (8.247s)
• FireFox: Buscar (0.422s), Loja (34.519s)
• IE 10: Buscar (0.668s), Loja: (0.896s)

para que você quase definitivamente não queira usar leaf.pouch, eu fiz isso com dados vetoriais em mente, e não blocos, provavelmente seria melhor usar o PouchDB restrito para armazenar seus blocos, pois você também pode replicar do CouchDB para o carregamento inicial rápido, a resposta de @tmcw acima também funcionaria se você tiver mais de um aplicativo de telefone em vez de uma página da web para celular.

use o formato MBTILES do contêiner SQLite3 padrão com tabela de blocos com o campo blob tile_data com PNG ou JPG ou WebP ou PBF com GZip integrado ao MBTILES.JS https://github.com/tilemapjp/mbtiles.js/tree/master https: // www.npmjs.com/package/Leaflet.TileLayer.MBTiles

você pode converter TMS ou XYZ Tiles em mbtiles com MBUTIL by MapBox. se você precisar gerar uma pasta de blocos, use primeiro GDAL2TILES_Parallel.py ou gdal2tilesp.py as implementações paralelas de multiprocessamento python do original. Ambos exigem GDAL.

lerá mbtiles locais e remotos. Empacote como aplicativo móvel com IONIC ou React Native. ou Desktop com Atom eletrônico. MBTILES são o caminho a percorrer