ขณะนี้ฉันมีแอปพลิเคชั่นแผนที่ HTML5 ออฟไลน์ (สร้างขึ้นบน Leaflet & KendoUI พร้อมส่วนเพิ่มเติมที่กำหนดเอง) ที่มีรายการแอปและทำงานได้ดีบนหลายแพลตฟอร์ม อย่างไรก็ตามฉันลังเลที่จะใช้ไฟล์ Manifest เพื่อจัดเก็บไทล์แผนที่จริงด้วยวิธีนี้ (ไฟล์ PNG ที่จัดเก็บเป็นแคชสไตล์ไทม์ TMS)
ปัญหาที่พบ:
- อาจมีไทล์มาก (10MB - 50MB) ในไฟล์ PNG ประมาณ 1,000 ไฟล์
- การดาวน์โหลดเริ่มต้นอาจช้ามาก (และยากที่จะแสดงความคืบหน้าต่อผู้ใช้)
- แอปพลิเคชันทำงานหรือไม่หากไม่ใช้การแคชออฟไลน์ทั้งหมดจะล้มเหลว (สอดคล้องกับ [whatwg.org] [1])
- ผู้ใช้ออฟไลน์จะเชื่อมต่อใหม่และต้องการรับการรีเฟรชของกระเบื้องเป็นครั้งคราวซึ่งเป็นเดลต้าเล็ก ๆ แต่กลไกรายการแอปจะโหลดไฟล์ js, css และ PNG ทั้งหมดใหม่ทันทีที่อัปเดตรายการ
แนวคิดทางเลือก:แยกเว็บแอปพลิเคชันออกจากที่เก็บข้อมูลของแผ่นแผนที่แบบลื่น จัดเก็บไทล์ในฐานข้อมูลที่เป็นมิตรกับเว็บแอปพลิเคชัน
ปรับปรุง:
[PouchDB เพิ่งเพิ่มการสนับสนุนสำหรับ blobs ไบนารี ฉันได้รับผลลัพธ์เบื้องต้นที่ดี ดู: /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]
- สิ่งนี้แนะนำโดย Ben Nolan http://bennolan.com/2011/06/03/offline-mapping.html
- งานที่คล้ายกันบน Maps on the Stick: http://developmentseed.org/blog/2010/oct/02/maps-stick-version-2-released/ ([เลิกใช้งาน] [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/
คำถาม: ภูมิปัญญาส่วนรวม (และประสบการณ์) พูดเกี่ยวกับตัวเลือกต่อไปนี้สำหรับฐานข้อมูลที่เป็นมิตรกับ JavaScript:
- SQLlite
- ดูเหมือนว่าคุณจะต้องสร้าง wrapper แอพสำหรับสิ่งนี้เพื่อให้สามารถพูดคุยกับ JavaScript ได้
- เช่นเพิ่ม DLL ให้คุณเป็นโปรแกรมเนทิฟสำหรับ windows และ PhoneGap สำหรับ android / IOS
- WebSQL
- depricated
- แต่มันเป็น SQL Lite ที่ฉันสามารถสร้างและแจกจ่ายได้อย่างง่ายดายจากโฮสต์เว็บเซิร์ฟเวอร์
IndexDB
- ดูเหมือนว่าการจัดเก็บ blobs จะใช้งานได้: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- ฉันกังวลว่านี่เป็นวิธีเดียวที่จะเติมฐานข้อมูลในขั้นต้นได้หรือไม่
- นี่เป็นไฟล์ SQLLite หรือไม่? ฉันสามารถจัดส่งเพื่ออัปโหลดฐานข้อมูลจำนวนมากได้หรือไม่
- ฉันเอนตัวไปทางนี้เพื่อแก้ปัญหา gotchas ของพวกเขาที่ฉันไม่รู้เกี่ยวกับ?
ที่ต้องการ:
- ประชากรเริ่มต้นอย่างรวดเร็ว (ผ่านการดาวน์โหลด) ไปยังเว็บฐานข้อมูลลูกค้า
- เข้ากันได้กับ Leaflet TileLayer API ปัจจุบัน (เช่นฉันไม่ต้องการเขียนเลเยอร์ที่กำหนดเอง แต่ถ้าจำเป็น ... ) (เช่น MbTiles)
- แพลตฟอร์ม: แล็ปท็อป Windows แต่ต้องการแท็บเล็ต Android และ IOS (ฉันสามารถรอจนกว่าจะปล่อย IndexDB ไม่ต้องการการสนับสนุนในทันที)
- ฉันจะไม่เขียนแอพพื้นฐาน (EXE, IOS, Android) แต่ถ้าเป็นวิธีที่ดีที่สุด ...
- การสร้างแผนที่เว็บฝั่งเซิร์ฟเวอร์ (นี่จะเป็นกระบวนการอัตโนมัติ) ผู้ใช้เลือกสถานที่เลือกแผนที่และพวกเขาได้รับการแปลงแบบไดนามิกและกลายเป็นแคชไทล์ลื่น (งานนี้เสร็จแล้วส่วนใหญ่แล้ว)
- การดาวน์โหลดเริ่มต้นจำนวนมากอย่างรวดเร็ว
- การเปลี่ยนแปลงแผนที่เดลต้ารีเฟรช (ฉันจะเขียนตรรกะนี้ตามจำนวนหุ้นคงที่และตรรกะวันที่อัพเดท)
- ส่งผลกระทบน้อยที่สุดต่อเว็บแอปพลิเคชัน Leaflet & KendoUI ปัจจุบัน
ปรับปรุง:
แนวคิดพื้นหลังที่สำคัญ: ในขณะที่แอปพลิเคชันเว็บมีความเสถียรพอสมควรแผ่นแผนที่แบบลื่นไหลจะถูกสร้างขึ้นในทันทีสำหรับตำแหน่งของคุณและปัญหาประเภทใดที่คุณกำลังทำอยู่ (ที่ส่วนท้าย) ดังนั้นฉันจึงคิดถึงวิธีอื่นสองวิธีในการถ่ายโอน 'บิ๊กแบงเริ่มต้น' จากนั้นอัปเดต:
ไฟล์ซิป (อาจไม่ใช่ความคิดที่ดี - เนื่องจากเป็นการเพิ่มโหลดเซิร์ฟเวอร์) นอกจากนี้การขยายตัวบนเครื่องไคลเอนต์จะต้องมีการโต้ตอบกับผู้ใช้ แต่จะอนุญาตให้ไทล์ลื่นเพื่อใช้ url ของท้องถิ่น
API ของไฟล์ HTML5: ฉันยังไม่ได้ดูรายละเอียดอย่างนี้ แต่ดูเหมือนว่าการดำเนินการส่วนใหญ่จะสร้างแผนผังไฟล์ในเครื่องในรูปแบบ TMS: http://www.html5rocks.com/en/tutorials/file/filesystem/สิ่งที่น่าสนใจในการทดสอบคือประสิทธิภาพ (เช่นฉันสามารถใช้งานเว็บได้หรือไม่ เพื่อเพิ่มแบนด์วิดท์สูงสุดให้กับดิสก์และทั่วเน็ต) IndexDB ไม่ได้ถูกนำมาใช้อย่างกว้างขวางเพื่อให้เป็นมิตรกับผู้ปฏิบัติงานเว็บ (ซิงค์อินเตอร์เฟส: /programming/10698728/indexeddb-in-web-worker-on-firefox
ฉันพบข้อมูลเพิ่มเติมเกี่ยวกับการใช้ IndexDB กับ Leaflet:
https://github.com/calvinmetcalf/leaflet.pouch (ซิงค์ couchdb กับ indexdb สำหรับออฟไลน์) และนี่คือการทดสอบความเร็วในการอ่าน / เขียนสำหรับ indexdb, websql และร้านค้าในพื้นที่: http://jsperf.com/indexeddb -vs-localStorage / 15
และนี่คือวิธีใช้ API ไฟล์อ่าน / เขียนจาก javascript: (และเพื่อขอเพิ่มขีด จำกัด พื้นที่เก็บข้อมูล) http://www.html5rocks.com/en/tutorials/file/filesystem/
ขอบคุณ Tom MacWright (aka tmcw) สำหรับการตอบรับที่ดี ตัวอย่างของคุณจะช่วยได้จริง ๆ เมื่อฉันได้สร้างเลเยอร์ที่กำหนดเองเพื่อนำเข้าไปในไบนารี blobs
ฉันทำการทดสอบกับ IndexedDB เมื่อวานและด้วยการใช้ polyfills และไลบรารี่ฉันคิดว่ามันจะแก้ปัญหาของฉันได้ ตอนนี้เป็นเวลาที่จะทำให้เหงื่อออกและฉันจะรายงานกลับ
BTW: ถ้าคุณต้องการดูผลลัพธ์ของการศึกษาของฉันในฐานข้อมูลฝั่งไคลเอ็นต์ให้ดู:
/programming/14113278/storing-image-data-for-offline-web-application-client-side-storage-database
