Two of the hottest technologies for building cross-platform apps these days are Progressive Web Apps (PWA) and React Native. If you are an app developer today, which one should you prioritize and build for? What decisions go into choosing one over the other? These are some of the more common questions I have received over the years, so I figured I'd summarize my answers in this article.
Thank you for the nice summary of the pros and cons of each approach (PWA vs React Native) and including the other options available, too.
I’m researching options for my company. Here are where we are now and what our goals are. Any feedback would be very much appreciated.
We currently have a native mobile app (ANSOS2Go) on both iOS and Android, but find it difficult to keep these apps up to date with the features that are available via our web application
We have only one developer for the iOS version and one for the Android (that we have to borrow from another product group)
Stateless mobile API
Stateful web application user sessions
Both web app and mobile support OIDC user authentication, as well as legacy user/password authentication
Enterprise web application frontend in HTML/JSP needs a rewrite
Mobile app SEO and performance are not critical, but low development cost and keeping mobile in-sync with web application features is
Web application does already provide a mobile view with limited functionality; no where near what the mobile app provides
Where to go from here?
I’m thinking our best option is to replace the mobile apps with a PWA solution for starters (React)
PWA React solution would eliminate the mobile-view (jQuery mobile) of our web application
Longer term goal
Build out stateless API to support all web application features
Replace web application frontend with full-feature React SPA
I agree with your conclusion. Since you will be rewriting the web layer and wish to keep development costs low, going the PWA route would be easiest. Another option might be Ionic which abstracts away some of the details of PWAs and hybrid apps into a simple workflow. Going hybrid gives you the ability to use native APIs for authentication, for example, if you would like to get the best of the web and native worlds thanks to the webview.
For the stateless layer, will you be using something like Firebase as the back-end and keeping state in-sync by relying on clientside caching when offline?
Thank you for the response. I’ll check out Ionic. I haven’t used Firebase yet, but did see that it was one option for storing off-line content and authentication. How safe is it? Can content in Firebase be encrypted and secured?
On the authentication topic, we currently authenticate users over OIDC and store the access and refresh tokens in local encrypted stores. We use AppAuth-iOS and AppAuth-Android. The apps send the access token with each API request. How are others accomplishing this with PWAs?
Firebase can certainly be used to securely communicate and store data. It is now owned and maintained by Google, and they have been adding a lot of new capabilities that will make using it as part of your PWA easier.
As for local encrypted storage in the browser, none really exist. @senocular may know more, but there are a few proposals floating around the W3C, but I don’t think any browsers support them. The most secure solution right now is to store all sensitive data on the server and have a GUID or equivalent you store on the client (localstorage, cookies, websql, indexeddb, etc.) that only makes sense to your serverside logic. This ensures that even if a client has the GUID, which they can easily retrieve, they can’t do much with it.
Included in our legacy solution is a desktop application which makes moving to the cloud difficult at this time, so Firebase isn’t really an option for us. Maybe later on though.
I’m looking at using AppAuth-JS to perform OIDC authentication in a PWA and storing the access and refresh tokens on the client (I guess in cookies, but not sure). PWA would send access token with each API request to server which would use the access token to get userinfo which does limit risk some. Being able to store the access token on the client securely (as we do with the mobile apps) would be ideal.
