J'ai actuellement une application de carte HTML5 hors ligne (construite sur Leaflet et KendoUI avec des ajouts personnalisés) qui a un manifeste d'application et fonctionne très bien sur plusieurs plates-formes. Cependant, j'hésite à utiliser le manifeste pour stocker les tuiles de carte réelles de cette façon (fichiers PNG stockés sous forme de cache de tuiles de style TMS).
Problèmes:
- Il pourrait y avoir beaucoup de tuiles (10 Mo - 50 Mo) dans environ 1 000 fichiers PNG
- Le téléchargement initial peut être très lent (et difficile de montrer la progression à l'utilisateur)
- Les manifestes d'application fonctionnent ou ne fonctionnent pas s'ils ne le font pas, la mise en cache hors ligne entière échouera (selon [whatwg.org] [1])
- L'utilisateur hors ligne se reconnectera de temps en temps et devra obtenir des rafraîchissements des tuiles, ce sont de petits deltas mais le mécanisme du manifeste de l'application rechargerait tous les fichiers js, css et PNG dès que les mises à jour du manifeste
Idée alternative: séparer l'application Web du stockage des tuiles de carte glissantes. Stockez les tuiles dans une base de données conviviale pour les applications Web
Mise à jour:
[PouchDB a récemment ajouté la prise en charge des blobs binaires. J'obtiens de bons premiers résultats. Voir: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]
- Ceci est suggéré par Ben Nolan http://bennolan.com/2011/06/03/offline-mapping.html
- Travaux similaires sur Maps on a Stick: http://developmentseed.org/blog/2010/oct/02/maps-stick-version-2-released/ ([obsolète] [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/
Question: Que dit la sagesse collective (et l'expérience) des choix suivants pour une base de données compatible JavaScript:
- SqlLite
- On dirait que vous devez créer un wrapper d'application natif pour cela afin de lui permettre de parler avec JavaScript
- Par exemple, ajoutez votre DLL à un programme natif pour Windows et PhoneGap pour Android / IOS
- WebSQL
- déprécié
- mais c'était un SQL Lite que je pouvais facilement générer et distribuer depuis le serveur web hôte
IndexDB
- Le stockage des objets blob semble fonctionner, voir: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- Je suis inquiet si c'est le seul moyen de remplir initialement la base de données
- S'agit-il essentiellement d'un fichier SQLLite? Puis-je l'expédier pour un téléchargement de base de données en masse?
- Je penche vers cette solution. Est-ce que leurs accrochages sont inconnus?
Exigences:
- Population initiale rapide (via téléchargement) vers la base de données Web du client
- Compatible avec l'API Leaflet TileLayer actuelle (c'est-à-dire que je préfère ne pas écrire de couche personnalisée, mais si nécessaire ...) (par exemple MbTiles)
- Plateforme: ordinateurs portables Windows, mais tablettes Android et IOS souhaitées (je peux attendre la sortie d'IndexDB, pas besoin de support immédiat)
- Je préfère ne pas écrire une application native (EXE, IOS, Android) mais si c'est le meilleur moyen ...
- Génération côté serveur de cartes Web (ce sera un processus automatisé). L'utilisateur choisit un emplacement, choisit des cartes, et elles sont transformées dynamiquement et transformées en cache de tuiles glissantes (ce travail est déjà en grande partie effectué).
- Téléchargement initial rapide en masse
- Rafraîchissement du delta de changement de carte (j'écrirai cette logique, basée sur des numéros de stock constants et une logique de date de mise à jour)
- Impact minimal sur l'application Web actuelle de Leaflet et KendoUI
Mise à jour:
Idée d'arrière-plan clé: bien que l'application Web soit assez stable, les tuiles de carte glissantes sont générées à la volée pour votre emplacement et le type de problème que vous faites (à l'arrière-plan). J'ai donc pensé à deux autres façons de transférer le «big bang» initial, puis à mettre à jour:
Fichier Zip (probablement pas une bonne idée - car il ajoute la charge du serveur) également l'expansion sur la machine client nécessitera une interaction de l'utilisateur, mais elle permet aux tuiles glissantes d'utiliser les URL locales
API de fichiers HTML5: je n'ai pas examiné cela en détail. Mais il semble que la plupart des opérations permettent de créer une arborescence de fichiers locale au format TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/ ce qui sera intéressant à tester est la performance (par exemple, puis-je utiliser des œuvres Web pour maximiser la bande passante sur le disque et sur le net). IndexDB n'est pas largement implémenté pour être convivial pour les travailleurs Web (interface de synchronisation: /programming/10698728/indexeddb-in-web-worker-on-firefox
J'ai trouvé quelques informations supplémentaires sur l'utilisation d'IndexDB avec Leaflet:
https://github.com/calvinmetcalf/leaflet.pouch (synchronise couchdb avec indexdb pour hors ligne) Voici également quelques tests pour les vitesses de lecture / écriture pour indexdb, websql et magasin local: http://jsperf.com/indexeddb -vs-localstorage / 15
Et voici comment utiliser l'API de fichier en lecture / écriture à partir de javascript: (et aussi pour demander d'augmenter les limites de stockage) http://www.html5rocks.com/en/tutorials/file/filesystem/
Merci, Tom MacWright (alias tmcw), pour certains bons commentaires. Votre exemple va vraiment aider lorsque j'arriverai à créer des calques personnalisés pour ingérer les blobs binaires.
J'ai fait quelques tests hier avec IndexedDB et en utilisant des polyfills et des bibliothèques, je pense que cela résoudra mes problèmes. Il est maintenant temps de mettre un peu de sueur dans tout cela, et je ferai rapport.
BTW: si vous voulez voir mes résultats de mon étude sur les bases de données côté client voir:
/programming/14113278/storing-image-data-for-offline-web-application-client-side-storage-database
