A Starting Guide to Progressive Web Apps (PWA)

Progressive web apps (PWA) are gaining popularity, mainly due to mobile users’ growing needs and changing behavior. What are PWAs, and are they worth the hype?

Progressive web apps are web applications that provide a similar experience to mobile ones. PWAs are just websites that have been converted, but elements such as the search bar are hidden, making PWAs appear like mobile applications to the user. PWAs allow users to add a shortcut to their home screen, so they can browse and use most of the website’s functions without internet access. This solution makes it easy for developers to reach a wide audience.

When to choose progressive web apps

One of the main reasons for creating progressive web apps is the relatively quick and cheap implementation. If you want to focus more on time and cost optimization than native elements, a PWA is a right solution for your next project.

The most common advantages of progressive web apps include:

• Responsiveness (PWAs adapt to the user’s device and screen size)
• Functioning offline or with an unstable internet connection (but support for offline execution is limited)
• Smooth installation directly from a website without the need to download or update it through app stores such as the Apple App Store or Google Play Store
• Home screen shortcut (no need to enter the URL in the browser window to access the PWA)
• Similar to native applications on mobile devices

PWAs are a good solution for e-commerce because they can enable users to browse the store’s offerings offline and perform simple data operations, such as adding items to the cart. However, the users will need internet access to complete the order and pay for it.

Keep in mind that PWAs are not a universal solution that works well in all conditions, especially if you want to use native smartphone elements such as Bluetooth or FaceID. Progressive web apps are also not suitable for games that require efficient graphics and animations where you need to use the mobile device’s full computing power.

Although creating native mobile applications is more time-consuming than creating a progressive web application (and, therefore, more expensive), you can use the device’s features more effectively, which results in a better UX. Plus, PWAs are not visible in app stores, which means you lose the chance to promote your PWA to users searching for the application by specific keywords.

Good examples of progressive web apps

Developers use PWA technology to create applications that people often use in their free time. They include social networking sites, e-commerce, and entertainment apps. Below are some examples of successful PWAs.

1. Spotify

One of the most popular streaming music services is an example of how PWAs can create a similar experience for computer and smartphone users. The differences are barely noticeable because the computer application launches similarly to the mobile PWA.

2. Uber

Along with rapidly expanding into new markets, the company decided to develop a new PWA, and such a decision was based on the numbers. Since the launch of m.uber.com, 30% of users have requested rides using a computer, not mobile devices, so it was important for the company to create a way to instantly request a ride without installing a native application. The lighter PWA (50 kb) gives users a similar experience as a native app, making car booking viable on low-speed, 2G networks.

3. Pinterest

Pinterest’s changes were driven by the app’s poor performance on mobile devices—the company found that only 1% of mobile users registered, logged in, or installed the app. Rebuilding the mobile experience using PWA technology has brought positive results, such as increases in time spent on the application by 40%, user-generated ad revenue by 44%, and basic engagement by 60%.

4. Starbucks

The main purpose of Starbucks’ PWA was to provide all customers with a user-friendly online ordering system. The ability for users to browse the menu and add items to the cart even when offline helps the company reach more customers, especially in emerging markets. The PWA works similarly to the native app but is 99.84% lighter than the Starbucks iOS application, thanks to which it has doubled the number of online orders.

5. 2048 Game

This puzzle game loved by users worldwide was originally released as a free app for Android and iOS in 2014. After its rapid success (four million users in less than a week), the developers created an official PWA version available at 2048game.com. It provides an almost identical experience as the native app, and it allows users to play offline.

How to build a PWA

The process of creating progressive web apps is less complicated than building mobile applications. Simply put, a PWA can be a converted website enriched with native functions. The team creating such an application does not differ much from that of typical frontend projects.

PWAs are built using standard web technologies such as JavaScript, CSS, and HTML. The most common tools for creating progressive web apps are Angular, React.js, Vue.js, Polymer, Webpack, Knockout, and PWA Builder. The choice of tools depends on the client’s needs and expectations, but the main thing to keep in mind is making the website user-friendly.

The major distinction between PWAs and typical websites is their compatibility with most browsers, systems, and devices and the ability to work offline and send push notifications. All of these features make them similar to native applications, but they usually use less device storage than mobile applications.

PWAs or mobile apps?

Progressive web apps allow users to conveniently access a website from mobile devices. The biggest advantage is that you can implement them relatively fast and cheaply. Based on the experience of companies that have decided to create PWAs, you can expect an increase in your conversion rate and higher user engagement. If you do not need a mobile app with extensive functionalities, a PWA is a right solution for you.