It is no secret to any Internet project owner – whether his goal is profit, education, etc., or a combination of several goals – that high performance and ease of use are vital to achieving what he wants and achieving the goal of building his project, because these two elements are what attract the visitor to use Website, online store or application.
That is why websites have continued to develop since their creation to improve the user experience by creating and providing new technologies that enable developers of websites and web applications to increase the performance of the site or application and facilitate its use, in addition to improving many other aspects of it. The Progressive Web Applications (PWAs) that we will talk about are Here are some of the important and modern technologies that have gradually developed over the past years.
The concept of progressive web applications
Progressive Web App is a term that describes web applications that provide both the features of applications that can be installed on different operating systems and applications that run through Internet browsers, such as Google Chrome, Mozilla Firefox, etc., that is, it is an application that runs through a web browser and can Install it on the operating system so that it works independently of the browser, apparently as if it were a regular application installed on the system.
Web applications are characterized by being easy for people to discover and experiment with, because they work through the browser without the need for installation, in addition to the possibility of publishing them through their own link, but they are not compatible or well integrated with the operating system, unlike the original applications that are installed on the system. It is better integrated with the system, and users can access it quickly after installation by simply clicking on its icon.
Progressive Web Apps provide the ability to create applications that have the benefits of native applications installed on operating systems without having to sacrifice any of the features of the web sites and applications that make the Internet a beautiful and beloved place for all smartphone, tablet and computer users.
Characteristics and features of progressive web applications
We say that a web application is a progressive web application when it fulfills a set of specific conditions or is characterized by a specific set of characteristics. A web application is not known to be a progressive application just by looking at it. That is, there is no single thing that determines whether this application is a progressive application or not. A percentage of how progressive a web application can be can be determined based on the conditions it meets.
Progressive Web App features and features include:
- It can be discovered by search engines, and this is a powerful feature that is not provided by native applications that work only after they are installed on the operating system.
- A Progressive Web application improves gradually after it is installed on a device, taking advantage of the options provided by the operating system and browser.
- It can be installed on the device, and after installing it, the user can open it from the home screen without having to go to its site through the browser.
- The Progressive Web App is linked to a URL that can be shared to help other people access the app through their browsers.
- The PWA fits the shape of the device it is used on and the size of its screen, that is, it is responsive and suitable for the device’s screen regardless of its type and screen shape.
- When installed on the operating system, it works like the original application without the need for an Internet connection, or with a weak connection.
- The on-device version is updated when new content is added to the web app if the user’s device is connected to the Internet.
- The Progressive Web application is secure, as communications between the application users and the server hosting the application are secured via HTTPS .
Benefits of Progressive Web Apps
The advantages of progressive web applications enable them to provide many benefits to users and web application owners alike. That is, you, as a web application manager, will benefit from making your application progressive in reaching the goal you want to reach. There will also be many benefits for users, such as facilitating use, access, and increasing Performance and more.
The main benefits that you and your app users will gain from making it a PWA include:
- Saving bandwidth and time after installing the application on the operating system, as when the application is installed on the user, he will not need to re-download it to use it next time, or he may need to re-download or update some few elements, and this saves bandwidth and contributes to making loading times very low. When you visit the application again.
- Facilitating the process of publishing the application on mobile devices running Android and other systems, as you will not have to go through a long journey to publish your application in application stores to allow users to install it, knowing that you can also publish your application in Google Play. You will also be able to easily update the application installed by users, as updates are installed automatically when the user runs the application with an Internet connection.
- Notifying application users and communicating with them through system notifications and push messages, which contributes to increasing the number of visits to the web application, and raising conversion rates and profits.
- Web apps that are only available for use via a web browser usually do not display content correctly with a weak or no Internet connection, while Progressive Web apps installed on a device sometimes work fine even if the connection is weak or non-existent. This allows users to use the application whenever they want, which contributes to increased engagement by users.
Progressive Web Apps (PWAs) also offer many other benefits that stem from the ability to use them across various devices in smartphones, tablets, and computers, such as a camera, geolocation device, and others.
Browser compatibility with Progressive Web Applications
Not all browsers on all operating systems provide the ability to take advantage of all the features of Progressive Web applications. Indeed, some browsers do not support many of the features of this type of application, and some support many of its features, while other browsers support all or the vast majority of the features.
It may be important to know which web browsers support PWA features, because this can influence your decision to make your app progressive or not, although this influence is often weak.
For example, if your web application is used primarily through Windows by most users, you need to consider what browsers for that operating system support more than browsers running on other systems.
The following table shows the extent to which popular web browsers support some of the most important requirements of Progressive Web applications on various well-known operating systems, knowing that browsers that do not support all of these requirements may partially support Progressive Web applications.
| the service | Service overview | Support in browsers |
|---|---|---|
| Service Worker | The service worker allows advanced functionality to be built into the Progressive Web application, such as, but not limited to, intercepting network requests sent by the application and performing the required actions based on the availability or absence of an Internet connection. | Google Chrome on operating systems: Android – Windows – Mac OS – Linux. Safari on operating systems: iOS – Mac OS. Firefox on operating systems: Android – Windows – Mac OS – Linux. Opera on operating systems: Android – Windows – Mac OS – Linux. Edge on operating systems: Android – Windows – Mac OS. |
| Push notifications | These are notifications that appear on the device screen, and can transmit updates in real time. | Google Chrome on operating systems: Android – Windows – Mac OS – Linux. Safari on operating systems: Mac OS. Firefox on operating systems: Android – Windows – iOS – Mac OS – Linux. Opera on operating systems: Android – Windows – Mac OS – Linux. Edge on operating systems: Android – Windows – Mac OS. |
| Geolocation | This service allows the user’s location to be determined through the application after his consent to do so. | It supports all browsers on various operating systems on which versions of browsers are available. |
| Place the application icon on the home screen | An icon for the Progressive Web app can be displayed on the device’s home screen, where the app will open when its icon is tapped. | Google Chrome on operating systems: Android – Windows – Mac OS – Linux. Safari on operating systems: iOS. Firefox on OS: Android. Opera on operating system: Android. Edge on operating systems: Android – Windows – Mac OS. |
| Video & Image capturing | This service allows the user to use the camera and microphone to record and take photos and video without having to leave the Progressive Web application or browser, but directly from within the application (without opening the Camera application). | All browsers support this service except Firefox on iOS, which only supports taking photos. |
| Start screen (Splashscreen) | It is the window or screen that appears until the application is opened or data is loaded. | Google Chrome on operating systems: Android – Windows. Safari: Not supported. Firefox on OS: Android. Opera on operating system: Android. Edge on operating systems: Android – Windows – Mac OS. |
How are Progressive Web Applications created?
The process of creating a Progressive Web App is not very difficult, as most websites can be converted into a Progressive Web App by following a few easy-to-implement steps, but it requires some effort and time to implement. We will not explain here all the steps of converting a website or web application into a progressive web application in detail, but we will highlight the basic steps in the conversion process.
To create a Progressive Web application from a pre-existing website, a JSON file called a Manifest is first created that contains information about the application that is used as metadata for the Progressive Web application at an operating system level after the application is installed on it. Information identified by this file includes the site name, a short name, theme and background color, the URL of the application, and a description of the application intended for users to read.
Then, after creating the Manifest file, it is linked to the HTML code of the website through the link tag that is placed within the element or the head tag. After that, an offline.html file is created in which the code you put inside is executed when the user requests data that the application cannot fetch in the absence of an Internet connection.
A Service Worker file is then created that performs several tasks, the most important of which are setting up caching of data including pages, and automatic synchronization of content in the background that allows the user to get the latest data that you publish to your web application when they open The application even if there is no internet connection while opening it.
After creating the service worker, code is added to the HTML file at the end of the body tag, the task of which is to load the worker. Then, after doing that, you will be left with the process of publishing the application, which depends on the method of its development and some other matters.
After you have completely finished adding the codes and creating the files required to build and publish the Progressive Web Application (PWA), you will be able to add it to the home screen of smartphones easily to run on it like any other application. This process is done in slightly different ways on different operating systems and browsers.
You can install the Progressive Web application in the Google Chrome browser on the Android system by visiting the application using the browser, then clicking on the hamburger menu button located in the upper right or left corner of the browser, then clicking on the (Install the application) option or the (Add to home screen) option. ), and agree to the installation process by clicking (Install). After that, you can find the application on the home screen of the device, and it will be treated as if it were a native application.
It is worth noting that there are additional components that can be installed on the WordPress content management system that help you create a progressive web application from your site once the plugin is installed and activated, such as the Super Progressive Web Apps add-on , which not only enables you to convert a site into a progressive web application, but also allows you to customize many From the application settings and options.
And here, dear reader, we finish explaining Progressive Web Applications and introducing you to their most important features and benefits to website owners and users, in addition to giving you a glimpse into the way Progressive Web Applications are created based on a pre-existing website. We point out in conclusion that although many of them are not supported Browsers meet the requirements of PWA and are not currently widely used, but the future of this technology seems to be bright.
