2016 began with a spanking new dashboard for Instamojo merchants and buyers. Post that big release, every now and then we take time out from our tasks (read – new features, bug fixes and support) to think about ways in which we can be progressive and serve users who are using a variety of devices and browsers out there.
Making a site work offline is not a product requirement – unless that’s what you’re building. Besides, it’s probably not for a startup trying to ship things fast and get things done.
At Instamojo, us frontend engineers drove the entire initiative with (very minimal involvement of)** the product managers and designers.
Elements of Instamojo offline
The Service Worker bit
Thousands of merchants and buyers log onto their Instamojo dashboard on a daily basis.
About 25% of such users come via mobile devices, usually on a flaky internet connection.
With the goal of reducing both, perceived and actual load times for such users, we started serving all network requests via Service Workers.
All static assets are cached the first time they are fetched from network and all such subsequent requests are served from this Service Worker cache.
All dynamic calls are requested first via the network with a timeout which then falls back to a response in the Service Worker cache. See it in action below:
The Installable App Bit of Instamojo offline
Chrome users on Android can now install the Instamojo app on their android devices. Go to Instamojo.com on Google Chrome (Android). Tap on the Menu icon and then on Add to Home Screen.
If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck.
Progressive Web Apps pass the duck test. After Add to Home Screen, you would be hard-pressed to differentiate between the Instamojo app which has just been installed via the browser vs an app that you installed via the Play Store.
And what takes the cake is that you don’t have to utilize precious data to install updates for the app. That 50 MB you spend each week on bug fix updates that you don’t care about? Save it for social media.
Instamojo app installed from the browser and working seamlessly offline
Is it worth your time?
Yes. A hundred times over, yes. Browser support for Service Workers is on the rise, and this is a necessary step to provide your repeat visitors with a smoother experience.
Now it might be difficult for you to convince your managers on the whys and whats of this. They look at numbers and charts and want to know the potential benefits from you investing time and resources on this project.
The short answer is, the numbers may not change instantly, and probably not in the short term. You need to find your own reason(s) to get the ball rolling. You need to champion a pioneering web experience in the cleanest way possible.
The tech itself is fairly simple to learn and implement. If you have clarifications, we can always get talking.
Credits
Always believe in giving credit where it’s due, so here goes:
- The Flipkart UI engineering team for making Service Workers mainstream by writing all their learnings in this blog post.
- The sw-toolbox maintained by the Google Chrome team. We needed to modify a particular strategy and ended up forking it to match our requirements.
- Paul Kinlan, for being my biggest inspiration with his amazing resources on taking the web forward.
