We are the part of the holding

What Is a Progressive Web App? Why would you need one?

  • 17-18 min read
  • September 21, 2021
  • 👍 Rating — 5 (3 votes)

With the advent of smartphones, we all got acquainted with native applications that have firmly entered our lives. Many business owners are wondering: Do we need to build an app? There is no definite answer. It is necessary to study the business and its needs in more detail. After all, creating and maintaining an application requires costs and sometimes not small ones. Luckily for many companies, there is an option that combines a native app’s properties with the technology we use on the web: a progressive web app, also known as a PWA.

PWAs offer a new approach to web design that allows mobile users to use it regardless of hardware or Internet connection. This technology is rapidly evolving, thanks to the updated capabilities of web browsers continuously. Every year, more and more native functions are implemented in them, provided through JavaScript.

Companies such as Twitter, Washington Post, Forbes, and others have incorporated PWA into their apps. So it helped to increase conversions and improve search results on mobile devices, to enhance visitor loyalty.

Google has published case studies of companies that have implemented Progressive Web Apps (PWA). Their results are encouraging:
AliExpress increased its conversion rate for new users by 104%. United eXtra Electronics saw a 4x increase in visitor returns and a 100% increase in sales from users from interactions with toast notifications. Smiles reduced bounce rates by 50% and increased conversions by 30%.

According to such impressive statistics, we decided to understand what a Progressive Web Application is, its advantages, and what projects should create a PWA.

What is a PWA?

Progressive Web Application is an application built based on HTML, CSS, and JavaScript web technologies. It can perform many functions like a mobile application because the Progressive Web Application uses a number of web extensions. You can also say that a PWA is similar to a mobile website, but with additional features, and although you can access it using a URL in a browser, unlike a website, you can add it to your home screen.

It is also worth noting that PWA development is sometimes carried out based on an existing site, saving time and money compared to the complex development of a native application. In such an application, you can add application features such as push notifications, offline support, and more.

core building blocks of PWA

Today, many sites are already progressive web applications. For example, Starbucks.com, by visiting these sites from your mobile device, you can install it on your home screen. Having opened the saved web site, you can make sure that it works as a standard application, while it does not matter whether the device is connected to the Internet or not. It is the most crucial advantage of PWA.

Progressive mobile apps are becoming more and more popular because they are installed on the user’s home screen and work as native ones, and show impressive results. For example, The Washington Post has created a Progressive Web App that runs in the background as people read their AMP pages in Google search results. As a result, the number of visits to articles increased by 23%. From loading articles in 8 seconds in 2013, they went to 80 milliseconds in the Progressive Web App.

As we said earlier, PWA can be compared to native applications, and they can have similar functions, but let’s see the fundamental differences between PWA vs. Native App vs. Web App.

PWA vs. Native App vs. Web App

As I said, Progressive Web Apps are websites at their core, but with some similar benefits to native apps. Let’s see how they differ from native and regular web applications.

Type Native app Web app PWA
What is Written for mobile OS (iOS or Android) Runs in a browser, on a remote server A website with app-like features and UI
Installation From App Store/Google Play, installed directly on a device Installation on a device isn’t required Not installed on a device
Device’s features Full access Limited acess to device’s hardware Limited acess to device’s hardware
Internet connection In most cases, doesn’t depend on the connection Doesn’t work without connection Has an offline mode (interface and contect available due to caching)
Updates Comply with app store regulations, users need to update the app on their devices Promptly delivered to users Instant and automated updates

Yet Progressive Web Apps are not perfect when it comes to iOS devices. Since Progressive Web Apps do not need to be hosted in the App Store, Apple cannot censor the app and control what the iPhone user sees. Because of this, sometimes minor problems may arise, including sending push notifications. But in general, for e-commerce and other industries, this is not a significant hindrance to creating PWAs for iOS. To further convince yourself of the progressive approach of PWA, we have highlighted its main benefits.

Benefits and Drawbacks of PWA

There are many advantages to a progressive web app, but one of the key ones is cost. Turning a website into a PWA is faster and cheaper than building your application. This change will be reflected in fast loading, offline access, and receiving push notifications for users.

benefits of PWA

And in case you were planning to update your website or create it from scratch, then we recommend considering the option of creating a PWA. So, what are the benefits of using such an application:

#1 No need to be placed on marketplaces

To start using PWA, you don’t need to install it from Google Play or the App Store, which means you don’t need to delve into these marketplaces’ requirements and adjust the application for each operating system. A pleasant bonus will be the absence of the need to pay a 30% commission to the application trading platforms.

🧐
If you want to submit your PWA to Google Play, you will have to use additional tools like PWABuilder.

#2 Saving time and resources during development

To develop a native app from scratch, you need a development team, or at least one, if you decide to build an app with Flutter. And with a PWA, you will have both a website and an application. Moreover, it works well on Android and iOS, is suitable for various devices, and many features of native apps can be implemented on Android using PWA.

#3 Fast loading

Since the PWA operates with a local cache, it makes fewer requests to the server, resulting in better performance. Even if the user has a prolonged internet connection, local cache operations are much faster than usual.

#4 Push notifications to users

Push notifications help increase user engagement and as a result of the sale. This feature is available on Windows, macOS (not Safari), Linux, and ChromeOS.

If the app requires access to device functionality, you will have to use additional APIs – NFC API, Geolocation API, Bluetooth API, etc.

Evgen Bryl, DevOps

#5 Updates

After you release updates, they will automatically update to users. This approach allows companies to get rid of a problem called software fragmentation. Previously, they had to maintain old versions of applications; otherwise, they risked losing users until they launched the update.

💡
Benefits of Progressive Web Apps according to our developer’s opinion
Developers’ practical experience shows that:

  • Creating a PWA is a less labor-intensive process compared to a regular website.
  • Single Code – No need to build a backward compatible API.
  • PWAs can run on absolutely any device – no need to create mobile versions or fight for adaptability.

#6 Offline-first

A rather popular feature in recent years – thanks to developers and APIs in modern browsers, websites can be accessed during a period when the mobile device is not connected to the Internet. Creating an offline interface is similar to creating a mobile application, and in this case, a different approach is required than in building websites. We will discuss this in more detail below.

#7 PWA installs faster

PWA does not require installation on a mobile device. All it takes is three simple steps:

  • Visit site
  • Add a site to the home screen of the device
  • Open and use the app

Running on Android, the PWA can function like a native app, such as fingerprint authentication, AR / VR, NFC payment, even speech recognition, and more.

PWA features on Android
More features available in your browser on whatpwacando.today

Certainly, progressive web applications have their advantages and disadvantages. It is essential to understand that, in essence, PWAs remain websites, which means they have certain limitations. Below we have highlighted the disadvantages that are worth knowing about:

Drawbacks of PWA

Limited functionality on iOS devices. PWA support is still limited on iOS as there is no direct way to add PWAs to the Apple Store. Therefore, when building a PWA for iOS, you need to create a hybrid app with tools like PWA Builder or Cordova. Thanks to this approach, we get our own package with a browser located inside, for the PWA to work on Apple mobile devices. Day of work with Android, such actions are not required.

  • No access to user data. PWAs are not native applications and therefore have restrictions on accessing phone contacts, saved data, or other applications.
  • Limited access to device features. As we said above, PWA already has access to many device functions, but native applications do not require a connection through the browser API, which means they have access to broader device functions.

Nevertheless, the implementation of PWA shows excellent results for the business. You can see more successful cases at pwastats.com.

PWA Statistics

Cases when to use a PWA

Let’s take a look at how the concept of progressive web applications can help grow your business. We asked our Chief Software developer, Evgen Bryl, to outline those industries for which PWA is a must-have.


E-commerce
If you are just getting started in this industry and your profit margins are low, and each increase in the sales funnel has a significant impact on income, progressive web applications, statistically, increase conversions by an average of 76% in web browsers.
Trading platforms
When you need to focus on buyers and sellers simultaneously, PWAs can help you manage multiple metrics at once – companies see 40% fewer bounces and 38% more conversions with increased user page time.
Mobile applications on-demand
Many users dislike the abundance of apps on their devices, mainly if they rarely use them. Uber is such an example when an application is stored on the device but usually not used every day. PWA uses 300 times less phone memory, which contributes to user loyalty, and they can use your application at the right time.

If you find yourself among the cases mentioned and are already ready to move on to development, we recommend that you take your time and answer a few more questions to ensure that the solution is correct. So, study your target audience. Are they using apps? How and where are they using your content? Can the app solve their problem? It’s essential to understand your audience’s needs because if your audience doesn’t need it, why would you create one?

lamp

Do you want to save costs on mobile app development?

Build a cross-platform Progressive Web Application.

How to develop a PWA

If you already have a website, then you probably don’t need to create a progressive web application from scratch. It takes a little time and experts in this matter. Before your site becomes a live PWA, you need to provide three things.

  • Secure Connection (HTTPS): PWAs only work with trusted connections; you must serve them over a secure connection. It is not only for security reasons but also for a critical trust factor for users.
  • Service worker: A service worker is a part of a script that runs in the background. It will help you figure out how to handle network requests for your PWA, allowing more intricate work to be done.
  • Manifest file: This JSON file contains information about how your PWA should look and work. It is where you define the name, description, icons, colors, and so on.

In the development process, we use the following technologies:

  • Angular.js is a framework specifically designed for developing responsive applications and dynamic websites.
  • TypeScript is a programming language.
  • Service Worker API is a technology that transforms a website into a progressive application.
  • SaSS is a tool for creating web page styles.
  • HTML5 / CSS3 is a platform for creating web applications.

If you plan to develop from scratch, you need to select a team of professionals to help you in selecting technologies and research for you, analyze the data, and give recommendations on how to make your PWA high-quality tools to attract customers but also make a profit.

Since we started the development topic, here is a quick overview of the tools with which most PWAs are created.

Top 5 Progressive Web App Frameworks in 2020

Today, there are many different frameworks for building PWA. Each of them has pros and cons, guided by which you can make in favor of one or another tool. That is why we decided to create a list of the 5 most popular frameworks that will make your choice easier.

Let’s take a closer look at them:

#1 Angular

The development process using this framework is built as simple as possible to avoid monotonous tasks. This framework also has a unique Ahead of Time (AoT) compilation method that allows you to speed up the rendering of applications by converting Angular HTML and TypeScript code into efficient JavaScript code before the browser loads and launches the application.

Pros Cons
  • Sophisticated infrastructure suitable for large-scale projects
  • A vast archive of third-party extensions
  • Optimized for speed and safety, with a unique Ahead of Time (AoT) compilation method
  • Dependency injection to improve code efficiency and modularity
  • Fully modular elements
  • An understanding of TypeScript is required
  • Steep learning curve
  • Not optimized for SEO

#2 React

A well-known framework that contributes to the development of PWA. React provides a lot of flexibility in development because it looks more like a library. But it can only wrap HTML into JavaScript. Works with DOM server side virtual rendering.

Pros Cons
  • Good server side rendering support
  • Flexibility in development
  • High performance as it uses the virtual DOM and various rendering optimizations
  • Open source library.
  • Lack of documentation
  • Not SEO Optimized

#3 Vue

VueJS also uses Virtual DOM to represent the actual DOM in a lightweight and efficient manner. Vue differs from React in that it embraces and enhances existing web technologies – HTML and CSS, whereas React mainly uses JavaScript.

Pros Cons
  • Standard documentation
  • Can be combined with JSX and Typescript for best results
  • Animations
  • Improved rendering performance with Virtual-DOM
  • Not suitable for large projects
  • Poorly developing

#4 Preact

Preact is a lightweight, performance-oriented platform that’s great for PWA development. This framework is fully React compatible, and migrating from React to Preact is as easy as implementing prior negotiation of a compatibility level with existing code.

Pros Cons
  • Uses the same ES6 API as React for full interoperability.
  • Preact CLI, offers high-performance PWA
  • The framework comes with server rendering, routing, and add-ons
  • Requires preact-compat to use React components or packages

#5 PWABuilder

PWABuilder allows you to transform websites into fast, functional, and engaging PWAs. The recently released PWA Builder 2.0 also extends its official support for the WebKit-driven Mac desktop platform.

Pros Cons
  • Intuitive and comprehensive build/conversion process
  • Extensive documentation
  • Use Vuejs for your web development
  • Limited flexibility
  • An automated process that can make management a little difficult

The choice of the framework will determine the speed and responsiveness of your PWA in the future. Therefore, we suggest exploring all the options or contact us – our team has been engaged in web and mobile development for 10 years. We know which structure to choose for PWA development to avoid unnecessary expenses in the future on its optimization.

What to look for when developing

When developing progressive applications, we strive to ensure that the solutions work well on all operating systems. For several years now, our company has been working on PWA as the optimal solution for business. We have gained experience in the principles of user interface design. However, there are difficulties that we encountered and would like to draw your attention to:

  • At the beginning of project development, we work through the Data flow of the system and determine what data needs to be cached and for how long. It is necessary not only for stable operation but also to save user traffic. You also need to understand that caching or receiving too much data can immediately lead to a tab crash in the browser since in each OS, the amount of memory allocated for a tab is limited.
  • At the application debugging stage, the main mistake may be that the iOS and Android operating systems impose their restrictions and interpret objects differently. Understanding the bottlenecks in development gave us an understanding of designing each element to reduce the time and resources for solving these problems.

Our expertise

We recently completed a project for a company that manufactures and installs special parts for company vehicles (police cars, ambulances, etc.) and turned to us to solve several problems related to ordering. Before we developed the digital solution, the company’s employees had to do a lot of manual work, which took a lot of time and slowed down the order processing. For example, when an order came from a customer, a company employee had to independently determine all the required special parts of the car, manually create a list of such items, and then collect all these parts from the warehouse using the part numbers. After that, these parts were installed on the car. Our client wanted to create a digital solution (ERP and PWA) that can automate all these processes mentioned above.

Custom ERP is designed to automate all internal processes for placing an order. PWA is needed so that customers can conveniently select all the necessary parts and place an order on their own. We have prepared an estimate for this project for you as an example of developing a progressive web application from scratch. Still, the price may differ since all solutions are unique and designed for each client’s needs.

Jobs USD Hours
 Specification  3975  133
 Design  1263  50
 HTML/CSS  2628  146
 JS Developmen  8195  304
 PHP Developmen  12866  476
 Manual Testing  4384  276
 Admin 1188  52
 Scrum Master  6720  277
 Total COST in USD  41217

Thanks to the digitalization of processes, particularly PWA, our client was able to triple the speed of order processing while freeing existing employees from ineffective work. Developing customized solutions is not an easy task, as it requires solving specific problems that a business faces in its work. At the same time, the development team must study all the business details, understand the goals of the project, and what requirements it must meet.

PWA is a cross-platform application that uses a single codebase to reach Android and iOS users. This way, you don’t have to develop separate Android and iOS apps. By hiring one development team and supporting one instead of two applications, you reduce software development costs.
The PWA is SEO friendly, but you need to consider some nuances, mostly if you have decided to turn your old site into a progressive application. Many PWAs use JavaScript to create more complex functionality, and while search engines have learned to render JavaScript, there can be some difficulties. When setting up a PWA, you need to make sure your JavaScript is available. Don’t block files for bots, and make sure the links are accessible. To improve the rendering process, you can force your JavaScript framework to use server-side rendering. By making a PWA from a site, you are not getting the SEO of that site directly. Instead, you are improving the user experience by which your site grows in popularity.
One of the deciding factors is the answer to the question: do you need to develop from scratch, or do you already have a responsive website that you want to turn into a progressive web application? Next, you need to consider many factors, such as developing an entirely new interface, whether you need integration with a payment gateway and other systems, and many different nuances. To get a detailed PWA estimate for your business, it is best to contact our business analyst for a cost estimate.

Conclusion

To summarize our article, it is worth saying that PWA development helps many business owners to maintain a competitive edge in the market without developing full-fledged applications. Let us recall again the benefits that you can get from the implementation of this technology:

  • Improved conversions;
  • Increased page loading speed for mobile web pages;
  • Relatively low development costs;
  • Increasing user engagement;
  • Reducing the bounce rate.
lamp

Want to build your competitive advantage with Progressive Web Apps?

Creator

Expert & Evangelist in business optimization tools like fintech, logistics, on-demand services apps who will help you to understand the core ideas of the outlined themes by my articles.
Evgeniy

Expert

Evgen is a key person that makes your project scalable and easy to maintain. Thanks to his advanced and deep knowledge of innovative technologies our team can produce project with high level of complexity and loading. And apart from being a great expert he's also a reliable team player ready to back you up.
Leave a comment

How can we help you?

  • Indicating scope, timeframes, or business challenges would allow us to provide a better response
  • Our expert team will get back to you within 24h for free consultation
  • All information provided is kept confidential and under NDA

Looking forward to your message!

spinner