What are Progressive Web Apps (PWA)?

programming
1

by kirupa | filed under Web Apps

This is a companion discussion topic for the original entry at https://www.kirupa.com/apps/pwa_101.htm
2

If you were to develop a new app today, what would be the big-picture comparison between developing a PWA (is this done from scratch?) vs. using React?
Thx.

3

When you say React, are you referring to React Native or ReactJS?

If ReactJS, you can build a PWA using React, Angular, Vue, or whatever framework and library that you like. This is an easy one :stuck_out_tongue:

If React Native, there are a few things (and tradeoffs) to think about, and you can get more background on where I am coming from by reading this article.

The Ideal Case
If cost and time aren’t a problem, you should build both a PWA and a React Native solution and architect your app in a way to re-use as much logic between the PWA, React Native-Android, and React Native-iOS projects as possible. The PWA gets you the widest reach where any device with a browser can view your app. The React Native app gets you richness/depth where you get to take advantage of a device’s native UI controls for maximum performance and familiarity for users.

Assuming that you can only build a PWA or a React Native app, here are some things to keep in mind:

  1. Are you going mobile first or everywhere first? If your goal is to target mobile devices (Android and iOS) only via the app store, then go React Native. If you want to reach the widest range of users and devices, go with a PWA.

  2. If you want the lowest-cost option for your development team, then a PWA wins. You write your app once and it will run pretty much everywhere, but you do need to ensure your app is responsive/adaptive and relies on progressive enhancement to ensure your app functions across a diverse set of device platforms.

  3. If you want the best UI responsiveness and performance, go React Native. React Native uses the iOS and Android native UI controls, so you get to use the platform controls users are familiar with along with the multi-threaded goodness a non-HTML UI layer provides.

  4. If you care about low-end devices, PWA is slightly better than React Native. While the UI layer in React Native is made up of platform controls, the underlying data communication is all JavaScript. On lower-end devices (usually Android), the slow JS throughput is a very noticeable bottleneck.

  5. React Native creates a native app package (~usually tens of megabytes in size!) that needs to be installed prior to the user seeing even a single pixel from your app. PWAs load in the browser immediately. This may be less of a problem in areas where you have plenty of cheap and fast bandwidth and device storage. If you are targeting large parts of the world where bandwidth and storage are problems, then a PWA is better.

  6. What are you (or your development team) skilled in? There is always a nontrivial cost to learn a new technology and train others on it. Both PWAs and React Native have their steep learning curves when you want to create a great user experience (especially at the critical last-mile), so this will play a role.

  7. Is your app consumer focused or enterprise focused? Consumer apps tend to need to a high degree of visual polish, and that tends to favor React Native. Enterprise apps should be visually awesome as well, but that is often not a differentiator since most enterprise apps can’t be substituted for something similar. A good PWA with offline capabilities would meet most enterprise requirements.

  8. Do you need access to native device APIs? PWAs are limited by the browser sandbox, so you can’t go beyond what the Web APIs provide access to. If all you need is webcam/camera, microphone, geolocation, etc., then you are good. If you need deeper access to customized hardware and sensors, richer Bluetooth support, and so on, React Native allows you to access the native hardware.

  9. Desktop or Mobile or both? If you only care about desktop, then React Native won’t help. I do realize there are desktop ports of React Native available, but most aren’t officially maintained by the React team and have various gaps that you will need to address yourself. A PWA will run well on desktops, but if you need more native access to lower-level APIs, the browser security sandbox will block you from getting that access. Look into something like Electron instead.

So…as you can see, there is no simple answer. You have to think about a variety of different opportunities and pitfalls and balance that against what your needs are. Hope this helped.

Cheers,
Kirupa :stuck_out_tongue:

5

I was asking about React JS.
The impression I had from reading your article is that PWA is a standard which allows a roll-your-own toolset based on standards. This would avoid dependency on someone else’s framework.

If cost and time aren’t a problem…

Yeah right :rofl:

6

PWA is just a marketing term :grinning:

You can use any framework or library to build your app. Add a service worker and manifest, you have the makings of a PWA!

7

I see.
Thanks for clearing that up. :thumb2:

8

right,
What about a PWA/webapp for the normal version of your app and a thin Cordova wrapper for the premium version?

Lossil.B

Blockquote
my sources : Whatsapp Hotstar

9

That is a decent solution. The tradeoffs are that the Cordova version won’t solve the UX/performance issues, but it will solve the App Store distribution, home screen presence, and native API access problems :slight_smile:

11

I’m writing a very big system into PWAs right now with Web Components @kirupa! It is fun!

1 Like
12

You should share your project once it is done! :slight_smile: