Tuesday, January 23rd, 2007
Dojo Offline Toolkit in Code
Brad Neuberg keeps it moving with the Dojo Offline Toolkit API. His latest work details the early API via example. The example is a web based email system, and the code using the API is below (and shows you how you would use it).
The interesting news is that you can start work even without the local proxy that was mentioned before, as long as you set the right headers for development.
JAVASCRIPT:
-
-
-
// bring in Dojo Offline
-
dojo.require("offline.*");
-
-
// indicate what files we want offline, such
-
// as our application's images, HTML, CSS,
-
// JavaScript, etc.
-
offline.files.put(
-
["/images/toolbar.gif",
-
"index.html",
-
"/css/global.css",
-
"dojo.js"
-
]);
-
-
// define our application's name; this will be used to
-
// customize the default Offline Toolkit UI
-
offline.ui.appName = "Web Outlook";
-
-
// define what elements we would like disabled when we go offline;
-
// these will be re-enabled when we go online
-
offline.ui.disableElementsOffline(
-
["configurationLink",
-
"searchField"
-
]);
-
-
var emails, contacts, tasks;
-
-
// called when the page is finished loading and the offline toolkit
-
// is ready to be used
-
offline.onLoad = function(){
-
// define where to put our offline user data; when
-
// we sync with the server, each kind of data will have
-
// an itemType, such as "emails", "tasks", etc. These
-
// data structures will automatically be kept in sync
-
// so we can use them in our application, and will
-
// automatically be persisted in local client-side
-
// storage
-
emails = offline.getDataStore("email");
-
contacts = offline.getDataStore("contact");
-
tasks = offline.getDataStore("task");
-
}
-
-
// default implementation of offline.onOffline and offline.onOnline
-
// will simply use the disableElementsOffline values
-
// to enable and disable these elements, and do an automatic synchronization inside of onOnline
-
-
function addContact(contact){
-
contacts.newItem(contact);
-
}
-
-
function displayEmails(){
-
var displayMe = null;
-
-
if(offline.isOnline() == false){
-
displayMe = emails.find().items;
-
}else{
-
displayMe = // ...remotely fetch emails
-
}
-
-
// do something with array of emails
-
}
-
-
function deleteTask(task){
-
tasks.deleteItem(task);
-
}
-
-
function sendEmail(email){
-
if(offline.isOnline == true){
-
// send this email to the server
-
}else{
-
// else we are offline; just queue this email up
-
-
// store it's value in our offline cache
-
emails.newItem(email);
-
-
// now create a custom sync log entry for a 'send' command
-
var c = new offline.sync.Command();
-
c.name = "send";
-
c.itemType = "email";
-
c.item = email;
-
-
offline.sync.log.add(c);
-
-
// later, when we sync, this command will be replayed to the
-
// server for the email to be sent
-
}
-
3.3 rating from 19 votes
I am excited about the progress. Looking forward to implementing offline capabilities in my WCM editor with this soon.
Don’t get me wrong, Dojo and, in particular, the offline toolkit is amazing, but I can’t think of a project that I can use it for. Sure, there is e-mail and docs, but that’s all I can think of. Tinkered with creating a way users could add ESPN.com stories to a bag and have them available offline, but from research, there isn’t much of a market for it.
@Ajax 2.0 developer -
Sure there is a market for this. Maybe not for traditional websites like news. But more for the backend web applications like content management systems, online blog editors, wikkis , order entry for mobile workers (CRM and lead management such as salesforce.com?) and the list goes on. I can think of at least a dozen more.
I think that websites with Dojo offline wil have limited functionlity.
Sorting, searching in text and so on.. JavaScript cannot do this so good as server-side languages. And in other side, it will take a long time to implement all features of website in JS.
One case where this could be huge is offering a safety net for cases when the user has invested quite a bit of time in an app and then loses their network connection for some reason. If the app can’t access the server, it can store the data locally till the user re-connects. I’ve been using a background Auto-save for cases like that, but for large amounts of data and a slow connection, the auto-saving can be tricky, and the excuse “Well you have all of your data up till 5 minutes ago” tends not to go over very well when a client wrote that critical paragraph 3 minutes before the net went down…
@Solsys, I see, thanks for explanation. In that case this toolkit will be really useful.
I think the offline toolkit will be very useful in web application, such as web application. If there is any new release to see what outcome could be or which level of data saving it can go up to. It will be great. (such as just form data, or some other features. )