There has been a lot of talk lately about the revolution in the world of web programming with PWA (Progressive Web Apps), but let’s see what are they really?
Progressive web apps is a term given to a new generation of applications with increased functionality. The functionality is increased accordingly, depending on the capabilities of the device which runs the app, functionality increases in line with the capabilities, hence the word progressive.
The next word in the term ‘web’, refers to the fact that they are built using web development standards, both already known and established once like HTML, CSS and JavaScript; and a new generation of JavaScript APIs.
The final word - ‘app’ is because Progressive Web Apps behave like native web applications, even though they use web technologies.
In simple words, they are web pages that behave like native apps. The objective of the PWAs is to convert websites into applications. Therefore, we must bear in mind what is the difference between them and standard applications before we can proceed on to evaluate their advantages and characteristics. Then, we’ll be able to determine whether we want our websites to become applications or have the characteristics of an application.
The main advantages of websites are the following:
-
They work on any device. This means that they are accessible from any device that has a browser, including mobile phones, tablets, computers, televisions, wearables, etc. You only need a browser to execute them and this is due to the fact that both HTML and JavaScript are multi-platform and multi-device languages.
-
They allow you to attract users more effectively than mobile applications because of their universality.
-
With websites you have a lot more option when it comes to advertising, including via social networks, email campaigns, etc.
On the other hand, these are the key features of native apps:
-
The applications are not universal and need to be created in a specific programming language depending on the device in which they are going to be executed. And the plethora of devices is quite diverse, it can be an iOS device, Android, SmartTV, SmartWatch, etc.
-
Increased user loyalty. Users who have downloaded and installed an application can open it any time, as the application is always accessible, it is not necessary to remember an URL, or a site name, google the site or have it bookmarked. On the other hand, some of the above-mentioned steps are necessary with web applications, which is why we say that native apps provide an increased level of user loyalty.
-
The ability to send notifications is one of the greatest advantages of native apps. A notification can be sent when the user hasn’t been active in a while in an attempt to re-activate them.
-
Many applications can and do work offline. However, this is not always an option, and certainly not in all cases and with all applications. On the other hand, you can never access a website without an internet connection.
Next, we will see the characteristics of PWA:
-
They are webs. Therefore, they are universal and multiplatform. You can access them any device and from anywhere.
-
They are installable. A progressive web application can be installed on a mobile device, such as a smartphone or a tablet. And once it is instilled there’ll be no need to access it through a browser over and over. You will be able to activate it with one click, via the icon. The website will appear like a native app on your device.
-
They can send push notifications. Through a push notification, the user can open the notification and access it just like a native app. This is another advantage of native apps that’s available on PWAs.
-
It is possible to access a PWA without an internet connection. So, you can launch a PWA even if there’s no Wi-Fi connection or mobile data.
-
PWAs offer better loading time and higher performance than web applications.
-
Content is loaded almost instantly.
How to turn your website into a PWA?
If you want to turn your website into a PWA, these are some of the technologies that you can use to achieve it.
- Responsive Web Design. It is a set of techniques and specific frameworks used to create interfaces that adapt automatically to the device that is used.
- Service Workers. It is a technology that allows executing services in the background of browsers. The main advantage is that they can be executed independently from the application.
- Shell App. The idea of this model is to separate functionality and content in order to load them separately. It is a pattern used by many Single Page Applications. The objective is to create a perception that the loading speed of these applications is faster.
- Manifest File. Basically, it is the standard way to inform the browser that the web is installable. It is a JSON-format file and it is widely supported in browsers. To include this file on the web, it’s enough to include the following code in the head of the HTML:
<link rel="manifest" href="/manifest.json" />Advantages of Progressive Web App
Another advantage is that by not depending on the phone's hardware in a way a native app does, they allow faster loading speed (if there’s a good internet connection, of course). Also, there is the option to download it and use it offline, which would pretty much turn them into a native app.
In addition, PWAs can send push notifications directly to the smartphone and can often run in a full-screen mode, so that the browser disappears from view when the PWA is active.
Progressive Web Applications also allow us to run them on any operating system, a great advantage over native apps. By comparison, you’d need a separate app for iOS, Android, Windows… and any other system.
They offer better protection against malware. This is due to the fact that they can’t access specific parts of the system which are only accessible from inside.
Another advantage is that when you’re using a PWA you are always accessing the latest updated version of the app, which is not the case with native apps. PWAs are easier to update than the native apps, the latter has to be updated by the user when the developer has released an available update, and this is more complicated.
The development and maintenance of a PWA require less programming, and less work in general compared to native apps, as a PWA is both a web site and an independent platform application, so the two versions get updated simultaneously, no extra effort is required.
Basically, all of the above means that there are lower development and management costs, especially since the revenue doesn’t need to be shared with Google or Apple since PWAs aren’t placed in the AppStore or Google Play.
In summary, progressive web applications are a natural evolution of web applications that blur the line between the web and applications. They are able to perform tasks and serve functions that only native applications could previously do.
