I had a similar problem. I decided to use a purely JSON in and out approach. The solution I'm taking on form submission is:
catch the form submit event
check whether or not the user is online
if user is online then submit the form as normal form POST
if user is offline then stringify a JSON request and store it locally (I decided to use Web SQL Database). Queue table is simply Uri and Payload.
Then I have global event hooks for the online / offline events. When the user comes back online, it checks the queue, and if the queue has items in it, it then sends them through as JSON POST requests.
If you are primarily interested in getting JSON data and caching it for offline usage, then take a look at jquery.offline.
The challenge with synchronizing in both direction is that you need to update the local cached lists with any CRUD work that you have queued.
Using rack-offline we are caching all resources files and jst template for rendering content on the page. backbonejs and backbonejs-localStorage helps to make MVC app on the client. it's pretty awesome, you should try it. we are always using localstorage for saving data. when we create post for example model object and saving to the localStorage, we are triggering queues for syncing(also we have by timer background worker for auto running sync process). For each model we have separate sync class that should be run by queue sync trigger. if your navigator.onLine => true we are sending requests to the server with data for updating. if you close browser, anyway you don't loose your data because you have queues in the localStorage. in the next time client will sync data on the first loading with navigator.onLine => true.
How to use rack-offline you can check my small project in the github:
I faced the same problem and ended up using an XML-file for storage and git to track changes and commit them automatically, as soon as a connection is available. The sync is done with the usual git commit / push / pull commands in a shell script and a cronjob starting the script. This would also work if you store JSON in a textfile.
I'm currently working on similar webapp. I've decided to make such workflow:
Form isn't really submitted - "Submit" button actually saves serialized form data to localStorage (in some queue). This saves from troubles with submit capturing and from writing additional error processing code to handle disconnect during form submission.
Transport script is triggered after data saving. It checks online/offline state.
When online, it tries to send latest data from queue to server (AJAX request), and deletes it from queue on success (and continues to send next data from queue after short timeout).
It shedules re-check after some period of time (by setTimeout()).
If you are up for using the potentially heavy Ext JS / Sencha framework, it has a nice data API with offline (e.g. localStorage) support and a proxy approach for write-thru to local then server. I use Sencha Touch (mobile-specific).
DerbyJS were probably the best solution. However Derby is still in development and offline support is only in planning and has not yet been implemented. In the Google Group ( http://groups.google.com/group/derbyjs/browse_thread/thread/7e7f4d6d005c219c ) you can find aditional information about what is planned in the future.
I'd personally recommend you write a wrapper on top of the indexedDB API that checks whether you are online/offline.
if offline, just store in indexedDB and set persisted flag to false on all documents
if online, get all documents where persisted is false and store them in mongodb or something equivelant on the backend, then store new documents in both indexedDB and on the server with the persisted flag to true.
发布评论
评论（9）
我有类似的问题。我决定使用纯粹的 JSON 输入和输出方法。我对表单提交采取的解决方案是：
然后我有用于在线/离线事件的全局事件挂钩。当用户重新上线时，它会检查队列，如果队列中有项目，则会将它们作为 JSON POST 请求发送。
如果您主要对获取 JSON 数据并将其缓存以供离线使用感兴趣，请查看 jquery.offline。
双向同步的挑战是您需要使用已排队的任何 CRUD 工作更新本地缓存列表。
我想找到一种更通用的方法来做到这一点。
I had a similar problem. I decided to use a purely JSON in and out approach. The solution I'm taking on form submission is:
Then I have global event hooks for the online / offline events. When the user comes back online, it checks the queue, and if the queue has items in it, it then sends them through as JSON POST requests.
If you are primarily interested in getting JSON data and caching it for offline usage, then take a look at jquery.offline.
The challenge with synchronizing in both direction is that you need to update the local cached lists with any CRUD work that you have queued.
I'd like to find a more generic way to do this.
我的类似设计计划（尚未尝试）是使用类似 PouchDB 的东西在本地存储数据，然后将其与远程沙发实例同步。
My plan for a similar design (not yet tried) is to use something like PouchDB to store the data locally and then sync it with a remote couch instance.
查看 Derby，这是一个 Node MVC 框架，它具有一些非常实用的同步和冲突解决功能。 http://derbyjs.com/
Check out Derby, a Node MVC framework that has some pretty sweet synchronization and conflict resolution features. http://derbyjs.com/
在我们的团队中，我们已经开发了离线/在线模式的应用程序。
我们正在使用以下库：
使用rack-offline我们缓存所有资源文件和jst模板用于在页面上呈现内容。 backbonejs 和backbonejs-localStorage 有助于在客户端制作MVC 应用程序。非常棒，你应该尝试一下。我们总是使用本地存储来保存数据。当我们创建 post 例如模型对象并保存到 localStorage 时，我们将触发同步队列（我们也通过计时器后台工作程序来自动运行同步过程）。对于每个模型，我们都有单独的同步类，应由队列同步触发器运行。如果你的 navigator.onLine =>确实，我们正在向服务器发送带有更新数据的请求。如果您关闭浏览器，无论如何您都不会丢失数据，因为本地存储中有队列。下次客户端将在第一次加载时使用 navigator.onLine => 同步数据真的。
如何使用rack-offline你可以在github上查看我的小项目：
pomodoro-app
祝你好运！
in our team we have already developed app in offline/online mode.
we are using the next following libraries:
Using rack-offline we are caching all resources files and jst template for rendering content on the page. backbonejs and backbonejs-localStorage helps to make MVC app on the client. it's pretty awesome, you should try it. we are always using localstorage for saving data. when we create post for example model object and saving to the localStorage, we are triggering queues for syncing(also we have by timer background worker for auto running sync process). For each model we have separate sync class that should be run by queue sync trigger. if your navigator.onLine => true we are sending requests to the server with data for updating. if you close browser, anyway you don't loose your data because you have queues in the localStorage. in the next time client will sync data on the first loading with navigator.onLine => true.
How to use rack-offline you can check my small project in the github:
pomodoro-app
Good luck!
我遇到了同样的问题，最终使用 XML 文件进行存储，并使用 git 来跟踪更改并在连接可用时自动提交它们。同步是通过 shell 脚本中的常用 git commit/push/pull 命令和启动脚本的 cronjob 完成的。如果您将 JSON 存储在文本文件中，这也适用。
I faced the same problem and ended up using an XML-file for storage and git to track changes and commit them automatically, as soon as a connection is available. The sync is done with the usual git commit / push / pull commands in a shell script and a cronjob starting the script. This would also work if you store JSON in a textfile.
我目前正在开发类似的网络应用程序。我决定制定这样的工作流程：
I'm currently working on similar webapp. I've decided to make such workflow:
如果您准备使用可能很重的 Ext JS / Sencha 框架，它有一个很好的数据 API，具有离线（例如 localStorage）支持和用于写入本地服务器的代理方法。我使用 Sencha Touch（移动专用）。
要调试 Web 存储，请查看 Weinre。
If you are up for using the potentially heavy Ext JS / Sencha framework, it has a nice data API with offline (e.g. localStorage) support and a proxy approach for write-thru to local then server. I use Sencha Touch (mobile-specific).
For debugging web storage, check out Weinre.
DerbyJS 可能是最好的解决方案。但Derby仍在开发中，线下支持仅在规划中，尚未实施。在 Google 网上论坛 (http://groups.google.com/group/derbyjs/ browser_thread/thread/7e7f4d6d005c219c ）您可以找到有关未来计划的更多信息。
DerbyJS were probably the best solution. However Derby is still in development and offline support is only in planning and has not yet been implemented. In the Google Group ( http://groups.google.com/group/derbyjs/browse_thread/thread/7e7f4d6d005c219c ) you can find aditional information about what is planned in the future.
我个人建议您在 indexedDB API 之上编写一个包装器来检查您是否在线/离线。
我写了一个小
您必须增强隧道以自动设置持久标志，并将这些文档的同步通过隧道传输到后端
I'd personally recommend you write a wrapper on top of the indexedDB API that checks whether you are online/offline.
I've written a small one
You would have to augment the tunnel to set the persisted flag automatically and also tunnel the synchronization of these documents to the backend