How to build a Progressive Web Application (PWA) from scratch like an expert? - Step by step guide

Who I am
Philippe Gloaguen
@philippegloaguen
Author and references

Do you want to learn how to program PWAs? Then you are in the right place because in this article we will teach you everything you need to learn how to make them. Using our guide in a very short time you will be able to become an expert programmer and you will be able to create any web application.

What is a progressive application and its basic components?

 

A progressive application is a computer tool programmed using a web language such as HTML5 to behave like a mobile application. This allows the user to have the characteristics of this system, such as being able to use it without the need to be connected to the Internet.



The main components of progressive applications are the manifest, i Worker services, the icon and the server. Each part is essential for the correct functioning of the application and without them it will not be possible to use the App from the search engine. They also have several differences with native apps

What else is needed?

This point is a bit obvious, but it's worth pointing out before showing you the steps to follow that you need to have programming knowledge to create the App If you don't have that knowledge, it will be very difficult or even impossible to program the application, but if you know how to program there will be no problems.

As long as you have a basic understanding of programming in HTML5, CSS or JavaScript, ti it will be enough to understand the steps that we will show you. And if you don't know, don't be discouraged, you can learn the basics of programming and come back to this article in the future.


How to create a progressive application?

Let's start from the guide, this time we will show it to you with an example so you can better understand how these are created applications. We will create a weather forecast app, so follow the steps carefully so as not to create any problems.


Step 1

The first thing you should do is get a server that provides you with weather data, such as Dark Sky Api. Just go to its official page, register and request the key so that they provide you with the data for your App.

When you have the key you should check that everything is working properly and one way to do this is to enter this link “https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319”. Make sure you enter the key that was given to you in the link we gave you in the part where it says “Password Here” and hopefully it will give you the forecast for New York.

Step 2

The next thing will be to get the code that you will use to create the app, for this you will be using a Glitch repository which is a page where programmers exchange information. Then go to “Glitch.com” and click on “New Project” and enter the option called “Clona da Git Repo”.

After doing that, a pop-up window will appear where you need to enter this web address “https://github.com/googlecodelabs/your-first-pwapp.git”. Once in, you will enter the repository where you will have everything you need to work.The first thing you should do is go to the.env file.


3 pass

There you will find a section called DARKSKY_API_KEY = “Password Here” where you have to enter the password you got in the previous step. The next thing you should do is hit where it says “Show your app” to test your app and see if it works properly.


And basically in this way you can create progressive applications, all that remains is to continue programming in this code or create your own. Remember that to avoid system breakdowns it is always good to do Audits and we will help you in this.

Audit with Lightho tools

Lightho is a very useful tool that helps to control these types of applications so that it becomes much easier for you to handle errors in your code. You just have to open your project in a new tab, then open Chrome DevTools and go to the check option to do so.


With that you will be able to see all programming errors of the your application so that you can fix them, so take advantage of this amazing tool in the best possible way.

TagsTutorial Internet
add a comment of How to build a Progressive Web Application (PWA) from scratch like an expert? - Step by step guide
Comment sent successfully! We will review it in the next few hours.