What is a progressive web app and why should you consider one

Progressive web applications are a flexible and downsized collection of apps that allow developers to offer certain features previous web apps were unable to do. PWAs leverage state of the art web development techniques and technologies to deliver an experience similar to a native app. Thanks to these methods, the apps can function with one source code and do not need a native coding language for each platform they are on. They can be written in the widely known languages of HTML, JavaScript and CSS. With a bit more extra effort on the server side, they can work offline or with a poor connection. Above all, they are easily installable through the internet. People can share them through a link and due to their miniscule size (in the kilobytes) compared to native apps, they can be installed in a short time.

This creates less hesitancy when a user may have limited space on their device or app fatigue. App fatigue refers to the concept of the many apps we install and our decreased excitement or willingness to install new ones. When trying to reach out to your target audience, creating as little of a barrier to entry as possible is a great strategy. Users can simply add a PWA to their app launcher on any device and enjoy a similar experience to native mobile apps. Between the download time and the offline availability, users are given little reason to try out the competition.

Factors leading up to their popularity

A major factor in this new and “progressive” possibility is the advancements in mobile web browsers. Widely used web browsers such as Google Chrome, Apple Safari and Mozilla Firefox, support the majority of the web technologies and standards. This allows PWAs which run the browser behind the scenes to provide mobile users with a smooth experience.

Application Processing Interfaces or APIs create a connection between various computers or apps. They essentially provide the services of a software to other available software seeking said services. In the case of Progressive web app design, they act as a communicator between the single source code and the backend of the other platforms.The wider use and improvement of APIs, especially on platforms like Android and iOS, has further empowered PWAs and what they are capable of.

PWAs

The significant differences between a PWA and regular apps

Being able to access features reserved for native apps used to be one of their advantages over regular web apps. Think of all the features a web app misses out on with any given platform. Apps created for that platform are coded in native  language and thus have access. PWAs, as their progressive name would suggest, have changed that reality. Unlike a web app, they can operate offline or with a weaker connection. They can be easily installed off a website rather than having to download a larger file off the app stores. They are also able to send notifications and interact with some features previously reserved for native apps such as utilizing the phone camera. Another difference is their much smaller size.

Twitter had previously cut its app size down to a few hundred kilobytes. As of today, the iOS version of the Twitter app uses 132 MB, and the Android version requires a minimum of 50 MB storage space on the device. On the other hand the pwa needs only 600 KB which is just a fraction of the storage required by mobile apps.

PWAs offer many other advantages thanks to their cross-platform functionalities. Since they are multi-platform apps, they can adapt to various screen sizes with ease. If you look at the modern mobile market, there is no standard screen size. Using relevant tools, PWAs take the guesswork out of creating a good user experience on different devices. Developers would have the work of adapting to a platform’s features done for them by the APIs.

The history of PWAs

The term “PWA” is a relatively new one. It was introduced in 2015 when Google was looking for more flexible app development strategies. It has certainly caught on, but examples of this type of app can be dated back to the year 2000. The app was called the XML HTTP Request and it was developed by the Microsoft Web Access Team. The app’s main functionality was that it allowed for the retrieval of data from a Uniform Resource Locator, URL, without needing a full page refresh. Techniques and apps like these which actively challenged what a web application was capable of doing, became more and more common through the coming years. In 1996, Internet Explorer introduced iframe, which allowed for the asynchronous retrieval of data, as in doing so in the background. Now, the page did not need a full refresh before the user could see its content.

This reduced waiting time and made the internet browsing experience more fluid. In 2005, the term Ajax was introduced by Jesse James Garrett, whose article Ajax: A New Approach to Web Applications coined the term which stands for Asynchronous JavaScript and XML. The term went on to define the collection of techniques used to develop asynchronous web apps. Kayak.com, the travelling website, was one of the first large e-commerce websites to use the HTTP and XML. By adopting the practice and with other big companies doing so, this went on to increase further interest among web developers. In the same year of 2004, Google used Ajax techniques to optimize their cross browser functionality for Gmail and later Google Maps (2005).

Putting the pros of PWAs in context

When it comes to considering the pros of PWAs, we have to be cautious. Comparing mobile apps with PWAs is like comparing apples to apples. However, comparing regular web applications with progressive web apps can be misleading. Why is that? PWAs take much more time than a regular web application to develop. PWAs also require utilizing high level javascript languages such as React JS. React developers are much more expensive than regular javascript programming specialists. Another thing which adds to the cost of the project is building APIs. Regular web applications can connect to the database without needing an API. On the other hand, PWAs require APIs in order to communicate with the backend. This adds an extra step to the project, which again increases the time and cost of the project.

Lower costs and maintenance

PWAs are less expensive to build and maintain than mobile apps and web apps together, however they are usually two to two and a half times more expensive than regular web apps. This can be of immense help to startups and new companies.They can benefit from developing a PWA over a native or even a hybrid mobile app, as it helps them pour more resources into their product, rather than breaking the bank on a native app from the jump.

As you may already realize, the progressive nature of PWAs puts them in a class above other apps in many respects. PWAs use one source code and therefore need less specific expertise and cost less than native apps. Clearly, it costs much less to maintain a single code base instead of three (one for web, one for Android and one for iOS).

Lower data use and shareable!

By leveraging data cache, PWAs can also save on data usage compared to other apps. Users won’t need to download the same content again and again. This is a plus for users looking to conserve their data usage and not pay for going over their caps.

Another great feature is the offline availability. PWAs can be browsed offline or even with a poor connection. This keeps users engaged and less likely to get frustrated with the app itself. Having said that, this feature will require an extra step to implement. It all depends on what would add value to your business and app.

Shareability of progressive web apps allows users to spread the word of a good app and create organic engagement. Downsized files and easy installation are the reasons which make PWAs easy to share. Easy installation, without going through app stores, increases users adoption and the conversion rate dramatically.

Much like a website the app is constantly updated, which eliminates the extra step of manual updates for the user. On the flip side, mobile apps need constant upgrades in order to reflect the updates.

The conclusion here is that as a business owner you may consider PWAs if you are sitting on the fence about whether you need a mobile app for your business or not or if you already have a mobile app but it costs you a fortune to maintain and upgrade it.

PWAs

Considering the Cons of PWAs

The benefits of PWAs have been laid out and they are touted frequently today. However, there are drawbacks and cons to PWAs as well. This is important to note, as any team or business deciding on their next app should make the decision while being as informed on the matter as possible.

Increased battery use

One major drawback of PWAs is the battery drainage. As they use cached data and are constantly being updated in the background they can drain the battery quicker than other apps. This could put off battery-conscious users or those with an older model where the battery capacity is limited to say the least.

Lack of visibility on the app stores

Another con lies in one of the app’s strengths. PWAs can be shared through links or downloaded through websites. However, they do not appear in the respective app stores. Many users take recommendations on apps from friends, while others check the app store ranking and reviews. Betting it all on a PWA could cost you those users.

Less control over cellular data usage 

The other factor is that users may give up some levels of control over their data usage. They can manage a mobile app’s access to cellular data, however this does not apply to a PWA. Since progressive web apps are running via the browser, in order to let them use cellular data you will need to allow your internet browser to use cellular data.

Dependability on browsers

Also, PWAs fully depend on the internet browser installed on the user’s phone. If for some reasons Apple Safari no longer supports some web standards in the next release, your PWA could lose some functionality. Depending on what features, although it will still work as a regular web application, it will not provide users with as smooth an experience as a mobile app could.

PWAs cannot replace Native apps

Finally, PWAs have come a long way, but in some cases they still cannot fully replace a native app. This is especially apparent in the gaming space. Most of the popular gaming apps you see take off on the app store are native and built for that platform. This is because the average mobile gamer still requires a level of quality and functionality. Your main purpose of developing an app is therefore important when making the decision.

Examples of PWAs in action and why you might consider one for your project

Earlier, when talking about the history of PWAs, we mentioned a few early examples of the apps. Back then, the catchall term had not been coined yet and functionalities were vastly limited compared to today. You may have seen the “Lite” version of applications that you may be prompted to download when on a mobile website.

There are many modern PWA success stories. Twitter for instance decreased their application size to 3% of what the native Android app was. They saw 250,000 users engaging with Twitter Lite (their PWA) at least four times a day and a 75% increase in Tweets sent.

Another successful example is the AliExpress app, which is one of the largest ecommerce platforms out there. They saw a 74% increase in time spent per session and their new user conversion rate more than doubled.

Uber is another great example of an early adopter. Think about it, when hailing a ride outside, you may not always have the best internet connection. Uber can run on 2G internet and only take up 50kbs of space. This allows Uber to target the lowest end and the highest end of users.

The important factor when making the decision is to take into account what will best serve your project’s ultimate goal. Is it ease of access for users? Functionalities that your app needs to shine? Or offline availability? The purpose is the most important factor. Team As A Service (TAAS) builds PWAs with state-of-the-art standrads. We are here at Twelfth Dream tend to hold an initial discovery session with our prospective clients to best assess their needs and advise them accordingly. All in all, an expert opinion could save you a lot of headaches and costs down the road.

Frequently Asked Questions

  1. Which companies adopted PWA?Twitter,Starbucks,Forbes etc.
  2. How much data do users access in both offline and online mode?For sure all data are accessible in online mode in comparison with offline mode. There are some ways to have access in offline mode too. Firstly, by visiting the webpage on your browser before going offline. Secondly by saving the web page data in the user’s browsers cache and use them each time the site reopens.


Related Articles