Progressive Web Applications

An alternative to native applications

It is nothing new that native apps for mobile devices have a huge technological and business advantage over regular websites. This is particularly evident when we try to build or activate our community, i.e. our potential customer base.

Until recently, there was no good alternative to native apps. In fact, the only option was web services, but they have one key disadvantage – they don’t work offline. So they are no competition for native apps, at least in this view.

The biggest players – Google or Microsoft – quickly spotted a gap in the market and started to develop the right technology to deliver a similar product to a native app, but at a much lower price. We are talking about PWA, or Progressive Web Applications.

Native applications

However, before we move on to Progressive Web Applications, it’s worth paying some attention to native applications on mobile devices. These types of products are programs that are created specifically for smartphones or tablets, so they cannot be downloaded directly from the Internet, but only from app stores such as Google Play.
The development process for such a product is complex and requires several key decisions to be made before any work begins. You have to decide which systems you want to develop the applications for and how many versions back you want to support. These two decisions largely define what the cost will be.
However, the final project budget is influenced by more factors including:

  • Number of platforms
  • Number of supported versions
  • Application complexity
  • Completely separate development
  • Team responsible for the creation and development of the service
  • Having to go through the App Store and Google Play verification process
  • Maintaining each application separately

 

The whole process of building a native application is quite long and expensive, which means that not everyone can necessarily afford it. Some also do not want to incur development costs when the product is not too complex at the concept or business needs stage. The PWA was developed for such simple solutions.

What is a PWA?

“Progressive Web Applications (PWA) – a type of mobile application delivered over the web and built using typical web technologies such as HTML, CSS and JavaScript.” – according to Wikipedia.
Expanding on this definition, we could say that a PWA gives us the ability to create a mobile app that is installed on devices directly from websites and built using a team of web developers. This can lead to considerable savings and shorten the time needed to create the final product.


PWA is a web service

The fact that PWA is a web service is the biggest advantage of this solution. This is also the difference between this technology and a native application. A PWA is a website built as a responsive site (RWD), meeting simple conditions and configured accordingly. The purpose of Progressive Web Application is to imitate being a native application, fired by and within the browser from which it was installed.
The PWA requirements for web services are as follows:

  • Full RWD
  • Optimisation of page load speed
  • Active and valid SSL certificate
  • HTTP to HTTPS auto-forwarding
  • Configuration file manifest.json
  • Implemented Service Worker mechanism

The first four points are really about making sure that the user navigates our site quickly, comfortably and – most importantly – safely. These points are not accidental and are the result of recommendations by Google, which has been trying to force them on websites for a long time. This is the reason why it is worth fulfilling these requirements, because it will make our website work faster and its position in Google results will be better. The low cost of implementing a PWA and the benefits it brings mean that it is now a strongly recommended technology for all types of websites.


PWA customisation possibilities

In the configuration file of our application we can set the following things:

  • Desktop display icon
  • The icon you see when the application starts
  • The colour of the elements of the browser in which we start our service
  • Background colour under the icon during application start-up

Browser appearance and here the two coolest options are:

  • Full screen – meaning we don’t see any elements that don’t belong to our application.
  • Standalone – which means you only see system elements, like the clock or the Wi-Fi icon.

Application orientation:

  • Any
  • Portrait
  • Horizontal
  • Offline

A Service Worker is a JavaScript function or set of functions that are responsible for making an application work offline. This mechanism runs in a separate thread, so it also works when the user does not have the application open. Such a solution makes it possible, for example, to send push notifications to users. This gives the PWA as an application exactly the same access to the potential customer as its native counterpart. Translating this into a simple example: we are able to send users who have installed the app notifications about the latest promotion or event.

The Push API is only part of what Service Worker offers. This mechanism shows its full potential when the user is offline. This illustrated by the example of the Washington Post, which abandoned a separate mobile version of its website in favour of RWD with implemented PWA technology. The developers of this app decided that they would save the content of a dozen recent articles directly to users’ devices. Thanks to this solution, the content is still available even when the user does not have access to the Internet. It is these types of PWA implementations that make this technology an alternative to native applications.

Limitations

Progressive Web Applications is not a flawless technology. Compared to native applications, it has significant shortcomings, mainly in the number of available functions or system mechanisms (API). PWA does not allow contactless payment, access to text messages or address book and does not allow logging in with technologies such as face ID. Due to these limitations, we will not build, for example, a sophisticated banking application.

Cost of PWA implementation

What are the costs of implementing a PWA? It depends on the assumptions and mechanisms we want to have in the application. It is also important whether our service meets the requirements necessary for the implementation of a PWA.
If our website is fully responsive, loads fast enough and has an SSL certificate, its configuration and installation of Service Worker will take only a few hours, and its costs will not be high.
PWA is not a perfect tool, but it is nevertheless a great alternative to native apps. It is extremely simple to implement and offers tangible benefits at a low cost. PWA is ideal when you already have a website and you want to reach a wider range of users, but on the other hand, you have a very limited budget or time.

Share on linkedin
Share on facebook
Share on twitter

You may also find interesting:

Product Design Sprint

Design Sprint is a process of business problems solving developed by Google Ventures. It was created to help start-ups build better products. We adapted this method to the requirements of big organizations.

Design-Driven Innovation

Innovation is often about changing the meaning of what a product or a service is and what it offers its users. This is the core of the design.

UX & Visual Design

Interfaces, processes, and ecosystems, improve customer journeys, help to increase sales, and provide better customer service. We combine business and users’ needs to create digital products that make money.

Scrum at a glance

SCRUM has become the dominant approach to organising project work. The high variability of the economic and legal environment forces companies to increase the speed of adaptation.

Contact us