What Are Progressive Web Apps: A Detailed Answer

Have you ever wondered how great it would be to combine all the advantages of a website and a mobile app in one product? It is actually possible because there has long been a technology on the market called PWA – Progressive Web Apps. They are based on web technologies (HTML, CSS, JS) but use the logic of native apps that we are used to installing on smartphones. Let’s put together a small guide on PWA apps. We will define them, and look at their technical features and advantages.

What is a PWA?

The abbreviation PWA stands for Progressive Web App. This is a type of web application that is created based on existing websites and combines the properties of mobile apps and browser capabilities of websites.

While regular websites are mostly informational, web applications contain many features that make life easier for users. For example, they allow you to freely exchange messages, pay for goods, and work with files online. A web application is convenient because it does not need to be installed, and its functions work from the cloud.

A standard web application can only be opened from a regular or mobile browser. If you are working on a smartphone and want to add a shortcut to the main screen to access the site without a browser, you will not be able to do this if the web application is not a PWA.

With the PWA approach, you can avoid the need for separate development of a site and a smartphone app. The technology transforms the site into an application, erasing key differences. Thanks to it, the user can add a shortcut to the main screen, enable push notifications, and work offline. In other words, PWA allows the user to use the site as an app without downloading it to the device.

Main Elements of PWA

What are progressive web apps from a developer’s perspective? Developers primarily consider the main requirements for such products:

• The website must work offline;
• The site must allow the installation of a shortcut on the main screen.

To meet these requirements, the structure of all web applications must include a Service Worker and a manifest. Other technologies may also be needed, such as Web Storage, where data is stored: only during the session (sessionStorage) or between sessions (localStorage).

Service Worker

The Service Worker is a mediator through which client requests pass to the server. In other words, it is a script, scenario, or small program that performs a specific task. The browser launches it in the background, regardless of whether the web page is open.

What can the Service Worker do for a PWA application:

• Process requests;
• Send push notifications;
• Ensure background synchronization;
• Handle offline work – check server availability, cache its data, and transfer them to the document;
• Receive centralized updates, even if the user is not working with the web application.

Web App Manifest

The manifest provides information about the web application in a JSON text file (manifest.json). It is needed for the app to load, leave a shortcut on the main screen, and look like a regular app to the user. It also determines which files need to be stored and which to replace with new ones in the browser storage.

The manifest should contain the following data:

• The name of the web application;
• Links to web application shortcuts and logo image;
• A description of the app up to 200 characters long;
• The URL to launch the site;
• Configuration data of the web application, etc.

Technical Features of Progressive Web Apps

The PWA concept involves creating a cross-platform application with minimal costs. After all, PWA is based on web technologies that work on any operating system.

The PWA technology requires data exchange to use the HTTPS protocol. Therefore, it is necessary to install an SSL certificate that creates a secure encrypted connection between the internal and external server. It is very important that the site does not provide links to unsecured resources, especially if it is an online store where customer data security must be ensured.

Criteria for Installing PWA

To install a PWA application on a smartphone, the developer must meet the following basic criteria:

• Use only secure sources (HTTPS);
• Register a Service Worker that collects caches, allowing work offline without a network;
• Write a manifest correctly, which contains all necessary information about the application. In particular, permission to install a shortcut, the appearance of the web application on the smartphone.

The PWA application must also include an icon whose image will be installed on the desktop.

How PWA Opens

All PWA apps work on the WebView basis – a built-in browser responsible for opening web pages inside mobile apps. Thus, Android uses Google Chrome to open PWA, and iOS uses Safari.

Which Browsers and OS Support PWA

Progressive Web Applications work with all operating systems, but only Android users can take full advantage of all its features. All other platforms work with limitations and do not support certain functions.

The following OS can provide offline work with PWA:

• Android,
• Chrome OS,
• iOS,
• Linux,
• macOS,
• Windows.

Browsers that work with Service Worker include Google Chrome, Apple Safari, Microsoft Edge, Firefox for Android, etc.

Key Benefits of Progressive Web Apps

Now that we know what PWA applications are, let’s talk about their key advantages compared to websites and native solutions. Let’s analyze them in detail.

Partial Access to Hardware

The level of access to hardware depends on the browser’s parameters. However, there are restrictions that all web application users face:

• Inability to modify the device at the system level (e.g., no access to system settings, logs);
• Inability to make calls, send SMS/MMS;
• Inability to fully use Bluetooth, NFC, access contacts;
• No permission to change screen brightness depending on ambient lighting.

Installation Without App Stores

To install a PWA, you do not need to visit Play Market or App Store, which saves money for its owners. The web application is easily found by search engines. This method also allows you to install the application despite the prohibition of doing so from unknown sources, present in every phone.

Automatic PWA Updates

The web application updates automatically for all users as soon as a new version appears. If desired, the developer can warn users about changes in the web application’s caching system.

Smaller Size than Mobile Apps

PWA solves the problem of limited space in smartphone memory, as the size of the web application does not exceed 1-3 MB. This is much less than usually required by a native application. The vast majority of PWA data is stored in the cloud, as it is limited by the size of the internal storage provided by the browser for PWA (6% free space for Chrome, 10% for Firefox, 50 MB for Safari).

Cost Savings on Development

It is more profitable for companies to create a web application than to spend money separately on a website and a mobile application. It should be noted that each native application is designed for a specific operating system. Therefore, it may be necessary to either hire several development teams or create a single cross-platform application that works with different OS.

What Problems Does PWA Solve?

The most obvious: a web application allows you to attract a client’s attention to your product and actively promote the brand. The icon installed on the main screen will always remain in sight. And when your service is needed, the user is more likely to contact you than a competitor.

Progressive web application also solves other tasks:

• Simplify the search for your company for the client;
• Promote the business (e.g., encourage the user to use your services again);
• Improve sales through push notifications about a specific product or promotions. At the same time, it saves on advertising;
• Quickly interact with the client – send messages about the shipment/delivery of goods, respond to various questions, requests, complaints;
• Bypass competitor sites that are in better search engine positions.

Where Can PWA Be Used?

The use of PWA is suitable for any business, particularly:

• Online stores (eCommerce);
• Cleaning services;
• Restaurants, bars, cafes;
• Delivery services;
• Educational institutions, as well as companies offering online courses;
• Electronic media;
• Hairdressers, cosmetic clinics;
• Car services, etc.

Successful Examples of PWA in eCommerce

A striking example of successful use of the technology is shown by AliExpress. The company uses the web application as a supplement to the site and mobile app. It is perfect for people who do not want to download the app but love shopping at this store. AliExpress PWA increased the time users spend in the app across all browsers by 74%.

Another example is the world-famous clothing brand George. They own over 500 stores in various European cities, serving over 2 million customers weekly. The PWA web application interested management when there was a need to update the mobile app.

The result can be considered impressive:

• Pages began to load 4 times faster;
• The number of refusals decreased by half;
• Mobile conversions increased by 31%;
• Customers started to stay on the site much longer.

How to Install PWA on a Smartphone

There are different ways to install PWA applications on a smartphone. Ideally, the web application should automatically offer to install itself on the main screen as soon as the user opens the site. However, APIs for automatically requesting permission for such installation are not yet fully standardized. Therefore, the user will most likely need to install the icon manually:

• Android. Most often, you need to enter the web application’s address in the Chrome search bar and select the banner requesting installation. If you have not visited the site, the message may be at the bottom of the screen. If not, go to the settings. To do this, press the three dots in the upper right corner and select “Add to Home screen.”
• iOS. The installation is done through Safari. To install the PWA, you need to click the “Share” option on the program page, then select “Add to Home screen.” If you need access to motion sensors, you must go to Safari settings and enable “Motion and Orientation Access” before installation.

The installation may vary slightly in different OS and browser versions.

Although the web is more often used for smartphones, it can also be downloaded to a computer using Google Chrome. After entering the PWA URL in the search bar, an “Install app” icon will appear on the right. Click on it, and after a few seconds, you will see the web application on your desktop.

How WEZOM Can Help in PWA Development

How can a business get its own PWA application? The best solution is to contact specialists with the necessary technologies and significant experience in developing such products. The WEZOM team fully meets these criteria. We have been developing digital products for business for over 20 years and have created several PWA and SPA web applications for various tasks. In one of our cases, we created a PWA mobile product catalog for APTIV, a world-renowned manufacturer of automotive components. The web application is used by APTIV’s marketing team, is useful for processing requests and presenting products, opens on any device, and can even work offline.

If you are interested in similar opportunities, do not hesitate to contact our managers for a consultation. We will help you implement a progressive web application for any business needs.

Conclusion

We found out what PWA applications are – a type of web application that can work like native ones. PWAs can effectively solve business tasks in various fields. They are easy to install, convenient, allow you to use almost all the hardware functions of smartphones, take up very little space on the device, use mobile traffic efficiently, and can work offline.

Today, the importance of progressive web applications for business is hard to overestimate. It is an excellent alternative to complex websites and full-fledged mobile applications.

Frequently Asked Questions

What is PWA in simple terms?

A progressive web application is a technology that partially transforms a site into an app that looks no different from a mobile app. This app gets its own icon on the user’s screen but does not require installation through app stores.

How is PWA different from a mobile app?

A mobile app is a full-fledged program installed on a smartphone. A progressive web application is a type of site displayed as a mobile app but working through a browser.

How are PWAs written?

Today, progressive web applications are created using standard web technologies. In particular, they use JavaScript, HTML, CSS.

How to install PWA?

To install PWA on Android, you need to enter its address in the Google search bar, go to settings, and select “Add to Home screen.” For iOS, you need to use the Safari browser, find the menu items “Share – Add to Home screen.”