Main Menu
Request Demo

Building Next-Gen Progressive Web App (PWA) at Bizom

 “Your mobile device has quickly become the easiest portal into your digital self.”- Phil Nickinson

When the App Store was released on July 10, 2008 it featured about 500 apps. As of March of 2017 that number stands at 2.2 million for the App Store and 2.8 million for the Play Store.  The success of native apps have changed our lives. Businesses have become mobile-first, personal lives revolve around our mobile phones.

Enter Progressive Web Apps (PWA). A web app that does not need to be installed on your phone but has almost all the functionalities of a native app and even some advantages over it. PWAs could change the store experience by simply rendering it useless in the future.  The early push for web based apps based on early technologies (server- PHP, ASP.NET, client side- AJAX) failed for multiple reasons. They could not compete with native apps in terms of UX, boot time as compared to loading onto the browser and responsiveness. This has changed with development of new web technologies.

PROGRESSIVE WEB APP (PWA)

A web app which is progressively enhanced, as support for new web APIs gets added to the browser. 

WHY DID BIZOM ADOPT PWA?

PWA is still in its early stages of adoption and naturally the question arises why did we, a B2B SaaS company decide to head the PWA way?

This question is easily answered by the numerous advantages a complete PWA holds over native apps and holds true for any app.

  • Write once, run anywhere.
  • Remote updates. As a tool used by thousands of salesmen, our end users, the management no longer have to push store updates on everyone as a simple refresh of the page does the job.
  • One design works across all devices. Instead of building multiple applications for different platforms and plugging resources to update and maintain these separately it makes much more sense to build a brand new fully responsive PWA.
  • Share each and every page as we don’t have screens but urls that identify them.

Misconceptions about PWA

Despite their increasing popularity there are still a few misconception people hold about PWA

  • Works only on Chrome
  • Can’t be as smooth as native apps
  • No full screen mode
  • Have to be SPAs
  • Building offline first isn’t worth it

Big players like Twitter, AliBaba and Flipkart with huge user base have already rolled out PWAs. Flipkart reported the following insights on their PWA.

  • Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds.
  • 3x more time spent on site
  • 40% higher re-engagement rate
  • 70% greater conversion rate among those arriving via Add to Homescreen
  • 3x lower data usage

The Flipkart Lite case study can be found here.

For new apps one of the major barriers has been to crack how to be “download-worthy”. People are picky about what they download, due to storage issues or simply for the sake of not cluttering up their phone with useless apps.
But with encouraging data like this coming to light many developers will likely not have a downloadable store version and may directly push PWA forward.

Hardware Access

Now:

  • Geolocation- Supported in majority browsers.
  • Camera and Microphone via the getUserMedia/Stream and upcoming MediaStream Image Cpture APIs
  • Device Vibration
  • Screen Orientation and Accelerometer including compass, gyroscope, battery status

Upcoming:

  • Bluetooth via Web Bluetooth API
  • NFC
  • Ambient light sensor
  • Proximity sensor
  • Accelerometer, magnetometer and gyroscope sensor access.
  • Hardware-powered shape detection API.

Native Features that PWA can also use.

How did Bizom utilize capabilities of PWA

Offline Transactions

At Mobisy we built Bizom which is a Mobile first Saas solution to increase sales force productivity. Saas products are fundamentally different from mass consumer products when it comes to transactional (CRUD) operations.

The prime requirement for our apps is to be usable even when device connectivity is slow, unreliable or absent. These conditions are real for our 100k+ users who are sales executive and visit retailers across India.

Till now every tech giant has utilized the capabilities of PWA which have to deal with just the View and User engagement parts of the application. But the mystery of offline user actions which lead to some transactions such as create, update, delete remains unsolved.

Our Tech Stack

  • React
  • Redux
  • React Router V4
  • ES6
  • Dexie
  • Service Worker
  • Lighthouse
  • Webpack (module bundler for modern JavaScript applications)

When we first started building Bizom as a PWA we decided to audit it with Lighthouse, , an open-source tool from Google, to audit a web app for PWA features.

As you can see, the improvement from our early version of Bizom PWA to now has been immense.  The immediate question would be why has our performance been rated so low.

As a Salesforce Automation company our end users need all the data for his daily transactions to be downloaded upfront so he can use the app offline if needed for the rest of the session. Hence taking longer to load on the first attempt and thus the low performance score.

As a work in progress our goal will now be to improve performance to the optimal level. Watch this space for more interesting pieces by our engineering team including our successful attempt at incorporating offline transactions in our PWA, the first in India.

If you enjoyed reading this article don't forget to share with others!
This site is registered on wpml.org as a development site.