Making your web store feel native!

Last year we built Muklear, which is an optimisation framework that makes your online store discoverable. It was a huge success, as we saw a lot of merchants coming onboard and using its capabilities to align their digital marketing efforts (like driving traffic to key category and item pages). But we didn’t want to stop there, so we took a few more steps towards improving your web store. And this time our focus was on its performance. Let’s first understand what is the problem statement that we wanted to solve—

On the one side you have the native mobile apps, that can do things like send push notifications, work offline, look and feel responsive, use geo-location, load from home screen, and so forth. And on the other hand, you have web stores that run on a browser — which means, no downloading, conserving precious space on your device, less of ominous permissions.

We wanted to bring some of the native app capabilities to your web store too.

Today, we are happy to announce that we have been successful in bringing some of these native functionalities to your web store using a technique that’s commonly know in the tech world as Progressive Web App (PWA). According to Wikipedia:

PWAs combine the modern browsers with the benefit of mobile experience.

So let’s understand how it’ll help your web store…

Better Customer Engagement

With PWA your web store can now be added to a user’s mobile home screen.

It is a simple 2 step process–– when your customers visit your website they’ll be prompted to add your website to their home screen. If the customer chooses this option, then the browser creates a high quality icon on the the device’s home screen. And thus, it becomes a PWA. Now this will open in a web-view instead of a browser, giving customers a feel of a native app.

Moreover, you can also re-engage customers with web push notifications. We make use of the Web Push API, that’ll let you send Push Notifications to your customer’s device, even when the browser is closed. This is because we are using something called, Service Workers, that can run in the background even when the browser is closed (thanks to Google).

Better Performance and Higher Reliability

According to a Google study :

• 53% of mobile users abandon sites that take longer than 3 seconds to load
• The average loading time of mobile sites is 19 seconds. And such a long time can frustrate customers and result in them losing confidence in your website. But if the website loads in 5 second then you’ll get 25% higher ad viewability, 70% longer average sessions and 35% lower bounce rate.

So it was important for us to improve your website performance keeping in mind these findings. We did a couple of things—

1. Pre-rendering
   When the browser makes an API call to the server, the server internally redirects to our Muklear engine. Here, instead of fetching the entire response, Muklear only collects the basic components of your site, like, your logo, product metadata, categories, etc. and returns the HTML scaffold back to the browser. Once the browser has loaded this initial dataset, our JS code iteratively requests for different details of your site—like the product images, promotional data, banners, previous user session data, etc. All this happens asynchronously without any UI blocking, till the complete page is loaded, and your customer gets an experience similar to a desktop app.
2. Caching
   PWA are implemented with Service Workers (introduced in the previous section). These workers are scriptable network proxies available in the browser that allow us to handle requests programatically. We use them to intercept network requests and server responses to build a cache in the background. This makes your online store progressively fast, as you’ll have cache data to show even when the customer is offline or when the network conditions are flaky.

Result: Though the complete website completely renders in 7.5 seconds, users are able to see the menu and rest of the HTML shells rendered within 3 to 3.5 seconds and within 4 to 4.5 seconds they can see the item images too. So, for the customers the website is rendered within 4.5 seconds.

Moreover, when you are not connected to the internet few of the pages will still be loaded from cache.

PWAs have become quite a popular thing. A lot of big startups are using it to improve customer engagement, reduce data usage, and improve performance. Here are a bunch of case-studies for you to look at:

• Make my Trip: PWA delivers 3X improvement in conversion rates
• OLX: Boosts re-engagement on the mobile web by 250% with PWA
• Twitter: Twitter Lite PWA significantly increased engagement and reduced data usage

Although, it’s hard to say whether progressive web apps will someday evolve to replace native apps completely, but with these enhancements, we can most certainly say that they are definitely making the web a better place.