오프라인/온라인 데이터 동기화 디자인 (자바 스크립트)

Question

현재 오프라인 지원을 위해 모든 HTML5 도구를 사용하여 오프라인 웹 응용 프로그램을 작성 중입니다. 그러나 지금은 오프라인 데이터가 서버 및 서버 데이터를 클라이언트로 다시 보내도록 동기화 모듈을 작성하는 것에 대해 생각하기 시작했습니다. 이제는 이것이 이전에 이루어 졌음을 확신합니다. 모바일 장치와 많은 다른 것들에 영향을 미치는 매우 고전적인 디자인 문제를 의미합니다. 그래서 저는 이런 종류의 일에 좋은 디자인 리소스를 가르쳐 주실 수 있습니까?

이제는 너무 정교해질 필요가 없습니다. 동일한 데이터에 액세스하는 여러 사용자를 처리하지 않아서 충돌을 병합하지 않아도 행복합니다. 앞으로 이러한 옵션을 사용할 수있는 디자인입니다.

또한이 유형의 것을 구현하는 오픈 소스 프로젝트가 있습니까? 나는 다른 사람의 코드 (라이센스가 허락한다면)를 찢어 버릴 수있는 것이 아니며 나는 항의하는 것에 만족한다.

Answer 1

비슷한 문제가있었습니다. 순수한 JSON 방식을 사용하기로 결정했습니다. 내가 양식 제출에 데려 갈거야 솔루션은 다음과 같습니다 사용자가 후 정상적인 폼 POST로 양식을 제출 온라인

경우

1. 캐치 형태는 사용자가 온라인
2. 확인 여부 이벤트 제출
3. 사용자가 오프라인 인 경우 다음 JSON 요청을 문자열로 지정하고 로컬로 저장합니다 (Web SQL 데이터베이스를 사용하기로 결정 함). 대기열 테이블은 단순히 Uri 및 Payload입니다.

그런 다음 온라인/오프라인 이벤트에 대한 전역 이벤트 후크가 있습니다. 사용자가 다시 온라인 상태가되면 대기열을 검사하고 대기열에 항목이 있으면 JSON POST 요청으로이를 보냅니다.

JSON 데이터를 가져 와서 오프라인으로 캐싱하려는 경우 jquery.offline을 살펴보십시오.

양방향으로 동기화 할 때의 과제는 대기중인 CRUD 작업으로 로컬 캐시 목록을 업데이트해야한다는 것입니다.

이 작업을 수행하는보다 일반적인 방법을 찾고 싶습니다.

Answer 2

나는 똑같은 문제에 직면했고 저장과 git에 XML 파일을 사용하여 변경 사항을 추적하고 연결이 가능 해지면 자동으로 커밋했다. 동기화는 쉘 스크립트와 스크립트를 시작하는 cronjob에서 일반적인 git commit/push/pull 명령으로 수행됩니다. JSON을 텍스트 파일에 저장하는 경우에도 마찬가지입니다.

Answer 3

내 생각에 유사한 디자인 (아직 시도하지 않음)은 PouchDB과 같은 것을 사용하여 데이터를 로컬에 저장 한 다음 원격 소파 인스턴스와 동기화하는 것입니다.

Answer 4

우리 팀은 이미 오프라인/온라인 모드로 앱을 개발했습니다.

우리는 다음 다음 라이브러리를 사용하고 있습니다 :

• rack-offline
• jquery
• backbonejs
• backbonejs-localStorage
• backbonejs-queues
• jammit

Google은 rack-offline을 사용하여 페이지의 콘텐츠 렌더링을 위해 모든 리소스 파일과 jst 템플릿을 캐싱합니다. backbonejs 및 backbonejs-localStorage는 클라이언트에서 MVC 응용 프로그램을 만드는 데 도움이됩니다. 그것은 꽤 굉장합니다, 당신은 그것을 시도해야합니다. 우리는 항상 데이터 저장을 위해 localstorage를 사용합니다. example 모델 객체에 대한 게시물을 만들고 localStorage에 저장하면 동기화 대기열이 트리거됩니다 (자동 백그라운드 동기화 프로세스에 대한 타이머 백그라운드 작업자가 있음). 각 모델마다 큐 동기화 트리거에 의해 실행되어야하는 별도의 동기화 클래스가 있습니다. 네비게이터 .onLine => true이면 업데이트 할 데이터가있는 서버로 요청을 보냅니다. 브라우저를 닫으면 어쨌든 localStorage에 대기열이 있기 때문에 데이터가 손실되지 않습니다. 다음 번에 클라이언트는 첫 번째 로딩 할 때 navigator.onLine => true로 데이터를 동기화합니다.

사용하는 방법 당신이 github에 내 작은 프로젝트를 확인할 수 있습니다 랙 - 오프라인 :

pomodoro-app

행운을 빕니다!

Answer 5

현재 비슷한 webapp에서 작업 중입니다.

1. 양식이 실제로 제출되지 않았습니다. - "제출"버튼이 직렬화 된 양식 데이터를 실제로 일부 큐의 localStorage에 저장합니다. 이렇게하면 제출 제출 및 양식 제출 중 연결 해제를 처리하기위한 추가 오류 처리 코드 작성으로 인한 문제를 방지 할 수 있습니다.
2. 데이터 저장 후 전송 스크립트가 트리거됩니다. 온라인/오프라인 상태를 확인합니다.
3. 온라인 상태 일 때 온라인에서 서버 (AJAX 요청)의 최신 데이터를 보내고 성공하면 대기열에서 삭제하고 짧은 시간이 지난 후 다음 데이터를 계속 보냅니다.
4. 일정 시간 후 (setTimeout()에 의해) 다시 점검을 예약합니다.

Answer 6

잠재적으로 무거운 Ext JS/Sencha 프레임 워크를 사용하고 있다면 오프라인 (예 : localStorage) 지원과 로컬에서 서버로 쓰기 쓰루를위한 프록시 접근 방식을 갖춘 훌륭한 데이터 API를 갖추고 있습니다. 나는 Sencha Touch (모바일 전용)를 사용합니다.

웹 저장소를 디버깅하려면 Weinre를 확인하십시오.

Answer 7

꽤 달콤한 동기화 및 충돌 해결 기능이있는 노드 MVC 프레임 워크 Derby를 확인하십시오. http://derbyjs.com/

Answer 8

아마도 가장 좋은 해결책은 DerbyJS입니다. 그러나 Derby는 아직 개발 중이며 오프라인 지원은 계획 단계에 불과하며 아직 구현되지 않았습니다. Google 그룹 (http://groups.google.com/group/derbyjs/browse_thread/thread/7e7f4d6d005c219c)에서 앞으로 계획중인 내용에 대한 추가 정보를 찾을 수 있습니다.

Answer 9

개인적으로 온라인/오프라인 여부를 확인하는 indexedDB API 위에 래퍼를 작성하는 것이 좋습니다.

• 오프라인, 그냥 색인화에 저장하고 설정하는 경우는 거짓 지속 모든 문서를 얻고 MongoDB를 또는 백엔드에 다음 새로운 저장 equivelant 뭔가에 저장, 모든 문서
• 온라인의 경우에 false로 플래그를 지속 persisted 플래그가 true 인 indexedDB와 서버의 문서

I've written a small one

당신은 자동으로 지속 플래그를 설정하는 터널을 증가해야하고 또한 터널 백엔드에이 문서의 동기화