How to Create a Progressive Web Application: Complete Guide

Today, businesses can take advantage of the most important benefits of mobile apps: push notifications, personalized advertising, and proximity to the user without much cost. PWA technology (Progressive Web App) makes it possible to turn a regular website into a mobile app, requiring only a browser, and this allows you to reach just the widest audience of customers. In this article, we'll find out what PWA is, what the main advantages and disadvantages of Progressive Web Apps are, and whether it's worth developing PWA apps for commercial organizations.

What is PWA?

Progressive Web App (PWA) began to become popular in 2015, at the behest of Google. It's a web application that functions on a device through a browser API. To the user, it looks as natural as possible. When opened in a desktop browser, the site looks normal, but in the mobile version, it becomes an app.

Unlike a normal website, progressive web applications rely not only on the browser, but also on the user's cache, so they aren’t afraid of high loads. No matter how many people decide to use your services at the same time, PWAs can handle it. In addition, some of the functionality of PWA can be available to the users even when they have no network connection, this is not the case with normal web applications.

A website or web application can be converted into a PWA. We will tell you how to do this below. For now, let's answer the question "Why?" What are the key benefits of PWA?

Benefits of PWA

PWA applications boast speed, do not require a stable connection to the network, are not tied to the operating system and the resources of the device. PWA apps work very simply and conveniently. When a customer visits a company website, the system offers to add it to the home screen.

It's enough to accept the offer and the website icon instantly appears on the home screen. Only two clicks are required to install the application. There is no need to go to Play Market or AppStore. PWA applications are installed to bypass antivirus programs that prohibit launching files from unknown sources.

Benefits for users

• User-friendly interface: pages switch instantly, navigation and control buttons are laid out according to native standards;
• PWA adapts to mobile, tablet, laptop, and PC screens;
• Works with slow internet and offline;
• Exchanges data via a secure protocol - HTTPS;
• Takes up little memory on your device - up to 1 MB on average;
• PWA icon can be added to the smartphone's home screen along with apps from AppStore and Google Play.

Business benefits

• It is possible to develop one solution for all platforms: Android, iOS, Windows, macOS, and Linux;
• Implementation of a marketing strategy through push notifications;
• PWA is indexed in search engines;
• Easy to distribute - just share the link;
• According to Google, 50% of users find it more convenient to buy on websites than to download the app.

All of the user benefits can be added here as well. The bottom line is that a company's profits are directly dependent on the user experience of its customers.

You can see from the successful examples of PWA applications implementation how important and useful they are for business:

• The Washington Post, thanks to PWA technology, was able to increase visits by 12% and the page takes less than 0.8 seconds to load.
• Popular retailer Walmart managed to increase the conversion rate by 31%.
• Book My Show, a famous Indian company with an audience of 50 million people increased its conversion rate by 80%.
• After the introduction of PWA in Google Maps, maps can be downloaded much faster and become available offline, which resulted in increased user loyalty.
• Global leader AliExpress, which already had a massive amount of customers, increased its conversion rate by 104% after the introduction of PWA.
• Tinder reduced page load time from 11.9 seconds to 4.69 seconds thanks to the technology. PWA Tinder is 90% "lighter" than their native app.

What tasks a PWA application helps to solve

• Cafes and restaurants can use PWA to create electronic menus, process orders, coordinate courier delivery, and more. It's also a great channel for promotional mailings.
• The hospitality industry can use PWA to inform users in time about available rooms and hot deals. The app can also be used for advance reservations.
• In medicine, PWAs can be an effective tool for 24/7 patient support. Such a tool will quickly provide information on the availability of medicines in pharmacies or the schedule of specialists' appointments. Push notifications can be used to remind patients to take their medications.
• Online stores can build a product catalog with PWAs that will be available to the user even without access to the network. Order acceptance and catalog updates will take place when connectivity is restored. In addition, through the app, the store can remind customers about itself regularly with notifications: informing them about promotions, discounts, and new arrivals.
• Online media can use PWA as a quick alternative to the website, as well as to promote user-interest stories and breaking news.
• The service industry can remind the user of the need for regular services (changing oil in the car, cleaning the office, going to the beauty salon, etc).
• Educational services can remind the users about the need for regular classes, notify them about new courses and profitable subscriptions.
  As a selling tool, PWA shows itself perfectly in areas where the user is too lazy to install a native application. The ability to order a service or make a purchase in one click is especially important here. The main thing is not to spam the client with intrusive push notifications. The mailing should be as useful and timely as possible. So how to create this technological marvel?

How to develop a PWA?

PWA development process goes through standard stages:

1. Research. Hypothesis test, market research, setting business goals.
2. Technical requirements. At this stage, you need to determine what type of application to build: a website, PWA, native mobile application or develop products for multiple platforms.
3. Design. Creation of the architecture and interface of the application to solve the tasks of the project.
4. Style development. Approval of high-precision layouts, creation of logos, buttons, banners, and other graphics.
5. Programming. Writing code for the frontend, workbench, and backend.
   • The frontend is written with HTML, CSS, and Javascript.
   • The service-worker is a javascript file. That's why it's developed with JavaScript frameworks.
   • The backend can be developed in any suitable language.
6. Testing. At this stage QA specialists solve two key tasks:
   • checking that users get a quality product;
   • find errors at the stage when the cost of fixing them is relatively small;
7. Launch. Migration to permanent hosting, domain connection, and final configuration.

To put it simply, PWA is based on 4 technologies: Service Worker, App Shell, HTTPS, and Web App manifest.

Service Worker

A typical web application has two layers: frontend and backend. The first layer is what the user sees in the browser; the second layer is responsible for the logic of data processing on the server.

In PWA, we have a third layer, the Service Worker. This is a javascript file that is processed by the browser, just like the frontend. But it can also perform tasks that traditionally required a connection to the server. Service Worker provides you with the ability to send push notifications, work with the cache, or perform complex data operations.

Service Worker stores requests and data in the device's cache. This provides 3 benefits:

To explain the last technology here is an example.

To send a message in a normal web application, you have to click the send button and wait for the server to perform the operation. If the connection is bad, you have to wait a long time. If you close the tab, the message is still not sent.

PWA website will continue to process your request even if the browser is closed. And as soon as the connection appears, the application automatically sends the message (money transfer, file). This is background synchronization. The service is supported by the main browsers: Chrome, Firefox, Edge, Safari, and Opera.

App Shell

App Shell is an architecture where the shell of PWA web app pages is loaded into the device cache on the first visit. During further usage, the framework of the pages is taken from the local cache, only the content itself is loaded from the server.

This architecture makes the PWA interface comparable in speed to native applications.

HTTPS

PWA only works over a secure protocol called HTTPS. Data is transmitted through HTTPS in encrypted form. Therefore, it is more difficult for hackers to access it.

To make a web application work over HTTPS, you must enable an SSL certificate in your web hosting settings.

Web App manifest

This is a file containing data about the application: window mode, name, icons.

Existing site must meet requirements in order to implement PWA:

• Access via HTTP protocol.
• Adaptability or responsiveness.
• Separate URL for each page (important point if your site is SPA).

PWA development is not much different from creating a regular website. Common programming languages and frameworks are Vue, React, Angular, etc. There's no need to create additional APIs as Progressive Web Apps use the same code. Although the technology is relatively new, there are already specialists who have mastered it and are ready to provide high-quality business products. Only one question remains. How much does it cost to develop PWA?

How much does it cost to develop PWA?

Progressive web app development cost is formed by the number of different types of screens and functionality. The development cost includes design, layout, and assembly on the application management system. The allowable development budgets are different for everyone, as well as the goals of their creation.

There is a basic functionality of the progressive application. It's suitable for small businesses. But, most likely, a small business does not require the transition to the progressive mobile app, because for them it is an expensive technology. In turn, large businesses need broad functionality that has not yet been developed for the PWA. Additional features are custom development. And custom progressive web app development requires a lot of time and money.

The basic price is formed from the cost of hiring either a React, Vue, or Angular engineer.
Since these technologies are fundamental to PWA app development and due to the high demand for these engineers in the market, the cost of developing a PWA application starts at $15k USD.

Example calculation assuming:

• You already have a working website and APIs
• You already have the design ready and it is the same for tablets and mobile devices.
  • One engineer will do all the development.
    

(This estimate is very approximate and it all depends on the complexity of your tasks, the intended functionality, and level of animation)

If your application is voluminous, it is more reasonable to involve an additional specialist only for the layout. His hourly rate will be cheaper and it will have a positive impact on the total cost of the project.

Risks associated with PWA

Along with a huge number of advantages, PWA applications have several disadvantages. The difference in capabilities and usability between PWAs and native applications is still there. This is especially true for iOS.

If a PWA leverages the hardware capabilities of the device, it consumes power faster than a normal website.
PWAs cannot be promoted through app stores.

Limitations on iOS

Apple is gradually introducing feature support in progressive web apps. But at the moment, PWAs on iPhone and iPad work with limitations.

In particular, PWAs on iOS do not support:

• Bluetooth, including iBeacon location technology;
• TouchID fingerprint scanner;
• FaceID facial recognition technology;
• ARKit augmented reality application framework;
• Altimeter;
• Battery information;
• iOS allocates a maximum of 50 MB for the PWA cache (in most cases, this is enough);
• After 7 days of non-use, the cache is erased and the app needs to be reloaded;
• Apple's browser, Safari, does not support getting data from motion sensors.
• PWA on iOS has problems with background sync and push notifications. The latter is solved by integrating SMS notifications.

Also on iOS, there is no support for live data stream processing from the camera. This creates some difficulties when scanning a QR code.

Nevertheless, all this may change in the near future. Taking into account that the Progressive Web App technology has become in high demand not so long ago, in the nearest future, the developers will probably manage to eliminate this drawback.

Conclusion

The potential for PWAs is enormous, with peak development still to come. Right now a "hybrid" of a website and a mobile OS application seems to be the most logical way of IT products development. The main thing in this business is to find high-quality experts who will develop a high-class PWA for you.

And UNITEDCODE delivery company will help you with this. With our unique delivery service, you will get access to several hundred professional frontend and backend engineers, designers, project managers, business analysts, and more. You will cooperate with the best specialists from Eastern Europe at a very lucrative price. When handled professionally, your PWA investment can successfully address a range of challenges: retention, brand awareness, and conversion rates.

Moreover, we will undertake all tedious personnel management issues and make sure all specialists feel comfortable on your project. Team building, contracting, personnel replacement, and other work items are on us, while you can focus on strategic planning. Contact us and we'll get started on the PWA together, but hurry up as we work with a limited number of clients at a time.