What are PWAs: Examples of Successful Implementations

Mobile apps are a popular way to conduct essential marketing communications with customers, but their development can be costly and time-consuming. Hence, an alternative emerged in the form of Progressive Web Apps (PWAs), a technology that Microsoft began developing in 2000. A Progressive Web App displays a company's website data within the familiar interface of a mobile application, blurring the lines for users.

Interest in this technology rekindled in 2015, when Google started supporting the necessary components for PWA creation. Some believe that in the future, web applications will replace traditional ones. Today, a hybrid format of a website and a conventional app is already being used to accelerate development and reduce costs.

Discover more about PWAs, their pros and cons, as well as insights into their creation.

What are Progressive Web Apps

A Progressive Web App (PWA) is a website adaptation for mobile devices that functions like an application. Visually, it appears as the same icon and familiar interface, but operates on a different principle.

PWA applications replicate the functionality of a mobile app. Web pages are hosted on a domain and accessed through browsers on devices. Progressive web applications can be thought of as advanced versions of websites that adapt to the user's device, eliminating the need for separate development for Android and iOS.

Web applications can operate autonomously as needed and can send push notifications to customers, crucial for maintaining consistent brand-to-audience communication. They are usually installed via the company's website, but directories of Progressive Web Apps have emerged, such as appsco.pe, findpwa.com, and others.

Web applications expedite user interactions, confer competitive advantages to brands, and promote their products and services through PWA Push notifications. Consequently, various businesses, especially those with customers engaging in regular purchases and service orders, are adopting this technology. These include stores, beauty salons, cleaning services, car dealerships, restaurants, food delivery, media outlets, and more.

PWAs: pros & cons

Advantages

• A user's experience with a Progressive Web App is nearly indistinguishable from a mobile app, while the development cost is significantly lower.

• Creating a PWA version of a site is significantly faster. There are even builders available for this purpose. For instance, Microsoft claims that a Progressive Web App version can be assembled using the PWABuilder tool during a lunch break.

• Installation is done directly from the website, bypassing the need for a specific app store. This eliminates the need to conform to store requirements, wait for approval, and fear the risk of removal.

• Enhanced user loyalty and engagement with brand content, leading to increased sales and average order value. Reminders of brand promotions and news are delivered through PWA notifications, familiar Push alerts that inform users of brand offers without launching advertisements.

• Indexing by search engines is possible, as PWAs are essentially advanced versions of websites that adhere to SEO optimization rules, generating additional traffic.

• Automatic updates and a smaller size (no more than 3 megabytes) compared to native mobile apps, reducing device memory consumption.

• Fast performance in comparison to websites and the ability to operate in offline mode (with limitations).

Disadvantages

• Progressive Web Apps (PWAs) have limitations on accessing device hardware and technologies. For instance, on iOS, you can't use Face ID and Bluetooth. Apple's adaptation to web apps is slow, resulting in push notification issues on their devices.

• Dependency on browsers can lead to restrictions due to outdated operating system versions where updates cannot be installed. Additionally, browsers may not always provide complete functionality for web apps.

• PWAs consume more battery due to coding in JavaScript, a programming language that requires more system resources compared to native languages like Java and Swift.

• Lower virality is a challenge as users are accustomed to downloading apps from the App Store (iOS) and Google Play (Android), rather than seeking them on brand websites. Creating only a PWA version might require investing in marketing campaigns for promotion or undergoing the moderation process of app directories, which is not always straightforward and fast.

Successful Case Studies of Companies Utilizing PWAs

Notable brands have demonstrated successful PWA examples, including Telegram, YouTube, TikTok, Aviasales, Tinder, Pinterest, Forbes, AliExpress, Uber, and more. Some of them have significantly improved user experience and increased revenue.

Tinder launched a web version of its app that occupies only 2.8 megabytes of memory compared to the Android app's 30 megabytes. The loading speed was reduced from 11.91 to 4.69 seconds, enhancing the user experience.

Pinterest also managed to cut down interface loading time from 23 to 5.6 seconds. User engagement increased by 40%, while advertising revenue saw a 44% boost. Content engagement notably increased by 60%.

Enhancing the user experience with PWA has been successful for Forbes, whose app was often criticized for being cumbersome. Users now spend 40% more time reading articles and consume 15% more content from the publication. Page loading times have also improved significantly. Previously, the average wait was 6.5 seconds, but in the new version, it's only 2.5 seconds.

The implementation of a Progressive Web App increased AliExpress' conversion rate by 104%. Users now visit twice as many pages per session and spend 74% more time on the platform.

Uber utilizes PWA technology to reduce app loading speeds across all devices, even on 2G connections. This is crucial for entering new markets. Consequently, the service opens in just 3 seconds, occupying a mere 50 kilobytes.

What's required to create a PWA application

Progressive Web Apps are available on all operating systems, but initially, a website is required, which is transformed into a progressive version using JavaScript, HTML, and CSS technologies. The web application is displayed through a WebView—a system component that opens internet pages within an app. For PWAs to work, browsers like Safari (iOS) and Chrome (Android) are necessary.

To create a web application, you'll need a Web App Manifest and a Service Worker.

The Service Worker is a script that receives information (requests) from the browser through a secure HTTPS connection. This component operates in the background, even if the page isn't active. Service Workers enable the delivery of Push notifications to users, and the application synchronizes with the website without user involvement. Updates happen automatically, and offline mode is available.

The Web App Manifest is a file named manifest.json that's added to the website's code. It provides information to the browser about how the app should be displayed on the device. It defines the app's name, icon, splash screen, theme, and other elements. The manifest specifies which data remains unchanged and which parts get updated.

Other important elements for web application development:

• A digital SSL certificate verifies the authenticity of the website. It's necessary for establishing an encrypted HTTPS connection that ensures security.

• The Application Shell is the app's framework or template where data from web pages is loaded.

Summary

A Progressive Web App (PWA) closely mimics the interface and functionalities of a mobile app, but operates using a different technology. A PWA is launched on the screen via a shortcut using a browser. While the user only sees the app, which updates, stores data, and sends push notifications, the underlying technology works differently. Developing a PWA is simpler and quicker, but there are limitations on certain functions.

A web application is created using components like the Service Worker and Web App Manifest. Additionally, an SSL certificate is required to establish a secure connection, and an Application Shell is used.

PWA applications are rapidly evolving and have the potential to replace traditional apps in the future.