A progressive web application (PWA) is a web page that looks and behaves like a mobile application on a touch device.

You get “two in one” and several additional benefits. Is this a suitable solution for your project?

PWA is a set of modern technologies you should consider using if you have many visitors from mobile devices. It is still a relatively new approach to building mobile applications and websites. PWA is a combination of the best mobile applications and web technologies. The user experience is equivalent to native applications or, in some cases, surpasses them.

Companies like Forbes, Twitter, Alibaba, Lancome, Uber, and Starbucks use it successfully worldwide.

What are the advantages and disadvantages of using PWA technology?

Advantages of PWA

Offline mode

• PWA can function even without an internet connection, unlike a traditional website (which won’t load if the connection is lost).
• Better user experience with almost all the advantages of an application. PWA offers a superior experience on mobile devices compared to a website, nearly indistinguishable from a mobile app. For example, it provides navigation elements typical for mobile apps and more.
• Unlike a mobile app, however, sharing links to subpages/articles on social media is possible.
• Additionally, unlike a mobile app, PWA appears in Google search results.

One-click installation option

• As the website behaves like a mobile application, it’s possible to install it on the home screen, where it appears as an app icon (thus, the website is accessible from the mobile device with just one click, without the need to type the domain into the browser).

Faster loading times

• Thanks to the technologies, these websites load much faster, which is crucial since about 50% of visits come from mobile devices (speed connection issues are common on mobiles – not everyone has the latest phone and 4G coverage).

Push notifications and hardware access.

• This allows us to notify users about events and discounts (it appears to them as a native notification on their mobile device). This type of notification often has higher conversion rates than, for example, newsletters. You get even closer to people.
• Furthermore, features such as geolocation and access hardware (e.g., access to a microphone, camera, gyroscope, etc., offer many potential uses in the future) are possible.
• Example of usage: During registration, uploading a photo of an ID card for approval is necessary. If the form is being filled out on a touch device, we can offer the option for the user to take a picture directly through the phone’s camera and upload it without leaving the website or adding files from their folders. This overall improves the user experience.

Developing and managing separate mobile applications and connecting them to an existing database is unnecessary.

• Most large loyalty programs (such as Orange) also offer a mobile application. This saves thousands of euros on developing a separate mobile application, where, among other things, it would be necessary to address graphic design, programming, integration with the website database, etc.
• In the event of a change (such as a change in registration logic), one functionality does not need to be programmed multiple times, once for the website and then for the app.
• PWA works with any input and is equally usable with a mouse, keyboard, stylus, or touch input.

Downloading through the app store (e.g., Google Play) is unnecessary.

One of the most significant disadvantages of traditional mobile applications is their low conversion rate. In translation:

1. We must inform the user that the app exists (through paid advertising, promotion on social networks, websites, email campaigns, etc.).
2. The user must go to the app store on their phone.
3. They have to search for the application.
4. Install it.
5. Then, they have to open it on their phone, make initial settings, log in, etc.

• This is a relatively lengthy process that many people do not complete.
• Companies often spend thousands of euros on developing a mobile application (separately for Android and separately for iOS) and then even more money on advertising campaigns to achieve the desired number of downloads.
• With PWA, this is eliminated because all it takes is a visit to the website, during which the user is prompted via a notification to install the application on their “home screen.” One-click and done.
• The conversion rate of using this application is 100-200% higher than regular mobile applications.

Switching to PWA technology offers a unique opportunity to redesign your mobile application, online portal, etc. The decision to use PWA is mainly to bypass the limitations imposed by Apple and Google on content in their stores and ensure a better user experience.

Disadvantages of PWA

• A few years ago, the disadvantage was that most of the described functionality was unavailable to iOS device users. However, Apple has since fully added support.
• PWAs are not an advantage if you want to be part of the Google Play Store or App Store because of promotional opportunities and associated publicity.

What are the most commonly used technologies for PWA?

There are several technologies for creating a progressive web application, primarily based on JavaScript, with various characteristics.

For more detailed information, you can find it in the article by Google at https://web.dev/progressive-web-apps/.

How do you choose between PWA or a native solution?

It is better to choose PWA development when:

• the application needs to be easily distributed to an even broader user base,
• the available budget is not high,
• there is little time to go live,
• proper indexing in search engines is essential,
• cross-platform compatibility is required,
• more frequent updates are needed in a short period.

On the other hand, it is better to develop a native application when:

• visibility in Google Play and the App Store is necessary,
• speed and responsiveness are critical success factors for the application,
• the application requires important use of device hardware features,
• the business model is based, for example, on the price for downloading (in the case of app purchase) and in-app purchases (IAP),
• the application needs to be integrated with other third-party applications.

Differences in the installation process – PWA versus native application

The general process of installing native applications follows these steps:

• Access the respective app store (App Store or Google Play).
• Search for the application.
• Click on “Install.”
• Accept various permissions.
• Open and launch the application.

In comparison, installing a PWA involves:

• Visiting the website.
• Adding to the device’s home screen (optional).
• Opening the application.
• Using the application.

Successful uses of Progressive Web Apps

There are already many examples of “sophisticated” PWAs that users use on their devices.

Starbucks

To provide accessible and user-friendly online ordering to all its customers, Starbucks has built an online ordering system based on PWA, offering a similar experience to its native application.

In other words, thanks to its ability to work offline, Starbucks allows its customers to browse the menu, customise orders, and add items to their shopping lists, all without consistent internet access. They can view location-based prices and place orders for food and drinks online.

Uber

As the company expanded into new markets, its Uber website was rebuilt from scratch to a PWA to offer a booking experience comparable to its native mobile application. The Uber PWA is designed to make vehicle bookings feasible on low-speed 2G networks.

The PWA model, built on the concept of an app-like experience accessible in all modern browsers, is great for people browsing on lower-end devices that may not be compatible with the native Uber application.

How did the PWA perform? The very lightweight Uber web application’s native experience enabled quick ride requests regardless of location, network speed, and device. The app’s core, with a size of just 50 kB, allows it to load within 3 seconds on 2G networks.

Pinterest

With a focus on international growth, Pinterest rebuilt its website as a PWA, focusing on mobile views from the ground up. The social network found that before this step, only 1% of its mobile users converted to registrations, logins, or app installations due to poor performance on mobile devices.

Pinterest PWA statistics

Realising the opportunity for conversion improvement was immense, they revamped the mobile web using PWA technology, leading to several positive outcomes:

• Browsing time compared to the previous mobile web increased by 40%,
• Ad-generated revenues increased by 44%,
• And user engagement grew by 60%.

Spotify

Your favourite music player is now built on PWA technology. Due to inevitable disagreements between Spotify and Apple regarding commissions, the company Spotify found the current opportunity to develop a version of its application as a PWA – just like many other major brands.

The Spotify PWA version is significantly faster than the native Spotify application and has a unique and adaptive user interface. Unlike many other PWAs, users are prompted to add the Spotify PWA product to their home screen, making it more accessible and comparable to its different versions.

Forbes

Customer engagement is essential for Forbes, a global media company focusing on business, technology, entrepreneurship, leadership, and lifestyle.

With the increasing number of mobile phone users, Forbes saw tremendous potential in introducing its own PWA in 2017. Thanks to speedy page loading times, push notifications, instant transitions, and lightweight design, Forbes increased user engagement and boosted conversions.

• the increase in page views per browsing session tripled
• the number of sessions per user increased by 43%
• a sixfold rise in readers completing articles to the end
• doubled interaction rate.

Alibaba

Alibaba.com, the world’s largest business-to-business (B2B) platform serving over 200 countries and regions, faced challenges in building a compelling experience for mobile web users. This form of web was their primary platform for browsing offerings on mobile. Alibaba.com saw the mobile web as a platform to move users who don’t use the app into the app.

However, many preferred to stay in the browser. They realised that building an effective mobile web presence would be crucial. They wanted to provide an excellent user experience to first-time visitors to the internet (hoping to re-engage them) and repeat visitors (who are more loyal to the site).

As a result, Alibaba.com built a PWA, leading to fast, efficient, and reliable mobile web usage.

• After innovating their sites into Progressive Web Applications (PWAs), they saw a 76% increase in overall browser conversions.
• 14% more monthly active iOS users and 30% on Android devices.
• 4x higher interaction rate when adding PWA to the home screen.

Thanks to PWAs, companies like Alibaba and Flipkart have significantly increased retention and conversion rates. This will likely benefit people in developing countries using 2G and 3G networks on devices with limited storage, providing them faster and more reliable web access.

Is the future “progressive”?

As always, the answer depends on your needs. The decision to create PWAs stems from analysis and considerations that must be made from time to time, from project to project, and from user to user.

However, simplifying development is a requirement for many projects, and therefore, we see great potential in utilising this technology. The support of major players clearly shows that it’s not just a passing trend but the future for creating many online experiences on mobile devices.

Tomáš Vatrt

Business Development Manager