Forbes, Twitter, Uber, Le Equipe, Telegram or Instagram They are some of the giants who stepped forward and created their own PWA, or progressive applications as they are commonly known. This scenario suggests the possibility that conventional websites are forgotten.
It is normal, websites as we know them have evolved more and more until they become less powerful replicas than native applications. A PWA is basically the product of that evolution, which has now found a way to offer an experience similar to that of the mobile application from any browser.
If you don't want to be dragged through time, It is important that you start thinking about making your website progressive, or at least as close as possible, since this will begin to have weight when positioning itself sooner rather than later.
What is a progressive web application and how is it different from a native one?
The differences between a progressive and a native are not many, since the first thing you are trying to do is look like the second one, but if we can identify several which make us prefer one over the other:
- Multi platform: The main difference between one and the other is the fact that the native application can only be used on the device on which it is installed, so to use it on another you will have to download it from scratch. The web application for its part is cross-platform since you can access it from any browser as if it were a website.
- Weight: Currently we can find native applications as heavy as a computer program, so this depends on the power. For its part, progressive websites rarely exceed 1MB in weight.
- Quick Updates: If an application is very large, every time it is updated it will take a few minutes to do so. A progressive app is more versatile in that regard since being so light, updates are made in a matter of seconds.
Components of a PWA What does it take to make one?
A progressive application consists basically of four parts; the manifest, the service worker, the icon and the server. Each of them has a fundamental role in the structure of the entire tool.
The manifesto of a PWA application it is a JSON file in which you specify all the metainformation of this. It is where the theme color, name, background color, icon and details are indicated.
This is perhaps the most important component. As we mentioned before these are a programmatic element that offers solutions for the exchange of information between the network and the browser cache. In addition, these also record information to be loaded when there is a connection, which allows the app to be run without internet.
The icon is nothing more than the image that will identify your application from the other web applications on the market, you must design it yourself since this will be the hallmark of the web.
Finally, it will be necessary to have a secure server with its corresponding SSL certificate. 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.
What will we need to program this progressive web application?
We are reaching the moment of truth in which we will have to get to work to create our progressive web application. This will be nothing more than a simple weather forecaster that will tell you the temperature, humidity and atmospheric pressure.
To be able to create it, it will be necessary that we meet a couple of important requirements that we will have to do before we start programming. These are the following:
- A Dark Sky API key: The data of our weather application will come directly from this API, so you must get a key from it. These are completely free for small non-profit projects like the one we are going to create.
Steps to create a progressive web application that works with and without internet
We have reached where we wanted to arrive. It's time to start programming your first progressive application, a very simple one that will give you the necessary knowledge to create a more complete and powerful one in the future. Pay attention and follow all the steps carefully:
Get the Dark Sky API
As we mentioned before, the first thing you should do is get a Dark Sky API key, which will provide the weather data to our progressive app. To do this you must go directly to https://darksky.net/dev, Register and request the key.
Once you have it you should check that it works perfectly. To do this you must take the following link and replace where it says «KeyAqui» for the API key you just acquired. If all goes well, you should be able to see the forecast of New York City without problems.
Get the app code
This is actually a test lab, so we have taken a repository directly from Developers Google so you can take this guided test. To obtain this repository you need to use Glitch, a very useful platform that helps developers exchange information without problems.
What you should do is the following:
- Go to Glitch.com and in the upper right corner of the screen click on «New Project» and then where it says «Clone from Git Repo ».
- That will open a small window where you will have to paste the following address «Https://github.com/googlecodelabs/your-first-pwapp.git» and click on "To accept".