Welcome!

Weblogic Authors: Yeshim Deniz, Elizabeth White, Michael Meiner, Michael Bushong, Avi Rosenthal

Related Topics: Machine Learning , Java IoT, Microservices Expo

Machine Learning : Article

Using HTML5 Application Cache to Create Offline Web Applications

Provides an easy way to prefetch some or all of your web app’s assets

HTML5 introduces Application Cache, a new feature that enables you to make web apps and sites available offline. The new specification also provides an easy way to prefetch some or all of your web app's assets (HTML files, images, CSS, JavaScript, and so on) while the client is still online. During this caching process, files are stored in an application cache, where they sit ready for future offline use.

Compare this to regular browser caching, in which pages that you visit are cached in the browser's cache based on server-side rules and client-side configuration. But-even if web pages are cached normally, this does not provide a reliable way for you to access pages while you're in offline mode (in an airplane, for example). In addition, an application cache can cache pages that have not been visited at all and are therefore typically unavailable in the regular browser cache. Prefetching files can even speed up your site's performance, though you are of course using bandwidth to download those files initially.

Regular caching can lead to undesired results while you're offline.
The mechanism that makes offline web applications available is simple: create a manifest (text) file that lists your app's assets and reference it in a manifest attribute in your web pages' html elements. Sounds simple? It is. Just remember that there are some common misconceptions about how offline web apps work, and because of all the caching the browser is now doing for you, you may get a few (tricky) surprises when you try to debug and test your web apps (online and offline). This article explains what to look out for, so you don't have to learn the hard way. This article also covers some lower level object and Application Cache event functionality that you can tap into. Sounds good? Great-let's get started!

Note: a set of starter files that make up an example offline web app are available at: http://tech.kaazing.com/training/offline/peter-lubbers-html5-offline-web-apps-presentation-code.zip

The Basics
Let's start with the basics. Consider a web app that has just a few web pages: an index page, a CSS file, images, and JavaScript files. This web site can be made available offline in less than five minutes (once you get the hang of it). Here's how:

  • Open your favorite text editor, create a new text file, and save it with the .manifest extension. For example, offline.manifest.
  • Add the following directive on the first line:
    CACHE MANIFEST
  • List the files you want to make available offline (one line per file), as shown in the following example:

CACHE MANIFEST
index.html
cache.html
resources/img/html5.png
resources/css/html5.css
resources/js/html5.js

Note
: files must be referenced relative to the manifest file. Full URLs are allowed as well.

  • Open the HTML files that you want to make available offline (index.html and cache.html in this case) and add the manifest attribute to the html elements as follows:
    <!DOCTYPE html>
    <html manifest="offline.manifest">
  • Configure your server to serve up .manifest files with the correct mime type (this is covered in more detail later).
  • Navigate to your site's index page. The page will load, and before storing the files locally, most browsers will ask if you want to make files available for offline use. The browser will then parse the manifest file and download all the assets specified in the file. Note: Unlike regular browser caching, you don't have to actually visit each page in order to load it into the application cache.
  • Go offline and continue to browse and enjoy your site.

Browser notification about offline storage

More Stories By Peter Lubbers

Peter Lubbers is the Director of Documentation and Training at Kaazing where he oversees all aspects of documentation and training. He is the co-author of the Apress book Pro HTML5 Programming and teaches HTML5 training courses. An HTML5 and WebSocket enthusiast, Peter frequently speaks at international events.

Prior to joining Kaazing, Peter worked as an information architect at Oracle, where he wrote many books. He also develops documentation automation solutions and two of his inventions are patented.

A native of the Netherlands, Peter served as a Special Forces commando in the Royal Dutch Green Berets. In his spare time (ha!) Peter likes to run ultra-marathons. He is the 2007 and 2009 ultrarunner.net series champion and three-time winner of the Tahoe Super Triple marathon. Peter lives on the edge of the Tahoe National Forest and loves to run in the Sierra Nevada foothills and around Lake Tahoe (preferably in one go!).

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
SYS-CON Events announced today that Silicon India has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Published in Silicon Valley, Silicon India magazine is the premiere platform for CIOs to discuss their innovative enterprise solutions and allows IT vendors to learn about new solutions that can help grow their business.
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...
We are seeing a major migration of enterprises applications to the cloud. As cloud and business use of real time applications accelerate, legacy networks are no longer able to architecturally support cloud adoption and deliver the performance and security required by highly distributed enterprises. These outdated solutions have become more costly and complicated to implement, install, manage, and maintain.SD-WAN offers unlimited capabilities for accessing the benefits of the cloud and Internet. ...
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and G...
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled niche technology expertise and industry experience, Chetu has become the premiere long-term, back-end software development partner for start-ups, SMBs, and Fortune 500 companies. Chetu is headquartered in Plantation, Florida, with thirteen offices throughout the U.S. and abroad.