Web development trends - Progressive Web Applications (PWA)

Development
All
Reading time:
3
mins.
March 11, 2021

What is PWA? Progressive Web Application represents all the criteria which are essential for an application in order to operate smoothly and give the users the best experience.

The introduction of the open access internet had a huge impact on our lives. We experienced a technological boom which altered our perception and supposition about human connections, information gathering or trading. The main reason for this is the rapid spread of the use of mobile phones with which we have access to unlimited information. With a single tap we can connect to the Internet and attain the collective knowledge of mankind. This process started just a few decades ago, however it is still developing exponentially. No wonder we can’t keep up with every single trend and update. Contrary to popular belief, sometimes it is not the revolutionary ideas that lead to success but the small yet important changes which ease the life of users. Such principle is the development of Progressive Web Applications. 

PWA is not a new technology rather an “umbrella term” that represents all the criteria which are essential for an application in order to operate smoothly and give the users the best experience. Hence, we must be aware of the current user trends. What do we like as users? Nowadays, in this continuously accelerating world we only have a few minutes to order or search for something. Therefore it is quite important for an application to be fast, fluid and intuitive. Users do not want to see unnecessary information, they know exactly why they downloaded the app and they want to use it without delay. Furthermore, it would be convenient for users if they could download and use the application not only on mobile phones but on their tablets and desktops as well. This is called responsive design: the developer shapes the frontend in a way that with the change of the screen diagonal the application would still remain user friendly with the full integration of the original features even on a smaller screen. What else could cause inconvenience? Installing applications to the target hardware. People tend to prefer to open browsers than using apps because this is a default function in every operating system. When we download an app, we can feel that someone put the work and effort in it because we know that those people made that app exclusively to our operation system (e.g. Android or iOS), yet it causes inconvenience by draining mobile data or taking too much memory on the device’s storage. The PWA technology builds the development of web applications on these trends.


Four key technologies of PWA


What was the problem before? Well, web technologies did not support the specifics of the given devices, hence, for example, when a sensor on the phone had to be accessed, it could only be solved by developing a native application for the specific target hardware. What changed? Web development is in such an advanced state that APIs and libraries are now available so that we can access the functionality of target devices independently, which has not been possible before.

So everything is given to create a new directive, which should include the following elements: the app should be fast and intuitive, it should be available for multiple devices due to the responsive design, you don’t have to install it as an app, yet it makes you feel like a native app that you can trust. What’s the solution? We need to create web applications that behave like a native application, yet they don’t need to be actually downloaded as they can run in our browser.

The technology has been on the market for about a year, yet many people do not know or have heard of it. Nonetheless, there are a number of companies that have redesigned their website based on PWA guidelines.

Now let us give you some great examples!


Spotify

The point of Spotify web play1 is that you can use the features you are familiar with in a browser in the same way, whether you open it on a desktop or phone, without downloading the application. If we go to the website we won’t even notice that we are not using the native application. The mobile version asks if we want to display this shortcut on the main screen of the phone so that we can open it immediately and not have to type it separately in a browser. This makes you feel like a native app, yet not downloaded to your phone.

Spotify PWA

Starbucks

Starbucks redesigned its website2 in the same way. The site looks like a downloadable application from the store. Simple, fast and handy on both mobile and desktop interfaces. The site can also use your phone’s geolocation, so you can even get personalised offers from nearby stores.

Starbucks PWA

Uber

Uber’s PWA solution is even more user friendly than the previously introduced ones. When you open m.uber.com the system immediately asks for your data and travel parameters. After a few seconds of identity verification, we can find ourselves there waiting for the drive. Simple and fast without downloading the app.

Uber PWA


So what are the pros for PWA? It helps to increase the traffic to the page / application, as we access the content without downloading, regardless of the device. It can generate more profit because we don’t have to develop several applications, only one which runs in the browser. It can reduce the costs of development by 3 times! Thanks to the technology, applications are faster on average, load less and use less data. Furthermore some applications are cacheable, which means that you don't have to reload the website for a second start and some features can stay offline. With PWA, you can access your device’s sensors, read fingerprints or even send push notifications!

This could be the future? The technology is relatively new, so we do not know where the process will lead but some case studies already claimed that the number of purchases or the number of visits to certain websites has increased (e.g. Ali Express). More and more companies are starting to create PWA content or redesign their websites. Could frontend web development (Angular, React) completely replace mobile applications? Perhaps we won’t be able to completely bridge the hardware differences between different devices. Perhaps we will not need a toolbox after a while because everything will run in a decentralised way in the cloud. Would this be an all-encompassing solution or would it just be another short-lived trend? As fast as technology seems to be evolving, we would say we can get the answers to all of these questions in the next 5 years.

We hope that you found this blog post useful! Do not hesitate to follow us, so you won’t miss interesting stories in the future either.

The professional content of this blog post was provided by Marcell Réti , senior full-stack engineer at ff.next. Bence Siklós, business analyst formed the material into this English article.

1 https://open.spotify.com/

2 https://app.starbucks.com/

Sources:

Four key technologies of PWA

Spotify PWA

Starbucks PWA

Uber PWA

FF.NEXT NEWSLETTER

Subscribe to our cool company newsletter.

Don’t worry, it’s just a few emails yearly, we won’t spam you.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Web development trends - Progressive Web Applications (PWA)

Reading time:
3
minutes

March 11, 2021

The introduction of the open access internet had a huge impact on our lives. We experienced a technological boom which altered our perception and supposition about human connections, information gathering or trading. The main reason for this is the rapid spread of the use of mobile phones with which we have access to unlimited information. With a single tap we can connect to the Internet and attain the collective knowledge of mankind. This process started just a few decades ago, however it is still developing exponentially. No wonder we can’t keep up with every single trend and update. Contrary to popular belief, sometimes it is not the revolutionary ideas that lead to success but the small yet important changes which ease the life of users. Such principle is the development of Progressive Web Applications. 

PWA is not a new technology rather an “umbrella term” that represents all the criteria which are essential for an application in order to operate smoothly and give the users the best experience. Hence, we must be aware of the current user trends. What do we like as users? Nowadays, in this continuously accelerating world we only have a few minutes to order or search for something. Therefore it is quite important for an application to be fast, fluid and intuitive. Users do not want to see unnecessary information, they know exactly why they downloaded the app and they want to use it without delay. Furthermore, it would be convenient for users if they could download and use the application not only on mobile phones but on their tablets and desktops as well. This is called responsive design: the developer shapes the frontend in a way that with the change of the screen diagonal the application would still remain user friendly with the full integration of the original features even on a smaller screen. What else could cause inconvenience? Installing applications to the target hardware. People tend to prefer to open browsers than using apps because this is a default function in every operating system. When we download an app, we can feel that someone put the work and effort in it because we know that those people made that app exclusively to our operation system (e.g. Android or iOS), yet it causes inconvenience by draining mobile data or taking too much memory on the device’s storage. The PWA technology builds the development of web applications on these trends.


Four key technologies of PWA


What was the problem before? Well, web technologies did not support the specifics of the given devices, hence, for example, when a sensor on the phone had to be accessed, it could only be solved by developing a native application for the specific target hardware. What changed? Web development is in such an advanced state that APIs and libraries are now available so that we can access the functionality of target devices independently, which has not been possible before.

So everything is given to create a new directive, which should include the following elements: the app should be fast and intuitive, it should be available for multiple devices due to the responsive design, you don’t have to install it as an app, yet it makes you feel like a native app that you can trust. What’s the solution? We need to create web applications that behave like a native application, yet they don’t need to be actually downloaded as they can run in our browser.

The technology has been on the market for about a year, yet many people do not know or have heard of it. Nonetheless, there are a number of companies that have redesigned their website based on PWA guidelines.

Now let us give you some great examples!


Spotify

The point of Spotify web play1 is that you can use the features you are familiar with in a browser in the same way, whether you open it on a desktop or phone, without downloading the application. If we go to the website we won’t even notice that we are not using the native application. The mobile version asks if we want to display this shortcut on the main screen of the phone so that we can open it immediately and not have to type it separately in a browser. This makes you feel like a native app, yet not downloaded to your phone.

Spotify PWA

Starbucks

Starbucks redesigned its website2 in the same way. The site looks like a downloadable application from the store. Simple, fast and handy on both mobile and desktop interfaces. The site can also use your phone’s geolocation, so you can even get personalised offers from nearby stores.

Starbucks PWA

Uber

Uber’s PWA solution is even more user friendly than the previously introduced ones. When you open m.uber.com the system immediately asks for your data and travel parameters. After a few seconds of identity verification, we can find ourselves there waiting for the drive. Simple and fast without downloading the app.

Uber PWA


So what are the pros for PWA? It helps to increase the traffic to the page / application, as we access the content without downloading, regardless of the device. It can generate more profit because we don’t have to develop several applications, only one which runs in the browser. It can reduce the costs of development by 3 times! Thanks to the technology, applications are faster on average, load less and use less data. Furthermore some applications are cacheable, which means that you don't have to reload the website for a second start and some features can stay offline. With PWA, you can access your device’s sensors, read fingerprints or even send push notifications!

This could be the future? The technology is relatively new, so we do not know where the process will lead but some case studies already claimed that the number of purchases or the number of visits to certain websites has increased (e.g. Ali Express). More and more companies are starting to create PWA content or redesign their websites. Could frontend web development (Angular, React) completely replace mobile applications? Perhaps we won’t be able to completely bridge the hardware differences between different devices. Perhaps we will not need a toolbox after a while because everything will run in a decentralised way in the cloud. Would this be an all-encompassing solution or would it just be another short-lived trend? As fast as technology seems to be evolving, we would say we can get the answers to all of these questions in the next 5 years.

We hope that you found this blog post useful! Do not hesitate to follow us, so you won’t miss interesting stories in the future either.

The professional content of this blog post was provided by Marcell Réti , senior full-stack engineer at ff.next. Bence Siklós, business analyst formed the material into this English article.

1 https://open.spotify.com/

2 https://app.starbucks.com/

Sources:

Four key technologies of PWA

Spotify PWA

Starbucks PWA

Uber PWA