Table of contents
Similarly to PWA and Flutter, PWA and React Native are among the top popular approaches for developing cross-platform applications right now. And when researching on this subject, it’s understandable to feel confused when trying to decide on the right development pathway for your business. In this article, we’ll be going into the details on each development approach—from what they are, their use cases, and the specifics on how each development approach can be beneficial to your business.
The brief details
Here are the quick sum-ups of each development approach, as well as the use cases to which.
Progressive Web App (PWA)
Definitions
Progressive Web App (PWA) is an up-and-coming solution for developing web-based applications. At its core, PWAs rely on service workers and web app manifests to provide app-like experiences, which include features previously exclusive to the apps such as push notifications, offline availability, installability, etc.
Use cases & examples
Due to its web-based nature, PWAs are best suited for websites whose main concern is to provide more engaging, connectivity-independent experiences—or simply for websites who want to reach a wider range of audience.
As of now, PWAs are seeing wide adoption in the E-Commerce industry where features like push notifications and offline availability are necessary for improving purchase conversion rates and building a more loyal customer base.
Recommended reading: 12 Best Examples of Progressive Web Apps (PWAs) in 2021
React Native
Definitions
React Native is a framework for developing cross-platform, JavaScript-based true native applications. Apps that are built with React Native can interact with native APIs via React’s declarative UI paradigm and JavaScript—and this means a single React codebase can be used to maintain two platforms (iOS and Android), all without compromising the users’ experiences.
Use cases & examples
It’s hard to define a specific use case for React Native, as it is used to build various types of apps such as popular social media apps (e.g., Facebook, Instagram, Pinterest, etc), or digital communication apps (e.g., Skype, Discord, Tencent QQ, etc). For a list of apps built with React Native, do check out React Native apps showcase.
Going into the specifics
In the following part, we’ll be going into the specifics of each development approach, as well as insights into how each development approach can fit into your business’s plan.
Language
PWAs rely on web technologies to deliver app-like experiences. So web languages like HTML, CSS, and JavaScript are still the core languages that make up a PWA, whereas React Native apps use React.js (a JavaScript library) as their core language.
This is why when digging through the code of a React Native app, you should see it share some similarities to web languages, with the only major difference is that React Native apps use native components instead of web components to create the user interface.
User interface
Because PWAs are based on the web technologies and run on the browser’s engine, the user UI of a typical PWA might not seem that native to the trained eyes. However, for the typical users, the differences between PWA’s app-like UI and true native app UI are miniscule at most.
A React Native app, instead, is capable of delivering true native experiences, thanks to its use of native components—and these include platform-specific components such as <DatePickerIOS> and <ProgressViewIOS> for iOS, or <ViewPagerAndroid> and <ToastAndroid> for Android.
Performance
Performance is a delicate subject, as it’s hard to get to the truth of this. However, since both development approaches heavily use JavaScript, you can expect performance to be quite similar across all ends—with a slight advantage belonging to React Native, since it is tighter integrated with the system in use and doesn’t have to communicate through a browser.
However, the fact that PWAs live in the browser environment doesn’t really mean that it performs like your average website. Thanks to the advanced caching method employed in PWAs, there are no longer the occasional hiccups when loading in between pages as found in the average websites/web apps; and coupled with the fact that PWAs are essentially enhanced single-page applications, the perceived performance of PWAs is as close to a true native app experience as you can get.
One example of this is Temoorst, the Kuwait-based brand in the disposable goods industry. With SimiCart as their solutions provider of choice, the brand opted for both a native app and a PWA for the best possible ROIs, and the performance aspect of PWA is still something that the brand did not expect. On a blind test, you’ll be hard pressed to find performance—and visual—differences between their PWA and their React Native app.
To test the performance difference between a React Native app and a PWA, we encourage you to try out Temoorst apps. The apps themselves are testimonials of what well-optimized a React Native app or a PWA might look like when pushed to the max.
- React Native app: Google Play Store | Apple App Store
- PWA: https://temoorst.com/
Security
Because of the higher level of integration with the device in use, a React Native application is naturally more secure and less prone to vulnerabilities. To add more layers of security into a React Native app, there are various approaches to employ during the development process, such as:
- SSL Pinning: to secure app-to-server connections
- Keychain/sensitive-info: provide secure local storage along with biometric/face authentication
- Jscrambler: prevent code tampering by adding a self-defensing layer
As PWAs live in the browser environment and leverage the browser for most of its capabilities, most of the security work is done by the browser itself. Compared to a normal website, a PWA is more secure as the core component of PWA—service worker—only runs over HTTPS which means communication between client-side and server-side is always encrypted.
Service workers only run over HTTPS. Because service workers can intercept network requests and modify responses, “man-in-the-middle” attacks could be very bad.
Introduction to Service Worker
Discoverability
This is where PWAs shine. Not only are PWAs available on the Web and exposed to search engines, they actually are publishable to app stores as well. Google, Microsoft, and even Samsung all have joined the bandwagon to push for more adoption of PWAs by embracing repackaged PWAs into their app stores. Microsoft Store, for example, even goes one step further and plans to automatically re-populates their app store with quality PWAs indexed by their own Bing crawlers:
The Microsoft Store, powered by the Bing crawler, will automatically index selected quality Progressive Web App
Welcoming Progressive Web Apps to Microsoft Edge and Windows 10
As of now, Apple App Store is the only remaining popular app marketplace where PWA can’t seem to reach. This is because Apple has made it clear in their review guidelines that in order to be approved, the app needs to be “beyond a repackaged website”—and this is an entirely another discussion by itself, about how Apple is actively discouraging the development of the Web in fear of hurting their bottom line.
Compared to PWAs, the discoverability of apps built with React Native are not as impressive, but the cross-platform nature of the framework means that with a single codebase, you can still get your app discoverable on both Google Play Store and Apple App Store. And considering that iOS users are in the majority in some countries (including the US)—and that PWAs can’t be published to Apple App Store—this should be enough of a reason to opt for React Native app development in order to serve where the majority of your users are..
| Google Play Store | Apple App Store | Microsoft Store | Web | |
|---|---|---|---|---|
| React Native | Yes | Yes | Yes (with expansion pack) | No |
| PWA | Yes | No | Yes | Yes |
Hardware accessibility
Because React Native apps are true native applications, they enjoy a much wider access to native APIs. And this means even low-level access to the device’s hardware (e.g., access to NFC (Near Field Communication), contact list, etc) and systemic access (e.g., access to system settings, logs, etc) are possible and can be leveraged to improve the user experience.
And since PWA relies on the Web APIs for its hardware accessibility, a PWA is naturally more restricted in how it can utilize the system’s resources. In the best case scenario—that is if the browser in use supports all the latest hardware access APIs—a PWA can have access to various hardware features previously exclusive to native apps such as geolocation, access to camera and microphone, augmented reality (with WebXR Device API).
Recommended reading: Progressive Web App (PWA) and Hardware Access
Development costs
In terms of development costs, React Native projects tend to be on the pricey side due to the high level of complexity involved. For example, it’s common for a basic React Native project to cost upwards of $15.000, whereas a basic PWA project should cost only about $1000 – $10.000. However, compared to other native app frameworks, React Native remains a cost-effective solution thanks to its platform-agnostic architecture. With a single React Native codebase, you can have your app published to both Google Play Store and Apple App Store, significantly reducing total development costs without hurting user experiences.
And while typically cheaper than React Native projects, the development cost of a PWA project can vary significantly based on the development pathway you choose to go with. For example, if you decide to go with the headless architecture (which is a more flexible, scalable solution compared to the traditional architecture), you can expect your PWA’s development costs to increase significantly due to the higher level of technical expertise required in the process.
Conclusion
Because these are two development pathways for very specific needs, choosing between React Native and PWA can be a tough decision. A PWA is lightweight, with effortless updating and installing processes, and the features and functionalities that PWA provides should be more than sufficient for the average app user. However, because of the current restrictions that Apple impose on their App Stores, it may be a good idea to invest in a good React Native app if the majority of your mobile users are on iPhone.
For Magento merchants looking to build either cross-platform React Native apps or headless PWAs, here at SimiCart we offer cost-effective solutions to help you gain a competitive edge over your competitors.
