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!
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?
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â?
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.
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.
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.
@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!
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?
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/
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?