Skip to content
Step by Step Internet 🌐 Guides for learning to surf the Net

PWA: What is a Progressive Web APP and how is it different from a Native one?

PWA: What is a Progressive Web APP and how is it different from a Native one?

In the world of computing, the main obsession is undoubtedly to optimize the user experience, referring clearly to me from a developer’s point of view. This is especially important in the mobile ecosystem, where the competition is huge .

Therefore, new ways of offering content to the mobile user are developed every day. Native applications seem to dominate in that sense, but apparently the PWA could put that into question because of the multiple benefits of these .

Don’t you know what a PWA is? Well, right now we will show you everything you need to know about them; from its definition to its operation and how to make one for your company or business, since they are a powerful marketing tool .

What is a PWA (Progressive Web Application) and for what does it work?

A progressive web application, or PWA, is a web page programmed in HTML5 or CSS that behaves just like a native mobile application, which optimizes the experience to the maximum by offering greater speed to offer content . In this sense they look a lot like a normal web application, but this one has the peculiarity that it can be installed in the browser, in addition to other much more powerful features.

Seen in this way, one could say that a PWA is an evolution of the web application that we know so far in services such as web.telegram.org , which allows you to use an interface similar to the native app but from your browser. Progressive apps can also be hosted in a web domain and read from any browser, but can be installed in this , as if it were an extension of it.

Beneficios y usos de las aplicaciones web progresivas PWA

History of the PWA, how do we get there?

In 2013, what many had foreshadowed was confirmed and mobile users already outstripped desktop users. This happened largely because of the native applications, which gave you everything and much more than a web. The advantages were evident between one and the other, so the developers began to devise ways to make that gap get shorter .

In principle, web applications appeared, which were pages written in HTML and PHP that behaved similarly to a native app, but still had the limitations of a normal web; Internet dependence, external storage and much more. However, the large number of functions they adapted and the fact of being fully responsive attracted a lot of attention .

Now, at the end of the second decade of the 21st century, the PWA are born, which are a significant evolution to web apps, since they have all their strengths and very few weaknesses, being the most similar to a native application that you can have it in a browser from any device .

What are the differences between a PWA and a web application a native app? Which is better?

To understand this point we must recapitulate. A native application is one that can be installed on the mobile, the web app is the one that is hosted in a domain and the progressive app is the one that can be installed in the browser . These three concepts seem very similar, but they are deeper than they think:

Internet connection

The main and clearest difference between a native app and a web application is that the first one can run perfectly without an internet connection, while the second one needs it because its data is hosted in an external domain. This is also a constant when compared with a progressive app, which can also be executed offline .

Storage

The second clear difference between a native app and a website is the hosting of the data that make it up. The first one is housed in the internal storage of the mobile, which allows you to not need anything from the internet to put it to work since you just have to run it. While the second one is stored in the cloud, the internet connection is required to run it.

For its part, the progressive application is stored in the cache, as it is light enough to be loaded quickly from it , which makes them similar to native apps.

>

Weight

This is possibly the only section where you lose a native app, since they can be considerably heavier than the other two. Currently we can find games that weigh more than 1GB or professional tools of hundreds of megabytes . A web app is much lighter, rarely exceeding 10MB, while progressive ones on average occupy 1MB.

Push Notifications

¿Cómo activar y desactivar todas las notificaciones? Guía paso a paso

Push notifications are those sent by your applications to remind you of pending tasks or to be executed even though it is closed or in the background. These are a very important factor when it comes to user return, so they have tremendous marketing value . This is one of the main features of native applications, which are now also adopted by progressive apps, but which are unfortunately not always available on web apps.

Load speed

Depending on the weight of a native application, it may take up to a minute to open, although the lighter ones generally do so in approximately 20 seconds. Web apps mainly depend on internet speed, but if you have a good connection they will be ready in approximately 10 seconds . Progressive apps taking up so little space will be loaded in a couple of seconds.

Power

A mobile app can now be almost as powerful as professional software, so in that sense it is still unrivaled. Both web and progressive applications are very limited in that regard, so you cannot expect such powerful functions from them .

Multiplatform

A native app is the equivalent of a computer program but installed on a mobile. This makes it limited to the platform on which it has been installed, and then you cannot reload the app on another device without first installing it. This does not happen with web apps and progressive applications, since these can be cross-platform just by loading them in one browser or another without problems .

What unique features make progressive web applications so powerful?

You already know well how a progressive application differs from the others that are currently used. But these are not all surprises, there are certain unique features that make these apps far outperform conventional web applications .

Service Worker

Also known as the service scheduler, it is a very simple programmatic element that allows you to save and access resources in the cache. This basic concept is very important in the operation of a progressive website, since this is the one that allows you to do things like being executed offline, and to be able to register actions while offline so that they are then loaded when available Internet .

Progress

They are called progressive because they can grow as browsers do. That is, as long as more powerful browsers are made, PWAs can be created that are also. In fact, it has been speculated that this would be the future of MMORPG games , allowing them to be played offline from the browser with all its resources.

Conclusion

A progressive app and a native one are undoubtedly better than a web application, the differences have been evident in the previous points. However, when we compare them to each other we find a serious conflict in which native apps are still above.

Why is it better to have PWAs than other applications? Are they really the future of the web?

Without a doubt, a responsive application is extremely useful and it is more than likely that in the not too distant future we will see that they are increasingly powerful. These are very likely to replace many web models such as ecommerce or digital media, but there will still be plenty of websites .

What that is looking for with the progressive application is to create websites that can be as powerful as a native app, so the big question is if at some point they could overcome them. This is a very strong war to see who stays with the throne in the mobile section.

For now the PWA are just being born, which gives them a huge room for improvement, but also a margin of uncertainty , it will all depend on where the money goes.

The concept of PWA is quite simple, but also with a lot of potential. If we imagine browsers with the qualities of an operating system that can be used to run powerful progressive apps , we can certainly see how native apps are overcome in downloads by these.

What are the benefits of changing a native app for a progressive one ?

Its benefits in relation to a web app are obvious, so we decided to compare it against a native app that is its true rival in the global market. Although it is still literally starting its way, a progressive app can be more advantageous than a normal one in several ways .

Multiplatform

Multiplataforma

The fact of being able to be loaded literally in a matter of seconds means that you can use it on any platform you are in, be it a computer, a tablet or an Android. The native app must be previously installed , which can be difficult if you don’t have internet to download it from the store .

Instant updates

One of the things we hate most is when a relatively heavy app must be updated, since in addition to consuming a lot of plan data, it can take a long time. A progressive website is much more practical in that regard, because its updates are faster because its weight is extremely light, which literally allows us to call them express updates .

SEO positioning

This is another important factor from the developer’s point of view. A progressive app can be hosted in a domain, and therefore positioned as if it were a website, but when entering it the user will run into an ecosystem similar to that of a native application .

How does a PWA work? Components of a progressive application

Are you thinking of creating your own PWA ? Well you will be surprised that it is not as difficult as you could imagine. In general, the same languages ​​are used to program a web page, although a progressive app is structured differently. If you are thinking of making your own progressive web application you should know that these are made up of the following elements .

Manifest of the web app h3>

The manifest is a JSON file that contains all the meta information about the app, that would be the name, theme color, background color, icon and other very basic aspects. This would be the equivalent of a normal web page header, but in a separate file.

Service Worker

This is perhaps the most important component. As we mentioned before these are a programmatic aspect that offers solutions for the exchange of information between the network and the browser cache , which is where it will be stored. In addition, these also record information to be loaded when there is a connection, which allows the app to run easily without internet.

Icon

The icon is nothing more than the image that will identify your application from the other web applications on the market, will be its hallmark, so you must choose one designed by yourself .

>

HTPPS

Finally, it will be necessary to have a secure server with its corresponding SSL certificate that guarantees the privacy and security of the clients. Browsers will never run a PWA that is hosted on an HTPP like many websites currently. The most important thing about a progressive app is its security, and browsers will watch over it .

List of the 10 best progressive web applications created so far span>

Well, you know much more than any mortal knows about progressive applications, but you may be wondering: where can I get one? Well, the truth is that it is very likely that you have already used some and have not even noticed . Here we are going to present you what are the 10 best progressive applications developed so far :

Instagram.com

Instagram.com.

That’s right, the instagram website is a PWA that has been working perfectly for several years. Previously you could not use your account outside a mobile phone, but that changed a while ago and with this progressive website it is possible to check your profile from the browser. Of course, this version is much more limited since from it you can not share photos or videos , as well as many functions to interact in the stories.

Forbes.com

Forbes.com

The Forbes website is also a very well done progressive application that allows its users to access the web offline. However, being a digital medium that is constantly updated, when you enter offline you can only see the latest version of the app that has been loaded , so if there has been new news since then this is not they will be displayed until you connect.

Mobile.Twitter

TwitterMobile