Why Mobile web is important and how PWA helps you to tame it.
How PWA can get you 2x DAU’s at no extra cost.
Unless you stay in the US, Aus or UK. Mobile traffic has overtaken desktop. Even in these countries, mobile traffic is a sizable percentage. In such cases, you would be a fool to ignore Mobile. Mobile traffic has been increasing YoY and is bound to grow even further. Last year StatCounter reported that for the first time mobile traffic overtook desktop.
If we look at the latest data, it has furthered the lead. Only in a few developed markets desktop is still holding on to its lead.
This year in China on the singles day Alibaba made a business of 25billion$, of this 90% was via mobile. Now, that’s a jaw-dropping figure. In comparison, the US made sales of 7.2 billion$ on the Thanksgiving weekend incl cyber Monday. Now if you don’t have a good mobile presence you are doomed.
How do we tackle this Mobile problem? Assume you have a desktop website and want to get onto mobile. You have following options.
- Make your site responsive to support Mobile
- Build a new responsive Mobile-first website from ground-up and replace your old one with new one.
You may also want them to be available on App store. So pick one of the below
- Build Native Apps for iOS and Android.
- Package your website as an App for Android and Build an iOS app
- Use Hybrid tech like Xarmin or React Native, to develop a common codebase App on iOS/Android.
If your current implementation supports it, most simple way is Option 1. You will have to put extra efforts to make it performant but it is the quickest and cheapest approach.
Now If you have a really old legacy website or if Option 1 doesn’t work for you go for Option 2. You could reuse a lot of stuff from your existing website. This is a really good approach from performance, scalability and future mantainability point of view.
You could Compliment Option 1/2 with Mobile App. The safest way to go about this is to build an iOS app using Swift and an Android App using Java. As the saying goes
No one ever got fired for purchasing an IBM.
There are very few things that could go wrong with this approach. Hire decent devs with good knowledge of the platform and you are done.
This Safe way has a few drawbacks. You need two teams to maintain two apps on two codebases. Plus your existing website team. Any change you will have to do it in 3 places. This is expensive, time-consuming and inefficient.
So let’s go hybrid. If we pick Xamarin we need 2 teams instead of 3. Other than that is pretty good. The code compiles to Java/Swift/Obj-C code and is performant. It’s written on C#. We have reduced the problem from 3 to 2. We can reduce it to 1.x by picking React Native. Your web devs can pick it up and with 1 team you can have all 3. But you will still have 3 codebases. React Native is learn once and not Write once. If everything is React you can reuse a lot of code but you still need to have 3 codebases.
The final approach is to package your website as a App. On Android, its easy as a pie but iOS doesn’t like it. So you need to make sure your website is an SPA so that the UI can be loaded from the app itself. Thus circumventing the iOS issues. You are now down to one Team, one codebase with a few checks. But you still have to distribute separately. The only problem with this approach is that it’s so simple that it’s easy to end up with a shitty app. Plus you still will have to manage App updates. Extra testing is needed coz webview is not same as Chrome on Android.
The UTOPIA of PWA
Now with PWA, all the above headaches are gone. You have 1 codebase, It’s available on Desktop, iOS and Android. You have 1 team. Any change or new feature means it’s available to everyone at the same time. You save time, you save on cost, you save on maintainability. Instead of having 9 devs, 3 each for each platform you can now have 5 good devs producing more output. Remember to have good devs who have a good understanding of the web.
So how do you take your legacy website to the new level? Here is how i did. I was working for Commonfloor Groups. It’s similar to NextDoor in the US.
We had a large legacy website in PHP. We also had a mobile app written in hybrid tech. It was developed in 2014 as it was the need of the hour. It was done by a contractor. Later team had taken it inhouse and a team of 3–4 ppl were working on it. I joined in Mid 2015 to help with this effort. The team knew that the app was done poorly. The app worked well for quiet sometime but structural issues had started piling up. We had to fix it soon before it gets out of control. We did the estimate and it was a month or so worth of effort.
So, istead of fixing it, We decided to write it into a proper SPA with PWAesque features. At the same time, we had begun making the desktop webiste responsive. I had an enlightenment why not redirect users from the desktop website into this new SPA on mobile. In this way, once we reach feature parity with desktop we can kill it and migrate all users to mobile. Atleast thats what was my plan. (I no longer work there)
So we redesigned the mobile app using PWA approach and launched it. It was a stupendous success. Our DAU’s short up by 2x our MAU’s too were up several folds.
Now redirecting desktop pages to mobile. We did a simple if/else check. Mapped all desktop URLs to mobile url with slots for parameters.
if(is_mobile || is_tablet) {
url = getMobilePageURL(desktopPageURL);
}redirect(url);
Our traffic on mobile went up several times after this. Mobile web started accounting for 10% of the overall traffic from negligible earlier. This could be due to the existing website not being responsive and hence cumbersome on mobile. Session times on mobile web was in 5–10s of minutes from seconds earlier. Thus with same codebase we had iOS, Android & a PWA
It took us just two months to achieve this transformation. Going forward any change would reflect on iOS App, Android App and PWA. Someday in future, it could even replace the desktop. At least that was my goal when i worked there.
This was done just around the time Flipkart launched its PWA. we just missed by a whisker. App installability(PWA 2.0) was still not there at that time so we didn’t invest in service worker then. Also the browser support was poor then.
Thus by having a PWA, we were able to significantly contribute to user retention and engagement. Users could now perform various actions without installing the App.
In Future you will be able to have a desktop app downloadable from the Windows store, all with the same codebase. Even android is looking at a way to allow it.
You will still need to have a separate iOS app coz Apple the original proponent of web on mobile is not yet convinced on it. Other than install-ability all other features can be achieved on iOS through Apple proprietary way. Will show you how on a future post. So follow me for more updates.
Call To Action
Follow us if you want to be a Pro Mobile dev. Show us your love by giving us claps. Reply to this with any issues / clarifications and we will get back to you.
