HTML5 JavaScript APIs

HTML5 JavaScript APIs

We have already studied some of the HTML5 JavaScript APIs, including:

    • The canvas API,
    • The form validation API,
    • The audio and video elements API, the getUserMedia API (also related to audio and video elements),

However, HTML5 also comes with several APIs that are not directly related to HTML elements, namely: the Orientation API; the Geolocation API; most APIs related to client-side persistence; the Web Storage API; the Web Workers API; and some other APIs that are not in the HTML5 specification, but are related to it, such as the GamePad API, the Web Audio API, etc.

    • The HTML5 Cache API for making Web sites and Web applications work offline.
    • The “Web Storage” API, sort of “super cookies”, for storing pairs of key/values client side. This API is useful for enabling Web sites to save/restore their state, or for writing serverless applications. You will see a small contact manager that stores its data locally, without the need for a remote Web server.
    • The File API, that enables Web applications to work with local files. For example, a picture editor, or media player that can work with your music and video files – the ones on your phone or your hard disk! With this API you will also be able to preview image files directly in your page – there is no need to send them to a remote server.
    • The Geolocation API for obtaining data such as longitude, latitude, altitude (when available), and speed. You will learn how to write applications in combination with interactive maps. You will also learn how to guess the address of a user, for example for pre-filling a registration form with the city, country, and zip code that corresponds with the current location.

HTML5 cache / offline applications

INTRODUCTION

Even back in the 90’s, long before HTML5 existed, all browsers implemented a native way of caching files. However, the implementations and heuristics differed from one browser to another, and there was no easy way to control (at the application layer) which parts will be cached.

The HTML5 specification introduces a new way to handle caching. As stated in the “offline Web applications” section of the document: “In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable — for instance, because they are traveling outside of their ISP’s coverage area — authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user’s browser to keep a copy of the files for use offline.

By “offline applications”, this means:

    1. That a Web site can be browsed while no internet connection is available. But it also says that:
    2. The Web page may be an “application”, not just a static page.

Meaning, it may be a video game that usually retrieves data from a Web server, saves high scores, etc. It may be a mail application (like Gmail) that shows the most recent emails, checks for new ones, and has features for composing and sending new emails, etc.

In these cases, having a controllable “cache API” helps implement things like:

    • When offline, you can read and compose emails, but you cannot receive or send new emails.
    • A more complex behavior would be that, when offline, you can write emails that will be stored locally on the client side and sent only when connectivity is available.
    • Or, in a static Web site, everything can be retrieved from the cache, so that a user is able to read the Web site offline, but the login page will not be available… instead, a disclaimer page will be displayed, etc.

The HTML5 cache tries to address aspects of these needs, and is pretty useful for mobile Web applications, where connections are not always available/reliable.

Note: Native mobile applications developers often push the following argument that “a Web app cannot run offline”. This is a false statement!

Using the HTML5 cache is both useful for mobile applications, as these device can often be offline, and for traditional Web developers who do not specifically target mobile devices. Any Web site (even comprised 100% of static pages/images/videos/etc.) can benefit from being intelligently cached, as the HTML5 cache can dramatically decrease the load time for any given site, especially if the same browser/person visits the Web site regularly, as illustrated by these pictures below (borrowed from a MSDN blog post about offline applications that is worth reading):

CURRENT SUPPORT

Current support is very good, as stated by the caniuse.com Web site. All major browsers – desktop or mobile – have supported the HTML5 cache since 2012.

EXTERNAL RESOURCES (OPTIONAL, IF YOU WISH TO LEARN MORE ABOUT THIS TOPIC)

Tutorials

Tools

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s