You have many options when creating a website. No matter which way you go, the website must work on any type of device. In fact, users have smartphones, tablets, desktops, TVs and more. PWAs are a great technology that meets this requirement. But, what is a PWA? In this article, we explain Progressive Web Applications in simple terms.
What is a PWA?
PWA stands for Progressive Web Application. In simple terms, it is a hybrid between a website and a mobile application. It is not just a responsive website. This means that making a website that looks good on any type of device does not mean making a PWA. Making a PWA is much more. To understand what is this “more” in a PWA, we need to understand how a website works first.
PWA vs Website
A website, in the end, is a collection of files you download from a remote server. It has the page you are viewing, as well as many additional files that make the page works. These are mainly scripts, style, and images. Every time you browse to a new page, you have to get the new page and some of these files. In other words, you download every time the data you need and some additional code that your browser needs to display the content correctly. Imagine you are looking at the weather forecast: all you need to know is the temperature, which is a number. Instead, you always download much more than a number: pictures, information about style and so on.
All the extra information is required for the website to work and be pleasant. However, if you think about it, it is not real-time. You don’t need to download it every time, because it will not be different every time. So, you could download it once and use always the same. This is caching, and it is at the foundation of PWAs.
What is a PWA?
So, a PWA is a website where all the style and logical functions can be cached. Then, the application asks every time only for the data it needs to update. On top of that, it is also important that the application feels good even with no Internet connection. This means showing the user some loading messages while contacting the server. Google, that first introduced the concept of PWA, has a nice page to give developers guidelines to create a PWA.
PWA looks like native apps. In fact, Android and iOS let you add them to the home screen just like normal apps. However, to make this possible, you need to define a Web App Manifest. This is a file with information about your web app that the operating system will use to create the home screen link. If you want to start developing your PWA now, ensure to respect this checklist.
In the end, you can create your PWA you only need Javascript (even vanilla JS), some HTML and CSS, and any backend language you like.
Summary
A PWA is a website designed to cache as much as possible and only interact with the server for the data. While doing so, it must provide the user some feedback so that the user experience is fluid and seamless, like a native app. PWA allows you to use one single code base to reach users on desktop and mobile, on the platform they prefer. This is a good advantage, and PWAs are the best way to go to create simple apps, or when starting out and deploying concepts. Only more advanced apps or games may be better off with a native application.
