When 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.
You 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.
As 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.
The technique uses RequireJS, so there is no more dynamic loading. Templates are bundled within your code which saves some HTTP requests.
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.
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.
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.
In the last post, we showed you the basics of drag and drop. Drag-and-drop functionality is something that computer users have come to take for granted as “just working,” and there are a few ways to enable it within the browser.
You learned how you need to have a drag source and a drop target, and how to specify each in HTML5. And we learned how the dataTransfer object is used to send data between the drag source and the drop target.
In this chapter, we learn more about how to use Drag and Drop with files.
Drag and drop is a part of the HTML5 standard. Drag-and-drop functionality is something that computer users have come to take for granted as “just working,” and there are a few ways to enable it within the browser.
Imagine a computer or smartphone with a pointing device. — a drag operation could be like a mousedown event that is followed by a series of mousemover events, and the drop could be triggered by the mouse being released.
You can use maps with HTML5 Geolocation.
In this post, you will see how to use Bing Maps and Google Maps in your HTML5 Geolocation application.
Map APIs allow you to go deeper. For example, you can:
- Create pushpins
- Provide infoboxes
- Tile layers
- Show a traffic layer
- Provide turn-by-turn directions
- and much more.
Let’s get started.
The HTML5 Geolocation API is used to get the geographical position of a user.
Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude.
Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device’s actual location.
Since this can compromise user privacy, the position is not available unless the user approves it.
This enables the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script loads and executes in the background while the page continues to be parsed.
Without the async (or defer) attribute, a script can block other page content from loading.
The <track> element represents a timed text file to provide users with multiple languages or commentary for videos. You can use multiple tracks and set one as default to be used when the video starts.
You can provide a transcript of the video.
But you may want to build custom controls using its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values).
This post shows how you can build a custom media player using different the media API attributes, events, and methods.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the
video element, but you may need multiple files to support the video formats.
For this demo, I’m using a video that is in the public domain, Popeye for President.
localstorage provides a way to persist data on the client side without using cookies. The localStorage attribute provides persistent storage areas for domains. It allows Web applications to store nearly 10 MB of user data, such as entire documents or a user’s mailbox, on the client for performance reasons.
You can create offline applications using the Application Cache API (or AppCache) that is defined in the HTML5 Specification.
AppCache enables webpages to cache (or save) resources locally, including images, script libraries, style sheets, and more. In addition, AppCache allows URLs to be served from cached content using standard Uniform Resource Identifier (URI) notation.
Appcache was intended to let your web app run offline, no Internet connection required, but it can also be used online to dramatically decrease load times.