News

New-Age Flipkart Site Closes Gap Between Mobile Apps and Web

• By David Ramel
• November 12, 2015

First it was just the Web. Then developers turned to mobile apps after the smartphone revolution. Now, it's a new-age blending of the two.

After formerly abandoning its mobile Web site in favor of an app-only approach, Indian e-commerce giant Flipkart this week unveiled a new Flipkart Lite site that takes advantage of cutting-edge Web technologies to close the gap between native and Web.

Not only did Flipkart leverage those existing technologies just now becoming mainstream, it worked with browser dev teams to come up with custom-made goodies to get its site to perform more like a Web app.

"Mobile Engineering team at Flipkart discovered that with right set of capabilities in a browser, a mobile Web app can be as performant as a native app," Flipkart engineering exec Amar Nagaram said in a blog post this week.

Browser vendors were already introducing low-level APIs based on developer feedback to provide brand-new Web functionality, and the company decided to extend these capabilities even further.

"We, at Flipkart, decided to live on this bleeding edge and build a truly powerful and technically advanced Web app while working to further evolve these APIs," Nagaram said.

Some of those key APIs include Service Workers, used to address the complicated problem of providing offline functionality to Web apps when Internet connectivity isn't available. That's a primary impediment to fully performant Web apps, a problem that has been only partially addressed by a variety of technologies and approaches.

Specifically, the company chose to use a Service Workers wrapper library called SW-Toolbox that lets developers use NetworkFirst, CacheFirst or NetworkOnly patterns to handle connectivity issues.

Service Workers and other techniques enabled Flipkart to pursue its vision "to build an experience that combines the richness of native applications with the no-hassle and lightweight nature of the Web," company exec Karan Peri said in an post introducing Flipkart Lite this week.

"Web apps have always been a challenge, especially on the compact, new-age mobile devices," Peri said. "They offer a scaled down experience of their desktop counterpart -- drastically hampering the user's interaction. This is where native applications came to play, providing users with a superior alternative. But in these apps, constraints like device type and signal strength bring along their own limitations. What if we can create the best experience of both worlds?

"Limitations of the Web platform are often cited as the challenges in delivering a great user experience; but instead of letting these limitations stop us, we dug deeper into the problem and explored what we can do to challenge these limitations and bring out the goodness to our users," Peri continued. "We worked with a couple of leading browsers to enable some of the app capabilities that would fundamentally change the way people experience the mobile Web."

Those browsers, as of now, include Chrome version 42 and above and Opera versions 33 and above. With its customized, cutting-edge technology, the Flipkart Lite site won't provide the same experience on other browsers.

That experience lets users add the mobile site to their home screens (like mobile apps) with Add to Home Screen technology. "When the user chooses to add to home screen, the browser creates a high-quality icon on the home screen based on the metadata in the Web Manifest," Nagaram said.

To match native app splash screen functionality to mask app load times, the latest Chrome browser supports generating such screens, which Nagaram said "radically improves the launch experience and perceived performance of the web app."

To match native app push notifications functionality, Flipkart uses the new Web Push API. These notifications can be sent even when the browser is closed, Nagaram said, through the use of Service Workers that function beyond the life of the browser.

To match native app performance, network data consumption is reduced through the use of a scriptable proxy and browser-based persistent cache. Rendering performance is boosted by using the GPU instead of the CPU to handle rasterization. This is done on Chrome through use of Project Ganesh, Nagaram said.

To help identify performance bottlenecks and optimization options, Flipkart used the Timeline panel in Chrome Dev Tools, especially useful to realize Flipkart's goal of providing 60fps animation and interactions.

Nagaram lauded the Extensible Web Manifesto for fostering improved cooperation between developers and Web standards editors that led to the new low-level APIs being introduced by browser vendors. He predicted those vendors would work more closely with developers in the future to even further close the app/Web gap using the techniques he described.

"All of this put together, manifested into a stellar experience for our users," Nagaram concluded. "It's been a remarkable journey building this Web app, working with browser vendors and pushing the limits of Web platform on mobile. Over the coming weeks, we plan to roll out more detailed posts that deep-dive into the technical architectures, patterns and most importantly the lessons learned."