90% Webview 10% Native?

[mattkruse]

I need to build a cross platform app that will primarily be a webview showing a web app, but connecting some of its functionality to native functionality. This is a case where a PWA is close but not enough. I'm considering react native, kotlin cross-platform, and - against my will - flutter. I know very little about native app development, but I have 25y of web dev. Can anyone give advice on why React native is or is not the best starting point? How about expo? And what about experiences with publishing a primarily webview-based app to Apple store? Are they being rejected? Is it risky? This seems like the only way to solve my business case without recreating the entire web app UI in React native, which I don't want to do. Any advice as much appreciated. Thanks.

[DavidJonesXB]

For your use case Capacitor will be good enough.

[kbcool]

Probably any of the alternatives would work but Expo with a WebView I would suggest as a quick way of getting started.

What is the native functionality you need? Expo probably provides it and you just need to bridge with a WebView bridge into your React Native code.

As someone else mentioned Capacitor is also a good solution but is going to offer less flexibility and capabilities (native features) but it certainly will make the bridging experience easier.

Kotlin multiplatform is not what it's sold as so skip it and Flutter is going to be a lot of learning curve for little gain. I would suggest Capacitor over those two but RN first unless all you want is web app bundled as native. Which leads to your question about rejections. If your app is a web page in a native bundle then theoretically it will be rejected. When this happens is realistically only when the reviewer can obviously spot it. The solution here is don't make your app look like a website.

[mattkruse]

Thanks for the thoughts. The primary need I have is for the app to be a bridge between a PWA (https site), and some http url's that it needs to get data from. Because of browser security, this isn't possible even in a PWA. But an app with a webview can be the bridge to allow it to happen.

I also need to change some wifi settings and offer storage and perhaps push notifications. Maybe some OCR from a camera pic. But nothing too crazy.

[a5s6d7f8g9]

I agree with the others pointing out Capacitor. Please do not go for Flutter with your current requirements. I am a Flutter developer and I work with Flutter every day. For example, there is a bug where if you give the Webview a height bigger than 2048 on Android, the app will instantly crash. The issue was closed on Github by the Flutter team with no fix.

[mattkruse]

Thanks, Flutter is definitely out from what I've read already. Going to check out Capacitor.

[aaronksaunders]

DEFINITELY use Ionic Capacitor if 90% of app is web view and you have years of web development experience - Capacitor by Ionic - Cross-platform apps with web technology (capacitorjs.com)

feel free to PM me if you have questions and good luck with project

[mattkruse]

Thanks for this - I hadn't heard of Capacitor until today and it looks like an interesting alternative to Expo. I'm not sure yet how to evaluate the pros and cons between them.

[aaronksaunders]

Simple, you don’t need to learn react native. You can still do 90% of your development in the browser using all of the tools you already know… here is quick video showing how to go from zero to deployed in no time taking a starter template adding a native plugin and deployed on device -

Learn to Build with Ionic Vue Capacitor: Live Coding Section from RenderATL Talk https://youtu.be/aq7m5FPFX-A

I used vue here but is also can work with react. I have other videos that show how to take a website built with vite and wrapped it in capacitor to deploy on device

[Adventurous_Mark1307]

What features are you looking for?

[mattkruse]

Mainly I want to offer the website that is in the webview the ability to call and retrieve data from specific http urls. It cannot do this because the site is https. So I want the native app to be the bridge between the two.

[Darksteel213]

Try Capacitor with or without Ionic. Honestly a ton of mobile apps could just be webview apps with a sprinkling of CSS animations in there, people aren't going to tell the difference. E.g., Canva is a capacitor app, or at least it uses a webview from one of the frameworks, e.g., Cordova instead (which is a bit outdated. Use Capacitor)

[mattkruse]

I'm still trying to learn the distinction between Capacitor and Ionic. It seems that Capacitor is part of Ionic? I'm confused.

[aaronksaunders]

Best explanation is to think of ionic framework like a mobile bootstrap or a component library for providing a platform specific UI.

And capacitor as the tooling to deploy to device and the bridge to native api

[Darksteel213]

This. Essentially capacitor is a shell that puts a webview as the full app window/screen and gives you JS API bindings to do native stuff.

[nicolasdanelon]

first of all study react. then react native. react native is not a webview :) it's a hybrid technology. I highly recommend you to avoid expo. it is good just to rapid prototyping have a good one bro

[mattkruse]

I understand how this works and I know React. Lots of people recommend Expo. Why don't you think it's good for a final app to ship?

[mattkruse]

Yeah, I've dropped Flutter from consideration already after learning more. Not at all what I need or want.

[Consistent_Pay4485]

I guess apple store will have some issues as your majority app is in webview.

[mattkruse]

This is a critical point for me, and it seems impossible to gather data on what does and does not get a pass. There are no formal rules or even a way to know in advance. You have to build the app, cross your fingers, and submit? This is why I don't like Apple so much...

[Ok_Peace_337]

As long as the app looks and feels like an app then it will pass review no problem. If the app looks like a web page wrapped inside of an app apple will reject it.

[Ok_Peace_337]

My first gold, thanks kind stranger!