Forum Documentation Showcase Pricing Learn more

SuperView, Bubble, OneSignal and More

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.

image

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…

image

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);

});

image

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

5 Likes

Thanks a lot for this, @pork1977gm! I’ll carefully go over this when I have my app ready for iOS. You rock!!! :metal:

lol you’re welcome!

@pork1977gm thank you for this, wonderful work here and clarity. A lot of work! Much appreciated.

My one issue that makes my situation distinct from the other guys is I’m not using Superview I’m using another webview wrapper called Webview Gold. Would you happen to know off-hand whether the script bridging technique is exclusive to Superview?

I’m going to try to follow the bridge technique sequence to see if I can retrieve the PID. Right now I believe my app is properly setup to have users accept push notifications. Problem is I have no idea how to get that PID back into my bubble database. I can mass send my users a push through OneSignals’s dashboard, but I need to figure out how to send individually to users when instances occur.

Ok, so I’m not familiar with WebView Gold unfortunately but I would think that if it supports bridging then you’d see something in the documentation for it. The bridging methods in SuperView will probably not work because method names will be different.

What version of the WebView Gold app are you using? I’m just looking at the documentation now, is it the iOS version? send us a link to their documentation and I’ll see if I can figure it out for you.

Yep ok will do.

1 Like

@pork1977gm, that would be amazing if you could help me out with this!

This is their documentation link. And yes to iOS version. The version I used was v6.5, and this is a v6.6 documentation, but I think they are basically the same.
https://www.webviewgold.com/docs/iOS/?downloaded=true&update=no

Ok will take a look. I’ve updated the original post too with a little more on the JStoBubble event.
I don’t think any of this will work for you though, as it’s a different wrapper but try it anyway. I’ll get back to you later on once I’ve had a read.

Hi Paul,

Thanks for your extensive walkthrough! I’m planning in integrating onsignal and this will help tremendously.

G

1 Like

Am I reading this right…
According to their documentation, it states this:

Do you want to get each individual user ID on your server for further processing and individual user push messages? Just activate the „kPushEnhanceUrl“ option in Constant.swift (by switching the value from false to true) in order to append ?onesignal_push_id=XYZ to your WebView URL. If your WebView URL is https://www.example.org, WebViewGold will call https://www.example.org?onesignal_push_id=XYZ instead. Only your FIRST URL request will get that GET variable, so save it in a session or in a cookie to access it on your linked pages.

Have you tried setting this value, kPushEnhanceUrl to true? If the WebView app appends ?onesignal_push_id=XYZ to your URL upon first launch, where I’m assuming XYZ would be replaced with the playerId, then I wonder if you could do this in Bubble…

Your welcome, hope it helps!

Hi @pork1977gm, how can I only trigger this action at “first URL request”… Does “first URL request” mean only the first time someone uses my app? Or each time someone launches the app (each new session / page load)?

And I do have the kPushEnhanceURL and other push specific values set to true. What a great discovery! Let me see what I can do.

Impossible for me to say, but at a guess I would think it would be the first time the WebViewGold app runs. It will probably set that URL upon each time it launches. If you killed the app and relaunched it again then I would expect it to put the URL back in. If it was resumed from the background then I wouldn’t expect it to there.

By putting a condition on the Page Is Loaded - Get URL (only when the parameter is not empty) it wouldn’t matter if it’s there or not, because that condition would only be evaluated as true when it is there. Let me know if it actually works!

Holy smokes, it works!!! I’m so pumped!

I followed exactly how you outlined @pork1977gm, and then added the “step 2” necessary capture step (screenshot below) action, and it retrieved the Player ID right from the URL when I tested it by loading my app with both my iPhone, and then my iPad. I ended up with the two correct PID’s in my user data.

The only cold water moment is it appears that it will only retrieve the Player ID from the URL once the page is reloaded. So if a user registers for my app, and I’m doing a series of hide and show groups (as opposed to loading pages), it won’t show up in the URL. However, as you mentioned @pork1977gm , if the app is closed and relaunched then the Player ID will display and be captured.

As a workaround, I can also trigger users to reload their apps by periodically pushing faux (or real) updates to force them to hit the “reload the app” banner.

I’m just really happy this worked, and on the first try! Almost nothing works on the first try, haha. I cannot thank you enough @pork1977gm.

1 Like

Haha… first try, never working? I know that feeling too well !!
I’m happy it’s working Mark :smiley: :+1:

Hi!

I use the same webview wrapper as you. When I click the notification, it opens the app, but the app “crashes” right after (it closes). Does it happens with yours?

And for some reason, the app doesn’t “memorize” the user, so, after a certain time, I have to login again. Does it happens with yours too?

Thanks!

That sounds like you’re missing one of these entries in plist config file. Maybe one of the description rows like “Privacy - Location When In Use Usage Description” or “Privacy - Location Usage Description” are missing.

Does it produce any errors in the debug window?

Just to help answer the question, although directed at Mark, I do occasionally have issues with users being logged out, but it doesn’t happen all the time and I’m not sure how to stop it from happening either.

You could probably handle the problem in Bubble, using cookies perhaps, but it’s not very secure when storing logon credentials in cookies! so I don’t recommend it.

Hello,
Do you have a problem with crashing app when you touch notification on iOS? I’m using webviewgold wrapper and I’ve tried different OneSignal plugins for bubble and apart official all of them are crashing the app. I would love to use official one but there is no option to push notification for PlayerID. There is option to set tags and I could use this but I don’t know how I could send tag to OneSignal PlayerID from bubble.