Hey,
To all you people who might be using the SuperView wrapper to get their Bubble apps working, here’s a bit of a guide on how to configure OneSignal and use the JS Bridge methods.
This is for iOS only at the moment, I might do an Android one at another time.
It’s not a complete guide, I’ve written it up fairly quickly but if there’s anything that doesn’t make sense then let us know.
.
OneSignal Integration
There’s a couple of things you need to setup in the app first to get it working.
First thing is go into the Config.plist file and make sure you have the following values set. I don’t think you really need the restApiKey but because I generated it anyway I put it in.
The main thing is the appid value and that you have the isEnabled value set to YES.
Once you got that done, open up your App settings section in XCode and enable Remote notifications under the Background Modes section.
You’ll also need to get the SuperViewOneSignal Framework (that comes in the zip download) and drag that whole Framework folder into XCode (on the left side).
When you’ve imported it, click on the General tab at the top and make sure it’s set to Embed & Sign . In fact, if you use any Frameworks, they all need to be set to that.
I also use the Location Framework as I managed to modify the AppDelegate file today so that every time the phone moves, it now sends the Latitude/Longitude cords over to Bubble’s REST API and updates a User! (very cool and very proud of myself too!)
If you want to know how to do that, let us know and I’ll cobble something together.
I think that’s about it for the App. You obviously need to setup the stuff over at the OneSignal website, so the main thing here is that you’ve gone through the Apple iOS configuration section. I won’t go into detail as it’s probably a bit long winded but if you open up the link (highlighted yellow in the below screenshot) then you should be able to set that part up with the certificates etc.
Now, back over in Bubble… there’s a couple of things you want to do here.
First will be getting the Player Id and saving it into our User table. Create yourself a new field called PlayerID.
Second thing will be to use the plugin called “OneSignal Push Notifications” – it’s the one by Two Bits that contains the action to send the notification.
New User Field and Player ID
I’ve made the field a List of Texts so I can append multiple player id’s to it. If you had a user in your app that logged in using multiple devices (like iPhone/iPad) for example, then each device would receive its own player id and consequently get saved into that list.
Upon using the Bubble action to send the notification, it will send to each item in the list so that all devices the user has it installed on will receive the same notification. For this you use the action called OS – OneSignal PlayerID MultiPush keep reading…
The way I get the Player Id is by utilising the Bridging methods inside the SuperView app, it looks like this:
window.bridge.post('onesignaltoken', {}, (results, error) => {
bubble_fn_player_id(results.token);
});
I then add a JavascripttoBubble element to the page somewhere and configure it like this.
The suffix name is referenced in the above script. When the script passes the results.token value to it, then the JStoBubble event is triggered.
The JStoBubble event looks like this and it’s here where you get the value back into Bubble.
Plugins:
The one I use is called OneSignal Push Notifications
You’ll need to fill in all the configuration fields which you can get from the OneSignal website. The http.os.tc field won’t be needed if you’re now using Bubble’s own plugin which deals with web push notifications. Probably the same for the Safari web id field also actually.
Note: If you’re into your plugins then you could also use the NativeShare one which is great for firing off some native stuff and detecting which device is being run upon. You may notice above, I have a condition set on the JavaScript which gets the Player Id which makes it run on an iPhone only.
At some point I’ll be having another one which will be used for Android also. The NativeShare plugin also works through SuperView which is a bonus!
When I want to send out a notification, I only use the action called OS – OneSignal PlayerID MultiPush as it deals with lists.
I’ve not really used the others but I hope the below image will show you how it works.
When it comes to grabbing the Player Id, if you’re using the same as me (list of texts) then make sure you start with a double quote, add the join with (“,”) and end with a double quote.
It’s also possible to setup the apple-app-site-associate file through Bubbles’ Hosting Files section below.
This will make your app launch when the notification is swiped (instead of safari opening the link which you’ve defined above)
I can give some more guidance on this if you need it.
Bridging Methods
Here are all of them as they stand in the latest version of the SuperView app.
I’ve found that sometimes you need to tweak them to make them work. I’ve taken these straight out of the documentation though which I assume is up to date.
If you find yourself trying to use one and can’t get it working (or get values back into Bubble) then let us know and I might be able to help.
.
Get App version:
window.bridge.post('get_app_version', {}, (results, error) => { alert(results.token); })
Facebook Login:
window.bridge.post('facebook_login', {})
Get Facebook Token:
window.bridge.post('get_facebook_token', {}, (results, error) => { alert(results.token); })
Get Facebook Profile:
window.bridge.post('get_facebook_profile', {}, (results, error) => { alert(results.token); })
Check if user purchased the item and removed the ads:
window.bridge.post('app_purchased', {}, (results, error) => { alert(results.purchased); })
Show native loader:
window.bridge.post('show_loader', {})
Hide native loader:
window.bridge.post('hide_loader', {})
Show Interstitial ad:
window.bridge.post('show_interstitial', {})
Show Rewarded ad:
window.bridge.post('show_rewarded', {})
var unregisterHandler = window.bridge.on('ads_reward', (parameters)=> {
alert("Type: " + parameters.type + " Amount: " + parameters.amount);
})
Rate my app:
window.bridge.post('rate_app', {})
Play song (bird.mp3) located in xcode project:
window.bridge.post('play_sound', {"name": "bird.mp3"})
Stop song:
window.bridge.post('stop_sound')
Make purchase to remove ads:
window.bridge.post('make_purchase', {})
Location Tracker:
var unregisterHandler = window.bridge.on('gps_location', (parameters)=> {
alert("Longitude: " + parameters.longitude + "Latitude: " + parameters.latitude)
})
Create local notification:
window.bridge.post('create_notification', {title: display, message: message})
Get OneSignal token:
window.bridge.post('onesignaltoken', {}, (results, error) => { alert(results.token); })
Create OneSignal remote notification:
window.bridge.post('create_onesignal_notification', {title: title, subtitle: subtitle, message: message, url: url})
Share:
window.bridge.post('share', {title: "Test", url: "google.com"})
.
I think that’s about it for now.
I’ve asked the developer if he can also add a new configuration item into the Config.plist file, which will allow for the auto refresh of the app to be controlled. Right now, if the SuperView app detects a slow connection then it just reloads your page again and I can’t tell you how frustrating that is!
He said he would add that into the next release anyway so fingers crossed.
There’s more detail I could go into regarding each section but I hope it helps somewhat, or at least give a little more insight as to how it works with our Bubble apps.
Just post questions and I’ll do my best to answer them.
Paul
