Forbes, Twitter, Uber, Le Equipe, Telegram or Instagram are some of the giants that have stepped forward and created their own PWAs, or progressive applications as they are commonly known. This scenario suggests the possibility that conventional websites are forgotten.
It’s normal, websites as we know them have evolved more and more until they become less powerful replicas of native applications. A PWA is basically the product of that evolution.which has now found a way to deliver a mobile app-like experience from any browser.
If you don’t want to be dragged by time, It is important that you start thinking about making your website progressive, or at least as close to one as possible.as this will start to have weight when positioning sooner rather than later.
What is a Progressive Web App and how is it different from a native one?
A progressive application is a tool programmed and written in web languages such as HTML5, JavaScripts and CSS, but it behaves like a mobile applicationpreserving characteristics of these such as having a storage on the device, which allows it to be used without an internet connection.
The differences between a progressive and a native are not many, since the first one is precisely trying to resemble the secondbut if we can identify several What makes 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 multiplatform 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 their part, progressive websites rarely exceed 1MB in weight.
- Quick updates: if an application is very large, each time it will update it will take a few minutes to update. A progressive app is more versatile in this sense, since being so light its updates are made in a matter of seconds.
Components of a PWA What does it take to make one?
A progressive application is basically made up of four parts; the manifest, the service workers, the icon and the server. Each of them has a fundamental role in the structure of the entire tool..
app manifest
The manifesto of a is a JSON file that specifies all the meta information for this. It is where the color of the theme, the name, the color of the background, the icon and those details are indicated.
service worker
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, they also record information so that it is loaded when there is a connection, which allows the app to be executed without internet.
Icon
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.
HTPPS
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 HTTP like many websites today. The most important thing about a progressive app is its security, and browsers will take care of it.
What will we need to code this Progressive Web App?
We are reaching the moment of truth in which we will have to get down 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.
In order to create it, it will be necessary that we first meet a couple of important requirements that we will have to do before starting to program. 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.
- Programming knowledge: We are not going to deceive you, in order to understand what we are going to tell you, you must at least understand web programming and the most essential languages of HTML5, CSS and JavaScripts.
Steps to create a Progressive Web App that works with and without the internet
We have reached where we wanted to go. It’s time for you to start scheduling your first progressive appa very simple one but 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 be the one that provides the weather data to our progressive app. To do this you must go directly to , 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 “KeyHere” for the API key you just purchased. If all goes well, you should be able to see the New York City forecast with no problem.
https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319
Get the app code
This is actually a test lab, so we’ve pulled a repository directly from Developers Google for you to do this guided test. To obtain this repository, you need to use Glitch, a very useful platform that allows developers to exchange information without problems.
What you should do is the following:
- Go to and in the upper right corner of the screen click on “New Project” and then where it says “Clone from GitRepo”.
- That will open a small window in which you will have to paste the following address https://github.com/googlecodelabs/your-first-pwapp.git and click on “To accept”.
- In that repository is all the information you need. Now you must go to the .env file and modify where it says DARKSKY_API_KEY=”KeyHere” and put your Dark Sky API key where it says “KeyHere.”
- Now you must click on “Show Your App” to see the app in action.
Audit with Lighthouse
Basically with that code the PWA is completed, but it still has flaws that we must correct ourselves and that we will discover thanks to this audit. This tool has a section specially designed for auditing progressive websites like the one we are creating and for this we must do the following:
- Open your project in a new tab in your Chrome browser.
- Later it opens Chrome DevTools and position yourself in the tab Audits. Here the platform shows a list of audit categories that you must leave all enabled.
- The next thing to do is click on run audits and after a few seconds, Lighthouse gives you a page report.
In this case we will focus only on the results of the PWA section, which are the ones that interest us. It will surely throw the following problems:
- ❗FAILED: The current page does not respond with a 200 when offline.
- ❗FAILED: start_url does not respond with a 200 when offline.
- ❗FAILED: Does not register a service worker that controls the page and start_url
- ❗FAILED: The web application manifest does not meet the installation requirements.
- ❗FAILED: It is not configured for a custom home screen.
- ❗FAILED: Does not set an address bar theme color.
Now, our mission in the next tutorial is to get all of this approved, so that we make our progressive web works with and without internet connection, is installable and has a decent app manifest.
Create app manifest
The reason the app failed in the manifest is because it basically doesn’t have one so we’ll have to create it for it, although in your case you will simply have to modify a bit the base code of a manifest that we have prepared for you.
{
“yam”: “Climate”,
“short_name”: “Climate”,
icons: ,
“start_url”: “/index.html”,
display: standalone,
“background_color”: “#3E4EB8”,
“theme_color”: “#2F3BA2”
}
To add this manifest to your app. Next, we need to notify the browser about our manifest by adding element in the index.html file.
Later we must add a meta description to our application. For this we must simply Add the following line of code to the application header:
Finally we establish the color of the address bar of our progressive applicationfor which you must copy the following line of code in the of your application.
Make the web offline
Now comes one of the most complicated parts of the entire guide, Well, we will get involved with pure and hard programming to correctly create our service workeran element that we already mentioned before as essential for any progressive application.
What all users expect from an app is that it can be used without an internet connection, so that it is easy for us to access the content without being on any network. This is just as important in a progressive app, so the need to never get out of Chrome’s dinosaur is imperative.
What we are going to do here is a custom offline page. So when someone enters the app and has no connection, they are the one that shows up instead of the annoying dinosaur. For this we are going to create our first service worker.
If you are not very familiar with them, we recommend that you do so. This is a whole new universe in the world of programming for you, so it is very convenient that you specialize in them. In this way you will grow professionally since you will learn cutting-edge knowledge that will allow you to be one step ahead of your profession..
The first thing we are going to do is register the service worker, for which you will have to add the following line of code to the Index file of the progressive application:
// CODELAB: Register service worker.
if (‘serviceWorker’ in navigator) {
window.addEventListener(load, () => {
navigator.serviceWorker.register(‘/service-worker.js’)
.then((reg) => {
console.log(‘Service worker registered.’, reg);
});
});
}
Now you must tell the service worker the page to display when offline. Within the repository we already created a custom offline page in…
Facebook Comments
Disqus