How to easily and cheaply create a mobile (webview) app

Hello everybody,

I believe that one of the bigger challenges for Bubblers can be to turn your mobile platform into an actual mobile app. To me and my partner @timon this was also problematic at first, and we almost went for the easy (but expensive) GoNative-option. Fortunately, we found a very easy way to create a mobile app, and it costs almost nothing.

Our solution: for both Android and iOS, buy a webview-template through CodeCanyon, tweak this to your preferences, and upload this to the App- and Playstore.
To start off with the two templates we used:

Both of these templates work well, and the support of the teams behind it is great. What you do is the following: you buy and download the template, import the projects into Android Studio and XCode, and then you replace the default webview-link with a link to your mobile app (the page of your Bubble-project that has mobile settings). The documentation provided with these templates is quite good, so you don’t have to figure out everything by yourself.

Then, after you inserted the link to your mobile app, you are basically ready to export the project already and start testing it on your phone/emulator. What you will have is a fully functional app, that can be exported and posted to both AppStores (we already did this without much trouble), and the costs of this is around 40 dollars (excluding the fees you have to pay to register for the Google- and Apple Developer Accounts).

The only true problem we encountered along the way was the fact that our camera-upload didn’t work well for our Android App, but this was solved by replacing a line of code (replace the relevant line with this https://pastebin.com/UTRQrtwB). I do not think the user can at any point notice that our app is just a simple webview-app: we are very happy with the result.

I hope this helps, to us it was quite a surprise that the solution was this simple in the end!

50 Likes

This is amazing, comparing to the costs of GoNative :slight_smile:

Thank you very much for taking the time to share it!

Vlad.
Co-Founder @ Zeroqode

c6688372752f4234938c3c4d11fbfa761509eb1f

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-ĐĄode Development Services

3 Likes

Good stuff. So what’s the app?

it’s called Cliqfix and available in the Brazilian iOS and Google Play store.

The webapp is available at www.cliqfix.com.br

Cheers!

1 Like

As an owner of VW bugs and Buses I appreciate the bottom graphic :grinning:

1 Like

Great! I’ll try it soon

Wow! Thank you so much for taking the time to share this information. This is extremely helpful!

Thanks for sharing this @remko.mooi This is the best thing I have came across today!

Really interesting! Thanks for sharing. Any idea how easy it would be to implement notifications through the app? I was hoping to use OneSignal - do you think it would be easy to link the two?

Edit - there is another app on CodeCanyon which seems to support these: https://codecanyon.net/item/universal-webview-ios-app-push-notification-swift-admob-inapp-purchase/17383449?s_rank=5

1 Like

Very helpful, thanks! Quick question regarding WebViewGold: can the completed Bubble app access local photos on the IOS device? Ie import images from an iPhone camera roll into an ‘app’?

@remdim definitely!

1 Like

using android studio to implement a shell webview app means you can take advantage of the full toolkit inside studio that will guide you through firebase.

this is a studio built app using a webview element and then also adding firebase to the java in the native side and using the firebase plugin for the bubble inner. because firebase has things like the instant database, remote params & functions you can move your private calls or data through the firebase back end rather than page params or similar. also it has a killer push notification system & powerful cloud messaging base.

image

1 Like

@remko.mooi I bought WebViewGold and it works great so far (I haven’t attempted an app store submission yet).

I’m having scaling issues with IOS in XCode; anyone found a fixed width/height that works well with this solution? Thanks!

My experience is that if it works well as a WebViewGold-build, Apple will accept it.

I’m using a fixed width of 320, and I put in the header of my mobile page:

< meta name=“viewport” content=“width=device-width, user-scalable=no” / >

Delete the spaces after the < and before the >, but I couldn’t post this on the Bubble Forum as true HTML. This keeps the user from being able to zoom in.

My biggest issue for mobile was the height, because different groups on your mobile website will have different heights, and you don’t want a lot of empty space after short groups. What I did was to make the mobile page the height of the largest group on it. Then, I made all groups the full height of the mobile page, and I checked ‘collapse when hidden’ on these groups. After that, I filled the empty space at the end of these groups with an extra empty group (the part that you want to be cut off). Uncheck ‘visible on page load’ and check ‘collapse when hidden’ for these extra empty groups. This should take care of the height issue, because all groups will now collapse over empty space.

You can also do this through Javascript, which will be a more elegant (and probably preferable) solution, but I didn’t get that to work.

1 Like

Great input! I just tried out WeSetupYourWebViewApp. A short review: It worked quite well. Took about 2,5 hours for them to send me the Android/iOS source code. Submitted it & Apple approved within 24 hours. Looking forward for other reviews and/or exchange about solutions on WebView wrappers. :slight_smile:

@remko.mooi any idea what I’m doing wrong here? With the settings you’ve described on a blank page (no groups created yet) I still get side “blank” spaces on a demo iPhone 8. Thanks!

Hi,

I downloaded the link you suggested for Android and am having trouble getting it to be responsive.On one phone it’s too large and I have to scroll to see everything, and on others it’s too small and there’s white space on the bottom. Were you able to get it to be responsive on all android phones? If so, what screen size did you create it in bubble?

Thanks!

It is very simple and cheap to create web View App. Ultimate WebView App template is advance App created by AbhiAndroid having 20+ features. This is a demo of the App. You can use the source code to convert your website into advance Android App in less than 15 minutes. Get code from http://abhiandroid.com/sourcecode/webview/

1 Like

Thank you so much, I am currently struggling with this and appreciate the information a lot. Is there a reason you have chosen “Universal Android WebView App” over “WebViewGold for Android” from the same developer?

I really appreciate your post about this mobile app solution and the camera implementation. How does the “take a photo” function work with this solution? Currently, for my app, I had to use the Bubble Picture Uploader so that Gonative could trigger the Android camera for the user to take a photo. This solution did not work for iphone and I am still looking for a way to take a photo with my app on iphone. Does your solution work? Also, does your line of code for the camera depend on the Picture Uploader in Bubble or am I missing something?