Progressively enhancing Instamojo.com
We entered 2016 with a Brand Spanking New Dashboard for Instamojo merchants and buyers. Post that, every now and then we ensure that we take time out from our mundane tasks (read - new features, bug fixes and support) and think about ways in which we can be progressive in nature to serve users who are using the greatest devices and browsers out there. Making a site work offline is not a product requirement (unless that’s what you’re building) and can probably never be for a startup trying to ship things faster and getting things done. This entire initiative was driven by FrontEnd Engineers with (very minimal involvement)** of the Product Managers or the Designers.
The Service Worker bit
Thousands of merchants and buyers log into their Instamojo Dashboard on a daily basis. About 25% such users come via mobile devices on a flaky Internet connection. With a 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
Chrome and Opera users on Android can now Install Instamojo App on their Android Devices. Begin by visiting Instamojo.com on Google Chrome or Opera (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 this Duck Test. After “Add to Home Screen”, you can’t differentiate between the Instamojo App which has just been installed via the browser vs an App that you installed via the Play Store.
What’s even better is that you don’t have to spend your precious data installing updates for the app. No longer spending 50Mb every week for those “Bug fixes” updates you don’t really care about.
Is it worth your time?
YES. A hundred times over. Browser support for Service Workers is on the rise and this is one of those “must haves” to give your repeat visitors a smoother experience.
Now, it might be difficult for you, Dear FrontEnd Engineer, to convince your bosses who look at numbers and charts all day with the potential benefits from investing your time in this because those numbers ain’t gonna change for them because of this. In all honesty, find your own reason and get the balls rolling. Be the hero who takes the web forward in the most cleanest of ways possible. Be the hero the web deserves, but not the one it needs right now. Or, does it not?
Not diving into the the tech behind it as it’s fairly simple to learn and implement. Should you have any doubts or seek clarifications, we can always get talking.
Credits
Always believing in giving credits where due, here they go -
- Flipkart UI Engineering team for making Service Workers mainstream by writing all their learnings in this blog post.
- 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 the biggest inspiration with his amazing resources on taking the web forward.
** Except a few heated discussions about where to put the “You are Offline” message, of course.
