현재 앱 매니페스트가 있고 여러 플랫폼에서 잘 작동하는 오프라인 HTML5 맵 응용 프로그램 (사용자 정의 추가 기능이있는 Leaflet & KendoUI 기반)이 있습니다. 그러나 매니페스트를 사용하여 실제 맵 타일을 이런 식으로 저장하는 것이 주저합니다 (PNG 파일은 TMS 스타일 타일 캐시로 저장 됨).
이슈 :
- 약 1,000 개의 PNG 파일에 많은 타일 (10MB-50MB)이있을 수 있습니다
- 초기 다운로드 속도가 느려질 수 있으며 사용자에게 진행 상황을 표시하기가 어려울 수 있습니다
- 앱 매니페스트가 작동하거나 전체 오프라인 캐싱이 실패하지 않으면 작동하지 않습니다 ([whatwg.org] [1]에 따름)
- 오프라인 사용자는 때때로 다시 연결하고 타일을 새로 고쳐야합니다. 작은 델타이지만 앱 매니페스트 메커니즘은 매니페스트 업데이트 즉시 모든 js, css 및 PNG 파일을 다시로드합니다.
다른 아이디어 : 웹 응용 프로그램을 미끄러운지도 타일의 저장소와 분리하십시오. 타일을 웹 응용 프로그램 친화적 인 데이터베이스에 저장
최신 정보:
[PouchDB는 최근 이진 Blob에 대한 지원을 추가했습니다. 초기 결과가 양호합니다. 참조 : /programming/16721312/using-pouchdb-as-an-offline-raster-map-cache ]
- 이것은 Ben Nolan이 제안합니다. http://bennolan.com/2011/06/03/offline-mapping.html
- 막대기에지도에 대한 비슷한 작업 : 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 친화적 인 DB에 대한 다음 선택에 대해 집단의 지혜 (및 경험)는 무엇을 말합니까 ?
- SqlLite
- JavaScript와 대화 할 수 있도록 네이티브 앱 래퍼를 만들어야 할 것 같습니다.
- 예 : Windows 용 기본 프로그램에 DLL을 추가하고 Android / IOS 용 PhoneGap
- WebSQL
- 지원 중단
- 호스트 웹 서버에서 쉽게 생성하고 배포 할 수있는 것은 SQL Lite였습니다.
IndexDB
- 얼룩 저장이 작동하는 것 같습니다 : https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/
- 이것이 처음에 DB를 채우는 유일한 방법인지 걱정됩니다.
- 이것이 기본적으로 SQLLite 파일입니까? 대량 DB 업로드 용으로 배송 할 수 있습니까?
- 나는 이것을 해결책으로 기대고 있습니다. 내가 모르는 문제가 있습니까?
요구 사항 :
- 클라이언트 웹 DB에 빠른 초기 채우기 (다운로드를 통해)
- 현재 Leaflet TileLayer API와 호환 가능 (즉, 사용자 정의 계층을 작성하지는 않지만 필요한 경우 ...) (예 : MbTiles)
- 플랫폼 : Windows 랩톱이지만 Android 및 IOS 태블릿이 필요함 (IndexDB가 릴리스 될 때까지 기다릴 수 있으며 즉각적인 지원이 필요하지 않음)
- 오히려 네이티브 앱 (EXE, IOS, Android)을 작성하지는 않지만 그것이 최선의 방법이라면 ...
- 웹 맵의 서버 측 생성 (자동화 프로세스) 사용자가 위치를 선택하고지도를 선택하면 동적으로 변환되어 미끄러운 타일 캐시로 바뀝니다 (이 작업은 이미 대부분 완료되었습니다).
- 빠른 대량 초기 다운로드
- 지도 변경 델타 새로 고침 (일정 재고 번호를 기반으로이 논리를 작성하고 날짜 논리를 업데이트 함)
- 현재 Leaflet & KendoUI 웹 애플리케이션에 미치는 영향 최소화
최신 정보:
주요 배경 아이디어 : 웹 앱은 상당히 안정적이지만, 위치에 따라 미끄러운지도 타일이 생성되며 어떤 유형의 문제 (백엔드에서)가 발생합니다. 그래서 초기 '빅뱅'을 전송하고 업데이트하는 두 가지 다른 방법을 생각했습니다.
Zip 파일 (아마도 좋은 생각은 아닙니다-서버로드를 추가하기 때문에) 클라이언트 시스템에서의 확장에도 사용자 상호 작용이 필요하지만 미끄러운 타일이 로컬 URL을 사용할 수 있습니다
HTML5 파일 API : 나는 이것을 자세히 보지 않았다. :하지만 TMS 형식의 로컬 파일 트리 만들기 위해 대부분의 작업을했다 나타납니다 http://www.html5rocks.com/en/tutorials/file/filesystem/ 예를 들어 내가 웹 작품을 사용할 수 있습니다 (테스트에 흥미로운 일이 될 것이다 어떤 성능을한다 디스크와 인터넷 전체의 대역폭을 최대화하기 위해). IndexDB는 웹 작업자 친화적으로 널리 구현되지 않았습니다 (동기 인터페이스 : /programming/10698728/indexeddb-in-web-worker-on-firefox
Leaflet과 함께 IndexDB를 사용하는 방법에 대한 추가 정보를 찾았습니다.
https://github.com/calvinmetcalf/leaflet.pouch (오프라인의 경우 indexdb와 couchdb 동기화) 또한 indexdb, websql 및 로컬 저장소에 대한 읽기 / 쓰기 속도에 대한 몇 가지 테스트가 있습니다. http://jsperf.com/indexeddb -vs-localstorage / 15
그리고 여기 자바 스크립트에서 읽기 / 쓰기 파일 API를 사용하는 방법이 있습니다 : (그리고 저장 공간 제한을 늘리도록 요청 하십시오 ) http://www.html5rocks.com/en/tutorials/file/filesystem/
좋은 의견을 주신 Tom MacWright (일명 tmcw)에게 감사합니다. 바이너리 블롭을 수집하기 위해 사용자 정의 레이어를 만들 때 실제로 도움이 될 것입니다.
어제 IndexedDB를 사용하여 테스트를 수행했으며 일부 polyfill 및 라이브러리를 사용하여 문제를 해결할 것이라고 생각합니다. 이제 땀을 흘려야 할 때가되었습니다. 다시보고하겠습니다.
BTW : 클라이언트 측 데이터베이스에 대한 연구 결과를 보려면 다음을 참조하십시오.
/programming/14113278/storing-image-data-for-offline-web-application-client-side-storage-database
