Snippet – Checking Internet Connection, No More Hanging App

Messaging-Online-iconWhen you are writing your single page application (SPA) may find that you need to check your connection. The idea is that you might have one set of logic for your connected app and another for when you are disconnected.

In previous posts, AppCache for Offline Apps and Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache, you learned that your Web app did not have to be online to be run. In fact, when building HTML apps for mobile devices, you are running without a connection.

So how do you check? How do you know when you can upload and download new information from the Web?

Many of the comments on StackOverflow have to do with the connection hanging. The following snippets help you work around the issue.

Continue reading “Snippet – Checking Internet Connection, No More Hanging App”

Single Page Apps – Local Data Store with AmplifyJS

imageYou may want to use storage to store data. You can save the data your user has entered in a wizard. Or you might want to save data so you can provide an offline experience. Or you may want to store user preferences. Local storage is a good idea anytime you do not want, or need your user or your application to start all over.

AmplifyJS is a very neat library that provides a consistent API to handle client storage that works in most browsers.

Of course, you can use HTML5 Local Storage. But amplify.store supports IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+ and provides a consistent API to handle storage cross-browser.

Note: Because of the JSON dependency, you need to add json2.js for support in browsers without native JSON support, including IE 5, IE 6, IE 7, Firefox 2.0 and Firefox 3.0.

Continue reading “Single Page Apps – Local Data Store with AmplifyJS”

Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache

image613As you learned in the previous post, you learned how you can load templates inline in your app using RequireJS. The next step is to load and compile a template file. And for your offline app, learn how you can cache templates. Caching saves a round trip to the server, making your application incredibly responsive.

In this tutorial we will compile, load, and cache LoDash (or Underscore) templates and then use those templates to transform data in our single page app.

The technique uses RequireJS, so there is no more dynamic loading. Templates are bundled within your code which saves some HTTP requests.

Continue reading “Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache”

HTML5 Tutorial – Messaging

HTML5_Logo_256Web browsers, for security and privacy reasons, prevent documents in different domains from affecting each other; that is, cross-site scripting is disallowed.

That means that communication between frames, tabs, and windows was restricted for security reasons. If browsers allowed you to access content loaded into other frames and tabs, site could steal information another site using scripting. So, attempting to retrieve or modify content loaded from another source raises a security exception and prevents the operation.

But there are cases where you want content from different sites to be able to communicate inside the browser, such as for mash-ups.

To meet this need, HTML5 allows Cross-Document Messaging and Channel Messaging.

In this post, you will learn:

  • How to send a message to an iFrame using Cross-Document Messaging.
  • Describe several security considerations in using Cross-Document Messaging.
  • How to send and receive a message using Channel Messaging.
  • Describe the function of ports when using Channel Messaging.

Continue reading “HTML5 Tutorial – Messaging”

ASP.NET – Uploading Files Using Drag and Drop (Client/Server)

imageIn our last few posts, we’ve been talking about HTML5 Drag and Drop. The feature lets uses drag elements on your page and drop them onto a target.

You can use this feature for users to upload files to your server.

In this post, you’ll learn:

  • How you can provide HTML5 Drag and Drop
  • How to send files using jQuery Ajax.
  • Learn how to attach additional data onto the data sent to the sever
  • Create a generic handler in ASP.NET to receive the files.

Of course other servers can be used, such as ASP.NET MVC, ASP.NET Web API, PHP, and Node.js. I’ll provide references to sample code for other servers in the References section.

Continue reading “ASP.NET – Uploading Files Using Drag and Drop (Client/Server)”