PWA: What a progressive web app development company needs to consider

Today, more than 60% of the internet globally is consumed on the mobile phone. With more and more users spending more time on their mobile phones, the optimization of user experience on that device is essential. Even when a company has a dedicated native mobile application, users increasingly prefer to make use of the web version to avoid downloading and installing a native app, mostly due to hardware and memory constraint. Let’s explore some more reasons why having a PWA could work to your advantage.

Why is it important to have a PWA?

If you're under the impression that users will happily install the app of every website they visit frequently, you're wrong. People’s honeymoon phase with their smartphones is over. Gone are the days when all our phones were jammed with apps. Any step you introduce that requires a user to download an app reduces your user count by 20%. PWA cuts down the steps between the discovery of an app and having it on the home screen, thereby eliminating the friction involved in downloading an app. This makes for a very fertile ground for companies to pitch in their PWA.

Over the last couple of years, the audience for the mobile web has grown at an unprecedented rate. The reach of the mobile web is 2.5 times more than that of apps. This is why the decision to abandon their website and be ‘app only’ backfired for many companies. User discoverability compared to websites, is another major concern faced by mobile apps. The user acquisition cost of the web will prove to be ten times cheaper compared to that of native apps. With low friction and more exposure for on-boarding, at very less expense, PWA is likely to acquire more users. Add to that, even with flaky networks, the seamless end to end user experience provided by PWA improves the number of successful conversions.

For e-commerce companies looking to provide their potential customers and users, mobile-first experiences and increase conversion rates and engagement, building a PWA should be a priority. Take for example India’s largest e-commerce site, Flipkart. They began making Flipkart Lite, a Progressive Web App that or combines the best of the Flipkart native app and the best of the web. Now, over sixty percent of all visits to Flipkart Lite come from users launching the site from the home screen icon. PWA also delivers high-quality visits, with users converting 70% more than average users. This in itself resulted in engagement numbers that were forty percent higher than before.

How to get started?

There are two ways to go about it. You might be starting from the ground up. Maybe your company is looking to build a new website or going through a redesign. In these scenarios, building a PWA from the ground up is feasible and makes sense. Here, your business is in a place where it can truly harness the power of PWA with service workers,  AMP,  Web Manifest, and App shell. One can always focus on a single feature that will have a high impact on end users or build a simple version of the website when building from scratch is not realistic. The focus is to deliver an engaging, fast and reliable experience.

The PWA requirements can be quickly added to almost any web application. All you need to do is:

• Force HTTPS after deploying it to a public web server.
• Then create and include a JavaScript file with code to cache network requests.
• And finally, create and include a web app manifest.

Challenges in working with a PWA

Because of the aggressive caching your application will participate in, developing PWAs can be painful. For ages, web developers have been struggling to get the browser to not cache assets, so working on a PWA forces a web developer to go against the grain. Commenting out your service worker registration until you package for production is one workaround to this issue. A PWA won't be right for you if your app is so dynamic that you don’t want anything cached. However, for better security and faster performance, you should still look into serving it over HTTPS and using HTTP/2.

For any hardware that isn't supported by HTML5, PWA doesn’t have support. However, it's a good security practice to load it over HTTPS and using a web app manifest to add icons is something you’d do anyway. To allow your app to work offline if the user has already loaded data, adopt a cache-first service worker strategy, this will alleviate one of the biggest issues with web apps.

Since apps like Twitter and news sites have much text that you’ll read, but not necessarily interact with, PWAs will prove useful. A PWA here will let your user open the app, load its data, then read its contents later when they’re offline. Last year, Starbucks released their PWA. They wanted an app that could work on any device with a web browser and do everything even in areas with poor data service. Today customers can place and customize orders through the Starbucks PWA after browsing the Starbucks menu. This should work in a typical web application too, but some browsers, when you open them, tend to try and reload the page, resulting in a dreaded “server not found” error.

Uber and Lyft have also launched PWAs aimed at users with limited connectivity and data bandwidth. Within the browser, the sites do everything the apps do. Adding PWA support is crucial so people with slow connections and affordable smartphones can use your web app more easily. If your app is large, bundling it all up in a hybrid app with Cordova might make sense if you can't load parts of it lazily ( meaning, rather than loading it at the beginning, loading it on-demand). Coding it with native SDKs is likely to be a good option if your app is highly interactive or does intensive tasks, like a game.

One more thing to consider is how much WebStorage your application will need on the device. Up to 10MB of LocalStorage is sustained by most browsers. The application developer cannot control this setting, although users can change this quota on their device. So do keep that in mind.

Also, native apps can talk to other apps and authenticate logins (Twitter, Google, Facebook). As a webpage, PWA can't communicate with other apps installed. However, PWAs can use device features like data storage, cameras, motion sensors, GPS, face detection, and more. This should pave the way for VR and AR experiences, right on the web. Imagine using nothing but your phone and a PWA to virtually redecorate your home. Panning your camera around a room, then using tools on a website to try out furniture, change wall colors, hang new artwork, and more. It sounds like we're still far away from that dream, but it’s close to reality. It could soon be possible for PWAs to do just about everything native apps can do and more as web technologies advance.

Sadly, service workers are implemented so shoddily on websites these days that it directly affects mobile user engagement, which is a real shame as reportedly, web push notifications increase engagement by 4 times, and on the websites, those users spend twice as long. Take for example AliExpress, after rolling out its progressive web app, despite iOS not supporting the full feature set of progressive web apps, it increased its iOS conversions by 82% and increased its conversions for new users by 104%, across all browsers.

PWAs are not just the way of the future. It’s what companies are adopting today. With notably absent support in Safari, most other browsers support it. Apple too is blocking PWA support on iOS, although they do list service workers as “under consideration” in WebKit. This is odd since Apple was the one to support web apps on the first iPhone. Meanwhile, with dedicated developer advocates for PWAs, vast amounts of documentation on PWAs, and many conference sessions on the subject, Google is championing the effort. It’s still smart to build a lightweight PWA app that can load in seconds and give your users something to work with, even if you choose to create a native app. The native API issues could be around for a while, but the ability to locate an app with a URL, versus searching a store, still proves to be a deciding advantage.