Wrapping ReactJS web app in React Native - Push notifications?

(peterm) #1

I’ve built a beautiful app that looks great on desktop, tablets, and mobile web. Architecturally, would it be possible to use React Native’s WebView so I can put in the iOS app store and to send push notifications to users?

I’m new to React Native, so I just wanted to see if that would be possible. I’m not interested in recreating my app from scratch using React Native. The purpose of wrapping is just for notifications.


(peterm) #2

I’ve done some light reading. So far, I’m thinking this should be possible. After looking at react-native-login example app, the app should begin on a web view of the login page. Once authenticated, I’ll capture the the authentication cookie in the response and request permissions through PushNotificationIOS API. Once permissions are granted, I’ll call my server’s rest api to persist the Device ID for push notifications (including the auth cookie). After that’s done, I’ll show my app full screen in a WebView. Then, when needed, my service can send calls to APN for push notifications, including the Device ID.

If anyone has holes to poke in my ideas here, please do so! Much appreciated.

(Dan Tello) #3

I’d love to hear how this has been going - I’ve been considering going down a similar path.

(peterm) #4

@greypants So I don’t actually have it altogether end-to-end, however, I can tell you it is definitely possible. When I originally posted this, I hadn’t really used any of the tech, but had a 50,000 ft understanding of it all. Conceptually, I was correct.

I’m making a basic React Native app that acts as a shell to the web app. I have a pretty intro scene to welcome the user to my app. Next, then the user logs in via Single Sign On technology. I capture the auth cookie in the SSO response, ask for push notification permission on iOS, and then POST the info to a server REST end point the device token and the cookie for authorization, so I can associate the given device with the user. On Android, can make the POST request directly – no need to ask for permissions.

After that, I take the issued auth cookie and navigate to a new scene containing a full-screen WebView, inject the cookie, and load the homepage. Then whenever I need to send notifications, my application servers will have some business logic to take care of that. Probably going to go with Google’s Firebase Cloud Messaging service since it’s free (but AWS offers very low prices too). I’m probably going to put the URL to load in the payload, to keep the notifications contextual to the in-app experience.

(peterm) #5

One performance thing I ran into was using the react-native WebView component (issue filed here: https://github.com/facebook/react-native/issues/12756). Tl,dr; on iOS, the default component has a less performant javascript runtime; using the WKWebView component (community wrapper here: https://github.com/CRAlpha/react-native-wkwebview) is providing noticeably faster response to tap gestures, etc.

(Dan Tello) #6

Awesome! Thanks for the update.

(peterm) #7

Another follow up that was a good learning lesson: WebView’s kinda suck. And by that, I mean both of the UIWebView and WKWebView variety. I ended up doing my front end from scratch. Getting way better performance, and the animations between scenes really give it that truly native feel. So yeah, I scrapped the WebView’s. As long as your server side is abstracted well enough (e.g., have a REST or websockets API) you’ll be good to go on Native.

(Noitidart) #8

It might be better to ship this with Cordova. Using react-native just for the webview isn’t using react-native’s power/optimizations at all.

(Phillip Johnsen) #9

Just want to share my experience doing just what the OP thought doing, wrapping an existing webapp (React.js but doesn’t matter really), in a React Native skeleton to be able to send push notifications to end-users.

The WebView bridge w/onMessage has proven to be very valuable. E.g. ticking a switch in the webapp triggers the native app to request notification permissions.

For this particular project we don’t require raw native performance at 60fps, what we get from a WebView is good enough. So far this combo has been good to us.

It might be better to ship this with Cordova. Using react-native just for the webview isn’t using react-native’s power/optimizations at all.

Can’t argue with doing as simple as a WebView skeleton is just scratching the surface of what React Native is capable of. Though the familiarity with React.js (and the related packages) that we are using extensively in our webapps, makes using React Native a big win. At the moment I’d much rather use a small fraction of React Native, than getting to know a new stack (Cordova etc).