Building exciting lightning-fast Web Apps | The Why and How Guide to PWA in India
Why should you choose web apps and How to make them. From my learning experience at Twimbit and Regular talk shows.
The Why ?
Why no to native?
There were times when the world was crazy about Native apps. The excitement people use to have on having the best apps on their phone. Native apps provided the developer with the flexibility to reach the highest level of UI experience without comprising much on performance. Soon the apps got bulkier and people start losing interest in downloading the apps or keeping up with them. A recent study showed that on an average a user installs 0 apps per month.
That should not be surprising because you also have only the most frequently used apps. On top of it if you want to cover a much larger audience you have to cater to all platforms that mean that long development and complicated DevOps. To make things worse, the requirement of the app keeps changing and your features development can not keep up with user demands. So too much effort you spent on developing a native app and not much engagement after-all can be demotivating.
Following are some other Con’s of Native app development :
- Takes download time and user can’t see any preview before installation.
- Longer Development time and huge learning curve for native frameworks.
- Store listing requires different set of licensing, authentications and IDE + tools.
- For starter apps low user base discourages users from downloading App.
- Bug Fixing and new feature addition take too long development cycle to actually reach user as an update and most users don’t even update apps frequently ( Especially in India).
But can web app match native apps ?
The absolute answer is Progressive Web Apps(PWA). They were made keeping in mind the promises of app and flexibility of web development.
This Site tells you the present capabilities of PWA.
On the downside, the web can be slow which is a nightmare and will lose a lot of audiences. According to Google 50 % users will leave your site if it doesn’t load within first 3 seconds.
The Solution to this is choosing the right web framework and good code practices.
How to setup PWA ?
The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the user’s mobile device or desktop. Having a manifest is required by browser to show the Add to Home Screen prompt.
A typical manifest file includes information about the app
iconsit should use, the
start_urlit should start at when launched, and more.
This Guide tells how to create a PWA in 5 mins. You should definitely check it out.
How to make PWA behave like an App?
- Choosing the front-end framework -
The solution may vary from framework to framework. Most web framework these days come up with built-in support for PWA. But it is preferred to go with lightweight client-side frameworks that result in greater performance and less server-side rendering.
PWA + AMP (aka PWAMP) has a great advantage of being fast at first load and afterwards service worker caches the file in the background. Also, the learning curve with AMP is small so it makes a good choice for web app projects. (Do check my guide to AMP)
2. Keep the UX /UI feel like native but using few libraries -
- As your app is hosted on web, you would want to avoid using too many libraries to add effect like swipes and animations. You should make efforts to make your UX/UI more close to native at the same time keeping fewer libraries that ensure performance with richness of fluidity ( I am also currently working on this)
3. Optimizing the cloud hosting and back-end architecture -
- At the back-end also you need to take care that server response time is low and assets are being delivered at its best. This includes setting up a CDN, Compressing the assets, writing a good service worker, server side optimizations and other tweaks. ( Follow this complete 5 steps guide to cloud and hosting for web Apps.)
How to optimize and speed up?
To do this you can use the lighthouse tools that give a in-depth analysis of your PWA and tells everything you need to do in order to optimize your app.
Ultimately, the better the score > lesser the load time > better User Experience
These question haunted my nights for a very long time. But I needed to be sure when I was responsible for leading tech team at Twimbit ( Our user app Twimbit.pro ).
Following is a sample architecture for our web Apps.
I asked myself these questions and came up with a quite good idea of developing web apps. There are many challenges on the way but as my coach says -
A good chef focuses on the process of cooking at very micro level, tries to perfect everything and the dish as outcome automatically becomes its best version.
I will keep adding and updating this article as I get to know more and face more challenges. Contact me if you have other queries or ideas to make this project much better.
Here is the link to my original deck that I present at talk shows.