You may have heard of PWAs or Progressive Web Apps. The progressive part is perhaps the strangest or most surprising part, because the other part, web apps, seems more intuitive, web applications. I will explain it a little later, for now, let's say that a PWA is an intermediate between the web and a native app on the mobile.
That is to say, on one side there is the traditional web, which if done well, will look good on a mobile phone today, but cannot be installed as such on the mobile phone nor can it access certain phone features. On the other side, there is a native app, which can obviously be installed on the phone and use all of its features, but is not accessible from the web or from another type of device. Progressive Web Apps are born precisely to cover that intermediate area and with the idea of having the best of both worlds.
A PWA is a website that is programmed with the same technologies as the rest of the websites today, but it is installable and can use a large part of the device's own functionalities, as can be seen in What can PWA do today Notifications, NFC, vibration, geolocation, etc., are just some of the phone's functionalities that a PWA will have access to and, as I said before, it is installable on the device, as can be seen in the image with the PWA of our website .
Softspring PWA installed on an Android mobile
If we already had native websites and apps, why make PWAs?
It may sound like a bit of adding more different technologies, sometimes in this technological world it seems that we are adding more technologies per minute than there are problems to solve, but the reality is that PWAs cover a very important real need. For many companies it is very expensive to maintain two code bases at the same time, one for the web and another for native mobile applications (and in this case many times several, one for iOS and one for Android), and they do not really need to use very specific phone functionalities.
Until Progressive Web Apps came along, the web was very limited in this regard, as a website does not behave well when there is no connectivity, or it is cut off; there was nothing in the way web pages were made that allowed them to behave well when the user lost connection to the phone or simply did not have it at first (being on a plane, for example).
Progressive applications?
The P in PWA stands for progressive, and it's because PWAs were initially thought of as applications that would progressively improve based on the technology available on the device. That is, the PWA itself is presented in one way if there is no coverage or connection, or if it loses it intermittently, and in another way if it has a connection or certain services at its disposal. It's not just the connection being progressive that influences this, the idea is that the PWA behaves in one way if it has access to geolocation, for example, and in another way if it is not available (either because the device does not have GPS or because the user does not allow it).
The three pillars on which PWAs are based
PWAs are based on being Capable, Reliable and Installable. Capable, as we were talking about before, of being able to use most of the device's functionalities that, before PWAs existed, could only be used through a Native App. Nowadays, between WebRTC, Push Notifications, Geolocation, NFC Access, it is possible to make very complex applications as PWAs. Reliable because they are designed to be used even if you do not have coverage or internet access. It is true that, in this last point, most PWAs have very basic functionality without internet access, but the same happens with many native Apps.
We come to the last point, Installables. Until recently, the way to install a PWA on a mobile was by accessing the web through a browser and, once the browser detected that it was a PWA, it gave you the option to install it on the home screen. For three years and Chrome 72, PWAs can be offered through the Play Store like the rest of the Apps, which makes them easier for users to find. iOS is a little more complicated than Android, for this, and although visiting the web through Safari we can install the PWA on an iPhone, to put it in the App Store we will have to use an external service that packages the PWA in an App, such as PWABuilder .
I'm interested! How do you make a PWA?
Okay, so we're clear that we like this PWA thing, now, how do we convert our website, or how do we make a PWA from scratch?
For a website to be recognized as a PWA, it basically needs two things. On the one hand, a manifest, a json file, which describes how the website behaves once installed on a device. The Web Manifest, this manifest, among other things, will have information about the icons, names to be displayed on the home screen, things like that.
The second thing a PWA needs is a Service Worker, a Javascript that will control the operation of the PWA when there is no Internet connection, among other things. To achieve this, the Service Worker caches part or all of the content that it requests from the page in a local cache when it has a connection. The definition of these processes is what allows the PWA to be progressive, as we said, to work better or worse depending on the available resources.
Finally, but this is almost taken for granted these days, PWAs need all access to be via https. As we explained in another blog article, it is very easy to do this these days. access to our pages is secure .