PWAs vs. Native Web Apps: What's the difference? #
Progressive Web Apps have the advantage of being installable and live on a device without the need for an app store. And, part of the process is the Web App Manifest which allows developers to control how an app appears and how it's launched. Also, web designers/front end developers will already have the skillset needed to start building immediately. There's no need to learn a new language, unlike native apps.
The advantages of native apps is that they typically bring better functionality as they make better use of a devices hardware and software, are faster and more responsive and you get quality assurance though ratings in app stores. But, it will mean having to learn how to use a specific framework or library.
Here we look at three different options – one for web (PWAs) and two for native (React Native, NativeScript) – for building an app. We run through how they operate, what they can do and look at their strengths and weaknesses to help you decide which option you should choose to build your app.
Native or Web? #
Therefore, there are several possible native categories, and when you are discussing this with your clients, your project managers or your teams, it might be important to define the discussion first. We can be discussing the native code execution for performance reasons, the usage of native user interface libraries (such as UIKit, Android Widgets or AndroidX artifacts) or the usage of a classic native distribution channel such as the AppStore or enterprise distribution through an app package.
Progressive web apps: Building for the web #
Strengths of PWAs #
- Apps also work in the browser
- Distribution: browser, enterprise and app stores
- Can utilise React, Angular, Vue, vanilla or other frameworks
Weaknesses of PWAs #
- No access to every native API
- Abilities and store distribution on iOS and iPadOS are limited
- It’s in continuous evolution
In this approach, we don’t need to package and sign the resources of our app: we just host the files in a web server and the service worker will be responsible for caching the files in the client and serve them after installation. This also means if an app needs updating, you just change the files on the server and the service worker’s logic will be responsible for updating them on users’ devices without user or app store intervention.
In terms of distribution, the most common method is the browser. Users install the app from the browser by using the Add to Home Screen or Install menu item, by accepting an invitation to install or by using a custom web app user interface on compatible platforms. It is worth noting that Apple rejects pure PWAs published in the App Store and encourages web developers to distribute it through Safari.
The user interface is purely managed by the web runtime, which means the web designer is responsible for rendering each control on the screen. If you use a UI framework, such as Ionic, or a Material Design library, HTML and CSS will mimic native interfaces on Android or iOS but it’s not mandatory. When doing PWAs, applying web performance techniques is mandatory in order to keep a good user experience.
React Native #
Strengths of React Native #
- Same patterns as with React.js
- Some web APIs are exposed
- Web and desktop support
Weaknesses of React Native #
- Can’t reuse web UI components
- The native bridge needs some work
- React experience is needed
But no HTML elements are accepted for rendering; only other native components are valid. Therefore, instead of rendering a
<div> with a
<p> and a
<input> element with JSX, you will be rendering a
<View> with a
<Text> and a
<TextInput>. For styling components, you still use CSS and the layout is defined through Flexbox.
The user interface won’t be rendered in a browser’s DOM but using the native user interface libraries on Android and iOS. Therefore, a
<Button> in ReactNative will become an instance of UIButton on iOS and the android.widget.Button class on Android; there is no web runtime involved in React Native.
You can start a quick React Native project with two free CLIs: Expo or the more advanced and official ReactNative CLI. If you use the official CLI, you also need Android Studio to compile and test the Android app and Xcode to do the same on iOS and iPadOS, so you will need a macOS computer for that platform.
React Native compiles native apps for iOS and Android, which means the distribution of your app will follow the same rules as other native apps: app stores for public apps, enterprise distribution and alpha/beta testing. Typically, you can’t distribute an app through a browser, although React Native for Web and Microsoft’s React Native for Windows platforms can help.
Strengths of NativeScript #
- Good tools for coding and testing
- Extensive gallery of apps ready to play with
- All Android and iOS APIs are exposed in JS
Weaknesses of NativeScript #
- Small community
- Can’t reuse web UI components
- No web, desktop or React support
The advantages of NativeScript are clearer when you use Angular or Vue. For Angular, you create the same components you are used to but using XML instead of HTML for the template, including all data bindings. In the XML, instead of a
<div> with a
<p> and an
<img>, you will place a
<StackLayout> with a
<Label> and an
CSS and Sass are supported with similar styles to CSS in the browser. Routing and network management are done through implementations of the standard Angular services. For Vue, it’s something similar; you write the template in XML instead of using HTML in the same
<template> element in your .vue file.
NativeScript includes a collection of components that are then mapped to an Android or iOS native control, so when you render a list or a picker, it will be the native app, using the same idea as in React Native.
NativeScript has great support for tooling, including VS code plugins, the CLI, a hot-reload testing system and a NativeScript playground app, so you don’t need to install all dependencies while testing, as well as several additional services such as an online playground.
Finally, NativeScript only compiles an app for Android and iOS that can be installed from official distribution channels and app stores if you comply with their rules, enterprise distribution and alpha/beta testing. Typically there will be no way to distribute apps from a browser and there are no solutions for desktop apps for this platform.
Other solutions #
Apache Cordova #
Not new, but worth a mention here. The heart of the well-known PhoneGap, the tool let us create hybrid apps: web apps wrapped in a native container using a WebView. Here we can use a Vanilla JS solution or any web framework to render and design our app, with the ability to call native plugins for hardware and platform access.
Some examples #
When deciding which platform to use, reading about and testing other apps and their experience might be a good idea.
- Many big names published PWAs including Twitter, Starbucks, Google Maps and Uber. Uber found a new niche by supporting desktop with PWAs [https://eng.uber.com/web-booking-flow/]
- React Native is used not just by Facebook apps, but also Uber, Skype, Pinterest and Salesforce among others [https://facebook.github.io/react-native/showcase.html]
- Many banks have decided to use Native Script to leverage their Angular developer experience with success, including the European banks Raiffeisen Group and Triodos [https://www.nativescript.org/success-stories]
- Airbnb used React Native for two years and they've released a report on what worked and what didn't before deciding to move away from it [https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838]
- Sometimes developing native apps is not needed and many apps using that technique can be better apps as PWAs, @ShouldBePWA Twitter account collects some of them [https://twitter.com/shouldbepwa]
This article was originally published in issue 325 of .NET Magazine, but this version has more content.