Welcome to the world of Infosys Engineering! It is a half a billion plus organization that takes pride in shaping our engineering aspirations and dreams and bringing them to fruition. We provide engineering services and solutions across the lifecycle of our clients’ offerings, ranging from product ideation to realization and sustenance, that caters to a cross-section of industries - aerospace, automotive, medical devices, retail, telecommunications, hi tech, financial services, energy and utilities just to name a few major ones.

« December 2010 | Main | August 2011 »

February 16, 2011

Offline web applications with HTML5


eb applications are preferred over desktop applications because they are available 24x7 and are accessible from anywhere in the network. A couple of years back, the term network implied wired-network but more recently, due to availability of high-speed wireless networks and handy mobile devices, the dependency over wired-network has diminished greatly. Via wireless connectivity, web applications are now accessible from literally anywhere. But there could be situations when internet connectivity may get lost. This loss of connectivity could be due to various reasons, like user is in transit or is switching between networks or is simply at a remote location where the wired/wireless network isn't available.

 Major drawback of a typical web application is that, the moment internet connectivity is lost; it can no longer be accessed or used. Most of the desktop applications do fairly well in this situation. They switch to disconnected or offline mode and ensure continuous user experience even during loss of network connectivity. Offline mode requires availability of local cache. Applications keep a copy of the online data and the data entered during the offline mode in application cache. Example of a desktop application supporting disconnected mode is e-mail client application. It caches e-mail folders and calendar appointments locally and allows browsing them in offline mode.

Designing web application to support offline mode has been a challenge so far. Various architectural solutions exists which either requires setting trust relationship in browser or involves smart client installation. HTML5 recognized this architectural pain-point and elegantly provisioned for offline capability. Let's see how.

Developing an offline web application has twofold issues. One, how to make web application/pages available in disconnected mode and two, how to cache large data?

Making pages available offline

All browsers have some sort of caching mechanism. Most of the browsers offer "work offline" feature on top of this mechanism. Leveraging browser's "work offline" feature might appear as an easy way for developing an offline web application but it has the following limitations.

1.       In offline mode, only previously visited pages can be viewed

2.       To be able to view pages from cache, user has to manually put the browser in offline mode and once internet connection is available, he has to toggle it back to on-line mode

3.       A web page can have multiple links and web application developer has no control over which parts of the page (like the external script files, image resources etc) or depth of links that the browser caches when user visits the online web application

4.       Browser dumps all web pages that user visits at a common location. Moreover, while cleaning browser's temporary storage, there isn't any way to retain cached pages pertaining to a specific web site or web application. Hence, there are good chances of losing the offline page viewing capability after running cleanup application.

HTML5 attempts to resolved such issues with application caching API, which is the mechanism to ensure web application's availability in disconnected mode. Application caching API begins with manifest attribute on html element. This attribute takes URI of the manifest file. Manifest file is a simple text file listing the web page resources, like image or external scripts, which the browser should or should never cache. The manifest file can have any name but it has to be identified as text/cache-manifest MIME type resource on web server. 


Figure 1 manifest.cache

In figure 1, shows manifest file details. As suggested by MIME type (set on web server), the manifest is a text file. The file is divided in following 3 logical sections­

1.       Cache - This section lists the resources which should be cached after loading them.

2.       Network - This section contains the white-listed resources. That is the resources browser should never cache. Browser always bypasses cache and contacts server while loading resources listed in this section

3.       Fallback - This section details the backup strategy. If browser fails retrieving original content (koala.jpg in this case) then browser should use fallback resource (Jellyfish.jpg in this case)

After creating the manifest file, add its reference in the html element on the web page as shown in figure 2. 


Figure 2 offline.html

Caching user data

The second important requirement for an offline web application is client side caching. Typically cookies are used for client side data caching. But from an offline web application's perspective, cookies are not useful because

1.       Most browsers restrict cookie size to 4 KB and don't allow more than 20 cookies per domain. This makes a maximum of 80KB storage space available as client side cache. Which could be OK from session tracking perspective but is too scanty for an offline application (Note: cookies are primarily for HTTP state management).

2.       Cookies don't support transaction boundaries and tend to "leak" information across browser windows. For example, while booking ticket from a single site, if 2 browser windows are used to navigate ticket/route information, there is very good chance that the user unintentionally ends up buying 2 tickets, if the ticket booking site relies on cookies to keep track of the ticket being bought.

To address above issues, HTML5 has introduced localStorage and sessionStorage objects. The sessionStorage fixed the "leak" issue described in point 2, whereas localStorage is the really targeted at offline web applications. Both the storage objects don't have storage size restrictions and they unleash megabytes of (and more based on user setting) client-side caching space. For developers, the local and session storage objects are available as attributes of the Windows object which is part of browser's DOM hierarchy. Both the storage objects store data in as key/value pair.

Storing and retrieving data from localStorage object is shown in GetUserID and SetUserID functions in figure 3. 


Figure 3 Activation.js

Making it work

FolderStructure.jpgWith this basic information, let's try to prepare a web application for offline mode. To begin with, create manifest.cache, offline.html and activation.js as per figure 1, 2 & 3. Then create folder structure as seen in figure 4. Note that the stylesheet.css is optional. Remove stylesheet.css entry from the manifest file if you don't want to apply common style to multiple pages. Now, map OfflinePage folder (ref: figure4) as virtual directory in IIS (any other web-server can also be used for publishing is web application).  Then access Offline.html page as http://localhost/OffLinePage/Offline.html.

Figure 4 Folder structure

While loading Offline.html page, browser may seek user permission to cache page content. Allow browser to cache. Then stop IIS, close the browser and try accessing http://localhost/OffLinePage/Offline.html. The browser would not only load Offline.html but it would also show SecondPage.htm after clicking the "Visit this link" hyperlink. Note that browser cached SecondPage.html page even though it was never visited while IIS was ON and serving pages. Using SetUserID.jpg button, any text string can be stored in browser's local storage and the stored string can be retrieved using GetUserID.jpgbutton


·         <!DOCYPE html> declaration is a mechanism to distinguish HTML5 html page

·         Before trying to access Offlline.htm from browser, ensure .cache files are mapped to text/cache-manifest MIME type in IIS

·         Above code worked well with FireFox 3.6.10, Safari , 5.0(7533.16), Opera 11.00, Chrome 9.0.597.98 but did not work on IE 8.0.7600.16385

·         The same HTML files would work on mobile platforms

·         Setting MIME type for the manifest file on web server, definition of stylesheet.css & contents of SecondPage.htm are not included in this post for brevity



February 10, 2011

The cloud in mobility use cases

Rupert Murdoch's News Corp. launched the first iPad-only newspaper - The Daily - last week with the idea of targeting the growing segment of people around the world who are educated and sophisticated who would expect content to be delivered anywhere anytime, without having to be tethered to a physical newspaper or the television. Businesses today have realized the need to exploit mobile devices to target a wide and sophisticated market place. The industry is witnessing a scramble to join the bandwagon called the mobile device enablement (hardware, software, networking etc) and servicing industry. The need to be one-up in a new and highly competitive industry has spawned solutions that enable more and more complex use cases around mobile devices. Most use cases typically involve some sort of collaboration. With mobile devices being pervasive and in the hands of a growing knowledgeable user base, there is a need for the backend to support the potentially massive but varying scalability needs -   what better than cloud computing to do the trick.

Every day, there are more and more innovative mobile applications being developed which in turn, excite more people to hook on to mobile devices to experience them. It is important to realize that the majority of such applications being used today are "connected". Though there are mobile applications that provide single user games, check and feedback on an individual's pulse rates etc. what keeps users hooked to applications are those that provide some sort of interactivity with the external world - browsing the internet, face book, twitter, movie ticket bookings, multi-user games etc. Most applications are thus going to make use of services out there in the internet. Considering that these services are going to be consumed by mobile device applications, it is important that services remain connected and scale easily. The phone is pervasive and the cloud provides the scale that needs to support this pervasiveness with lots of apps running on this phone.

"The Daily" is the latest example of how the News and Publishing industry is trying to exploit the iPad's popularity for new sources of revenue (online advertisements to a large base). "The Daily" is attempting to grab market share by focusing on video and graphics that can be manipulated using the iPad's touch screen and photos that offer 360-degree, panoramic views at the swipe of a finger. Going forward, as the number of subscribers to this service increase, there will be a need to scale to account for peak connections and yet maintain the experience - something that a cloud based solution can help achieve. Additionally, there will be a need to scale storage as news material is churned out by the hour in video, audio, text and other formats. Adopting the cloud for scale and infrastructure needs will allow IT teams to focus on considering ways to enhance news delivery and end user experience to stay ahead of competitors like "The New York Times", "USA Today" and others.

Skype, the popular voice communication service, is considered to be offered through cloud computing. Considering that Skype Mobile is getting more and more popular with people using Skype to communicate using smartphones, the move to the cloud will facilitate the need to scale as more and more people collaborate. On Skype, it is probably not important where the processing takes place .Rather, for the average Skype user, it is the ability to communicate quickly, accurately, and for a relatively low cost that makes it a useful tool.

Multi-player mobile online games (iPhone's Galcon etc) are also gaining in popularity. Such games often establish massive multi user mobile virtual communities. In some games, players of the game can select a virtual persona for themselves and inhabit and live in a simulated virtual world. When navigating through the virtual world, users can contact and interact directly with other players in real time, have live real time chats with other human players, interactively co-operate with others to solve certain tasks etc. To achieve a seamless experience, what this would basically require is  mobile devices containing high end processors ( ARM's Cortex-A9 multicore processors for example),high speed modern wireless networking technologies (3G, 4G) and backend scalability requirements handled in a cloud-based infrastructure architecture

Smartphones and other mobile devices are well on the path to becoming an integral part of a user's life in connecting him with people, information and the world. With the massive growth in the mobile device enablement(hardware, software) and service industry, in addition to the use cases of a phone or a laptop, devices today are equipped with gaming, social networking, photography, health, banking & payments, learning, productivity and other diverse  applications. Juniper Research expects the total market for cloud-based mobile apps to grow 88 percent between 2009 and 2014. Marrying cloud computing with the mobile application industry will enable exploration of new and exciting use cases - not withstanding device challenges like processing power, form factor, hardware design, software compatibility and network interoperability limitations

February 2, 2011

Jump-Starting the Innovation Engine

As US companies emerge from what is now acknowledged as the longest economic downturn of the post-World War II era, they are beginning to prioritize innovation as a primary engine for long-term growth. 


Managing the innovation process from concept to implementation is a challenge for any large company. Understanding the core challenges and implementing appropriate measures are central to ensuring a streamlined innovation process that delivers a consistent competitive advantage in a global economy.


Below are some of the key ingredients to successful innovation in a large corporate environment:

·         Clear direction and vision by senior management - Management must clearly articulate strategic priorities and areas of innovation focus - at the corporate level, at the business unit level, and at the department level. This clarity can help channel innovation in the right direction.

·         An environment conducive to innovation - Freedom and flexibility for experimentation along with incentives for carrying products from ideation to commercialization provide a strong foundation for an innovative culture.

·         Clear definition of solution and value proposition - Innovation can take place on several fronts - product, process, or business model. Inventors must clearly articulate the problem statement, the target solution, and the potential value of the proposed solution. A systematic framework leveraging value realization methodology (e.g. Infosys's VRM) in conjunction with business case analysis and lean principles can help articulate the value of the solution and the resulting benefits to the company.

·         Prioritization of target initiatives - The proposed ideas and initiatives should generally address the direction and strategic priorities set forth by senior management. Organizations are usually resource constrained. A 'funnel' process can help prioritize initiatives so they are well-funded and well-supported for success. However, we must not resort to excessive formal structures as micromanagement will only stifle innovation.

·         Buy-in / sponsorship from senior management - Disruptive ideas can be weighed down by resistance from individuals and middle managers who are impatient for tangible benefits and who would prefer the trodden path. Sponsorship from senior management is essential to preserve the freedom and flexibility of the innovating team to explore the full potential of the innovation.

·         A matrixed, multi-disciplinary team - Disruptive innovation usually begins at the fringes of disciplines. A multi-disciplinary team can bring together ideas from disparate disciplines to 'break the mold' and work around a new paradigm. An ability to put together small, highly-qualified cross-functional teams quickly in a matrixed environment that transcends organizational boundaries is vital to bringing innovative and disruptive ideas to rapid prototyping and field test. Further, team dynamics and involvement are critical to harmonious creativity.

·         Early customer integration - Involving a lead customer in early prototyping can help refine product features and quality and accelerate its evolution to mass production. 

·         Ecosystem leverage - Collaborating closely with key strategic ecosystem partners to leverage their assets during new product development can greatly reduce overall development costs, accelerate time-to-market, mitigate risks, provide access to new markets, and simplify the out-of-the-box customer experience. Continuous re-investment by ecosystem partners can help ensure new product longevity via a common platform strategy and a shared investment-risk-success model.

·         Clear assessment metrics - Performance metrics and milestones must be put in place that clearly define success criteria at a project level and hold the team accountable. Periodic check-point reviews ensure continuous progress and improvement by various milestones. 

·         Rewards - Timely and visible recognition of inventors is integral in fueling the innovation engine. Rewards must be commensurate with impact/value to the organization. Managers are generally mired in execution challenges and pressured to deliver results over the short-term, and thus do not feel incentivized to sponsor innovation that has a long-term roadmap to fruition. It is therefore equally important to recognize the managers who 'stick their neck out' to sponsor innovative initiatives.


Innovation is an ongoing process that needs continuous refinement based on shifting market dynamics, technology progression, and ecosystem/value-chain evolution. Lean processes and a sound infrastructure that nurture the innovation process are fundamental to maintaining the growth engine in a competitive global economy.

Subscribe to this blog's feed

Follow us on

Blogger Profiles

Infosys on Twitter