pwa logo

What is PWA (Progressive Web Application)?

First you know the PWA (Progressive Web Application)? A PWA is a type of web application that allows you to use native features of the operating system. Such as GPS location, push notifications, shortcut on the Home page among other native features of the operating system.

With that the websites work as if they were native applications without the browser bar. However this type of application is recommended for occasional use service applications as high performance application does not work well.

  1. How did PWA come about?
  2. How Progressive Web Application Works
  3. Main features
  4. performance
  5. Sites that use Progressive Web Application
    1. twitter
    2. Globoplay
    3. Uol – Univeso Online
    4. telegram web
  6. Sites that should use PWA
    1. Facebook
    2. Netflix
    3. Deezer
  7. My Projects with PWA
    1. Felipe Mateus website
    2. Felipe Mateus's microblog
    3. opportunities.river
  8. Disadvantages of PWA
  9. Conclusion

How did PWA come about?

The PWA emerged with the natural evolution of the way of creating web pages, in the beginning of the web the pages had only texts. But over the years it evolved, the first evolution took place with javascript that allowed the creation of dynamic pages.

Over time, the internet in general evolved with the adoption of broadband that allowed the loading of increasingly larger and heavier pages. In this sense, the Web2.0 in the mid-2000s it brought a lot of what we see on the internet today.

in the year 2010 Apple founder Steve Jobs strongly criticized Adobe Flash, a program used at the time to display media. After Jobs' Criticism HTML5 soon became well-received as Steve Jobs' idea was for all iPhone applications to be web applications, which has not happened until today.

How does PWA work?

The PWA works like a normal website hosted on the internet, the difference is in the resources that one uses in the browser. Most famous websites are built with Progressive Web Application so it is possible to use them on multiple systems without installation.

Logo The ability to look like a native app is due to the features that browsers have. They are:

  • Execution offline – This is the feature that draws the most attention in these types of apps as this was previously only possible in native apps.
  • icon nthe home screen – this is very good. In addition to running as a native app, it is possible to place it on the home screen and also place shortcuts.
  • push notification – I believe it is one of the most famous features of this type of app who has never entered the site and asked if they wanted to receive notifications?
  • sflash screen – PWAs display when opening the logo and with the color theme chosen by the dev in manifest.json.
  • keep data – With PWA it is possible to keep data both permanently and while the app is running this functionality happens thanks to the WebStorage.
  • Execution in 2nd plane – It is possible to run background functions such as notification for example.

All these features are only possible by configuring the service worker which is the script that runs in the user's browser doing all these functions. However with the exception of the splash screen and the icon on the start screen which is a function of the manifest.json a file that specifies all the app's icon, shortcut, and theme settings.

Main features

The outstanding feature of a Progressive Web Application site is the possibility of using it as a native app, but this is not the only feature. Since PWA apps are website html pages first of all, let's look at some attributes they should have.

  • Progressivity – It's about the app being accessible to any free browser user and having new features available depending on browser compatibility.
  • responsiveness – Ability to open on any screen freely of size or device be it cell phone, computer or tablet.
  • Safety – PWA Apps must be in https this ensures the security of the app's information.
  • installable – Users have the option to install the app by placing it on the homepage or by downloading it from the app store.
  • Linkable – To gain access, simply access through a link without the need to download the app from the app store.

However, to create a good app, don't forget to always think about how the user will use the app and its functions. Always thinking about the user, chrome has a tool that tests if the site is compatible with Progressive Web Application and if it meets all the requirements to be installed.

Image shows pwa lighthouse in chrome.
Lighthouse image with PWA tests

performance

When it comes to performance, PWA apps do better than native ones as PWAs were made to run on the web. In this sense, they consume less resources than native apps since they are apps designed to run in the browser.

However apps that have a lot of graphics like games and image and video editors can get heavy because of JavaScript. That's why the WebAssembly a new type of code has been created that runs binaries in the browser and makes software like games perform better.

Some sites that use PWA

As previously mentioned, some famous sites already use PWA in their online versions and this will be more common. Because PWA is a better way to create a lite version, a lighter and more abridged version of the native Apps.

1.Twitter

image shows twitter PWA test.
PWA test on twitter.

Twitter is a short text social network that is available in PWA that allows installation on any system.

2. Globoplay

Image shows pwa test on globoplay with some flaws.
PWA test on globoplay

Globoplay is a streaming service that distributes video series and television channels, it has PWA support. Although it does not meet all PWA requirements it is possible to install it on any system I installed on linux using pwa.

3. uol – Universe Online

The image shows the test on the website Universo online.
PWA test on uol

The Uol Portal also currently supports PWA, which makes it possible to install and receive updates directly on your computer. Likewise, Globoplay or uol also has pending PWA criteria and it is still possible to install.

4. Telegram Web

Image shows pwa test on telegram showing it can be installed.
PWA test on telegram

Telegram has a web version that is also compatible with PWA however it can be run on systems that do not have native support. The telegram app also didn't pass all the tests just like the previous sites telegram didn't pass the masked icon.

5. Youtube

Image shows lighthouse pwa with youtube test.
PWA test on Youtube

Youtube is also a service built with progressive web application as seen in the previous test. However, despite not passing all tests, it is available for installation because the items that fail are not mandatory.

Sites that should use PWA

Although several large sites already use Progressive Web Application, there are sites that do not and should use it to be compatible with all systems. However, this ends up being a problem to use these apps on systems that do not have compatibility.

1. Facebook

Facebook lighthouse test.
Failed Test on Facebook

Facebook that does not use Progressive Web Application in its web version however it is not possible to install the app on systems without native versions.

2. Netflix

Image shows netflix lighthouse PWA test.
Netflix's Light House Failed Trial

Netflix is a site that should support PWA because it is a very used site and I would like to install this app on my pc, but I can't.

3. Deezer

Image shows pwa lighthouse test.
Deezer failed test

Deezer is another app that should be available in PWA as it is a very used app and doesn't support many systems. On Linux, for example, there are several unofficial ways to download and install Deezer on your pc if you had PWA you wouldn't need these alternative ways.

My Projects with PWA

Since I discovered the Progressive Web Application in 2018, I have been looking to make projects using this technology. In this sense I have some projects published that use PWA and it is possible to install it on different systems, they are:

1. Felipe Mateus's World

Image presents the lighthouse test site test.
lighthouse test on the from site

Mundo do Felipe Mateus is this site that you read it built with WordPress and passed all the progressive web application tests. However, it works offline with cache of pages accessed with notifications disabled due to incapability.

2. Felipe Mateus's microblog

This image shows the lighthouse thesis of my microblog.
my microblog light house test

O my microblog it was my first project with Progressive Web Application it was 2 years with the PWA inactivated because I had uploaded the wrong version and in 2020 I found the source code and corrected the error.

3. Opportunities.rio

The image shows the lighthouse test of my opportunities rio project
lighthouse test from Oportunidades.rio.br

Oportunidades.rio is a job advertisement project for the state of Rio de Janeiro for the metropolitan region. However, the Progressive Web Application test passed almost all tests and only failed the masked icon test.

Disadvantages of PWA

So far I've only talked about advantages, but the Progressive Web Application has some disadvantages associated with the type of technology used as they are:

  • Noit's not in stores – PWA apps are not present in the app stores so it ends up having distribution difficulties.
  • Functionalities – PWA apps do not support mobile phone features such as vibration, Bluetooth, faceID and other features.
  • incompatibility with apple – Apple devices do not support PWA yet and do not have any predictions for compatibility.
  • no integration – PWA apps have no integration with other apps they are isolated if you need to use a native library from another app you won't be able to.

Conclusion

In summary, PWA is a new way to create applications that run directly in the browser whenever you need a store. However, PWAs have performance limitations for complex applications and support native system functions.

What is PWA?

pwa logo

PWA is a way of developing web applications in which you can create web pages similar to native apps. However Being able to use offline, receive push notifications and location.

How did PWA come about?

PWA emerged in the natural evolution of HTML5 and the front end application development model process.

What are the characteristics of a PWA?

The features of the Progressive Web Application are: Progressivity, responsiveness, Safety, installable and Linkable.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.