Progressive Web Applications vs React Native – A Guide To Picking The Right Technology

Everyone business that sells products online knows that mobile is king. Most consumers interact with brands and shop online from their smartphones and have for several years now. The move to mobile catalysed a trend of eCommerce businesses adopting a mobile-first design when building enterprise applications.

There are three approaches to developing an awesome shopping experience from a phone; building a Progressive Web Application (PWA), a mobile application, or simply trying to make your store responsive. Each have their own pros and cons, but mobile apps and PWAs have become the choice for companies that want to invest in the future of their stores.

PWAs are a blend of a responsive website and a mobile app. They're designed to offer a native app-like user experience with the comprehensive capabilities of a website.

On the other hand, mobile applications are referred to as native applications that are installed on a user's device. There's a ton of different technologies that can be used to create a mobile app, but for the sake of this article we're going to focus on React Native which is a JavaScript framework specifically designed to build mobile apps.

PWA vs React Native - here's what we're covering

We often get approached by clients looking to build mobile apps when they would get better results from a PWA. When we suggest this approach, they often come back saying they've never heard of a PWA.

In this article, we'll aim to give you a breakdown of the differences between the two technologies, cover the pros and cons of each, and suggest some situations where you should choose one over the other.

The first place to start in this breakdown is diving into "conventional native apps".

What are native apps?

Native apps are software designed to run on a specific operating system -- either Android or iOS. They can only be downloaded from the Apple App Store or Google Play store.

These apps have the ability to utilise a device's features and hardware, such as a camera, Bluetooth, GPS and push notifications, to feel like they're really part of the phone. They're also highly performant, reliable (if built well!), and efficient on resource usage since they are built using a device's/OS native language.

Android apps are built using Java or Kotlin, while iOS apps are built using Swift language or Objective-C.

Being platform-specific means it's expensive for businesses to develop a native app as it would require them to spend resources on building an app for each OS. Also, launching a native app requires validation from platform-specific app stores and massive marketing to attract users. **Each month there are roughly 30,000 - 40,000 new apps released.

Building two codebases doesn't exactly double the cost of development, but it's often not too far away. There are some efficiencies gained by not having to go through the requirement gathering stage or designing the application, but there's a significant amount of effort duplication, which is something most businesses are keen to avoid (since it costs $$$).

What are Progressive Web Applications?

PWAs are websites specifically optimised to offer a mobile app experience. They are built using core website technologies - HTML, CSS, JavaScript - and can run on any browser in every platform, including Android and iOS.

Similar to native apps, PWAs can be saved on a smartphone's home screen, work offline, send push notifications, and use some of a device's features and hardware (not to the same extent native apps can).

Google developed the PWA concept in 2015 to offer a fast, engaging and versatile app that works on mobile, tablet, and desktop environments. This way, users don't necessarily need to search and download a PWA from a specific app store. They can install it on the home screen directly from any browser when they visit your site using a smartphone. Once installed, the app will perform on full-screen like a native app.

One of PWAs' biggest advantages is that businesses can achieve all three apps, a website, an Android and an iOS app, using a single codebase. This helps save on time and development costs. Some of the most popular PWAs include Twitter, Spotify, and Medium.

Google has even started prioritising websites that adhere to PWA standards in their Lighthouse measurements:

Features of PWAs

Some of the unique attributes that empower PWAs to offer a similar UX as native apps include:

Service workers

For a web app to pass as a PWA, it needs a service worker. A service worked is a JavaScript file that acts as a proxy between a web browser and servers. They enable offline access to a website and, as a result, improve an app's reliability and performance. Service workers are supported by virtually every browser.

When a user initiates a request on a PWA, service workers handle the request and decide to retrieve a response from the cached data or the server based on whether the user is on or offline.

Web app manifest

A web app manifest is a JSON (JavaScript Object Notation) file that contains a PWA's metadata. This includes default settings and parameters such as the app name, icon, theme color, screen orientation, and the URL to be opened when the app is launched, among other preferences. The file is usually deployed in the HTML page using the link tag as such: .

Application shell architecture

Application shell architecture is a set of principles that ensures minimal user interface loading. The UI data is then cached before the PWA loads its content. This way, the next time a user visits the app, the cached data is displayed immediately, and any other new request is fetched from the server if the user is online. This model helps improve PWA loading time in addition to supporting offline availability.

Pros and cons of PWAs

Advantages of PWAs, especially for businesses, include:

Cost-effective & quicker to develop

PWAs offer a quick pathway to connect with users through mobile devices. They're able to be built within a relatively short timeframe since they use standard web technologies -- HTML, CSS, and JavaScript.

If you already have a website for your business, it can also serve as a mobile app once you integrate the PWA features (depending on the technology you've used). This is especially true for cutting edge technologies like Gatsby and Next.js.

Streamlines customer acquisition process

With a native app, you must submit your app to an app store and spend resources on marketing your app to attract users. However, with a PWA, you necessarily don't need to spend resources on marketing your app. This is because PWAs are websites, meaning search engines index them. Given that search engines use a mobile-first indexing approach, your PWA will be given a high ranking.

Additionally, A PWA enables you to build a website that prompts your consumers to install your business app directly from the browser. They don't have to visit the app store and manually search for your app, as it's the case with native apps. This makes your app more accessible and discoverable, giving it the best chance to reach your target audience.

Facilitates secure online payment

PWAs utilise web security standards, particularly HTTPS, which allows for secure data transfer. Further, given that a PWA can cache data, users' payment info can be stored on their local storage and accessed during payment checkout. This helps streamline the payment processes for customers.

Increases customer retention

Typical websites usually have a high bounce rate as they take longer to load on smartphones. Also, most of them can't be accessed offline or in cases of poor network connection.

PWAs, on the other hand, support offline access, making them appear to load faster. When a user launches the app/website, the cached data is displayed instantly instead of a blank page or loading screen, as it's the case with websites. This feature provides a better user experience and reduces your site's bounce rate regardless of the network connection status.

Low maintenance

PWAs have lower maintenance than native apps since they utilise a single codebase on all platforms. Also, they update automatically, unlike native apps whose feature updates have to be scheduled with respect to app store terms and conditions.

Disadvantages of PWAs

Fast battery consumption - PWAs run on technologies that aren't intended for the mobile environment. As a result, devices use more CPU power to interpret and analyze the code.

Feature limitations - Unlike native apps, PWAs may have limited access to certain device features (i.e. push notification on Apple devices, interfacing with a stylus, connecting to 3rd party devices like headphones).

What is React Native

React Native (RN) is a JavaScript-based framework for building native iOS and Android applications. Apps built using RN utilise native rendering APIs in Java for Android and Objective-C for iOS to render real mobile UI components instead of webviews. This gives your application a native app user experience.

Facebook created the framework to support cross-platform development using a single codebase. Similar to React for web apps, RN uses JSX syntax extension, a mixture of JavaScript and XML, to write declarative UI components. The framework also features reusable components for faster app development and state management to monitor component changes.

Some of the most popular apps built with RN include Facebook, Skype, Bloomberg, Pinterest, and Walmart.

Features of React Native

Here are some RN framework features:

Third-party library support

RN allows developers to work with third-party libraries to build robust applications. This allows them to work with external tools that optimize the app's performance and functionality.

Cross-platform compatibility

React for web apps renders UI components in HTML and CSS web standards. Conversely, RN renders UI with native components that map to iOS and Android UI building blocks.

RN bridge

The RN bridge is a communication pathway between RN's JSX code and native app layers. It allows for bidirectional and asynchronous communications to support a universal mobile UX.

Image source: Hackernoon

Pros and cons of React Native

RN development offers the following advantages:

Cost efficient

RN uses a single codebase to build applications for iOS and Android. This means you don't have to hire separate teams to build your app, thus saving time and money. In addition, due to the single codebase reusability, you can build a minimum viable product faster with a short time-to-market period.

Smooth UI and fast performance

RN uses native rendering and other native resources to offer fast performance and improved user experience similar to native apps.

Rich ecosystem

RN has a wide range of tools and libraries freely available to developers to facilitate their work and accelerate development. If a developer runs into a problem when using the framework, they can utilize the community resources for solutions. The RN community is recently enabled Flipper support to help with the debugging process.

Disadvantages of RN

Hard to debug - RN apps are built using JavaScript, Kotlin/Java, and C++, making debugging more difficult. However, the RN community is recently enabled Flipper tool support to help with the debugging process. That said, it may require a developer to have an in-depth understanding of the native technologies and web development for easy debugging. This makes hiring RN developers quite challenging since it's hard to find developers with a good understanding of both.

Performance - RN app performance isn't as great as native apps.

Which one should you choose -- PWA or React Native?

Choosing whether to build a PWA or RN app depends on what stage your business is on in the growth cycle. If you're starting out and need to give consumers a simple app, then a PWA is more suitable for your business. It's fast and affordable to develop, especially when working with limited resources. PWAs are also a great way to improve your brand visibility and conversion rate since they are indexed as websites by search engines. This makes them more discoverable than RN apps.

We can compare the two using important criteria such as:

User experience

RN apps boast a better native-like user experience since they use native components for UI rendering. PWA use web components instead. Additionally, RN apps are usually more robust than PWAs. They can make the most of a device's features to offer an interactive user experience just like a native app. They are mostly used by businesses looking to establish their brand authority and visibility.

Offline availability

PWAs are the clear winners in this category. This is because their offline mode is included in the initial building stages, thanks to service workers' capabilities. RN apps need extra effort to implement offline availability, which mostly involves SQL database management.

Performance

PWAs tend to have a slightly higher performance than RN apps due to their service workers and app shell structure. RN apps are generally heavier and larger because of the additional components in their architecture, RN bridge, for instance, making them relatively slow.

That said, you should note that the development time for PWAs and React Native apps is essentially the same. The only advantage PWAs have over RN in this category is that you get a website and mobile app, while RN offers only a mobile application.

Frequently asked questions

Is PWA better than React Native?

It depends on your use case. A PWA is your ideal choice if you want a simple solution that works with a limited budget and time. PWAs also offer better performance and online availability, which is ideal for online e-commerce businesses.

Is PWA replacing native apps?

Thanks to their cross-platform compatibility, PWA and RN technologies are well-positioned to replace conventional native mobile apps. However, they're yet to match native apps' performance, hardware access, and user experience.

Conclusion

PWA and RN are great alternatives to native mobile apps due to their low development cost and short time-to-market timeline. However, each technology has unique benefits and opportunity costs, which you should consider before choosing either.