HTML 5 Offline Apps: "Doughnut Hole" Caching

Craig Shoemaker is a software developer, podcaster, blogger and product guidance manager for user interface controls and components company Infragistics – he is also host of the Polymorphic Podcast.

In this guest blog for the Computer Weekly Developer Network he covers HTML offline applications that allow users to work independently of an Internet connection using technologies native to the web browser.


Pages included in an offline application (by being listed in the application manifest) are served from the application cache whether or not a connection to the Internet is present.

In the event that a user is viewing a page in an offline application with an available Internet connection, you may want to display some data from the server without requiring the user to change pages.

Doughnut holes

Microsoft’s Scott Guthrie introduced the concept of “doughnut hole” caching in ASP.NET where a cached page may include small windows of content that are updated independently of the cached page. An HTML 5 doughnut hole cached page would have an offline page that makes an Ajax call when connected to the web in order to display live data to the user. When offline, the page simply renders default data native to the page.

There are a number of different practical applications for implementing an offline application. While most developers first think toward the mobile context when considering the user of an offline application, there are some ways any website may enjoy the benefit of working independently of connectivity status.

NOTE: A website’s Home and Contact Us pages are excellent candidates for offline availability so users can visit your website and at least get some basic contact information about the organisation even when disconnected from the web.

Consider a Contact Us page which displays a notification of upcoming event information to the user. When working connected to the web, live event listings are displayed. While working offline, a telephone number prompting the user to call for event information is rendered. This approach keeps site visitors informed and connected with or without access to the public web.

Figure 1 depicts how the page is rendered while offline and Figure 2 shows how the page looks when served from the application cache, but the computer is connected to the web.

Infra 1.png

Figure 1: Offline application showing native event information while working offline.

Infra 2.png

Figure 2: Offline application showing event info from the server while working connected to the internet.

Even though pages loaded into the application cache are served from the cache regardless of whether or not the computer is connected to the Internet, you can implement your pages to take advantage of online resources when available.

“Doughnut hole caching” is possible by making an Ajax call to the server when a connection is available and then rendering the results to the user. If the page is working in a disconnected state, then the page quietly renders data already available on the page – it’s the best of both worlds!