Forum Academy Marketplace Showcase Pricing Features

Listen for bubble refresh banner via?

Anyone know of a way to ‘watch’ for this to be visible? Or a way to watch for the bubble version to update and then publish a yes/no value? My use case is to present a custom dialog that lets the user know to refresh. I’ve tried all the JavaScript ideas that I had to no avail.

I’d like to display something like this instead, triggered by the above:

upgradeDemo2


Any help is appreciated! :pray:

1 Like

$10 quick bounty? $15?

“If You Ain’t First, You’re Last!” - Ricky Bobby

@lantzgould something like this?

Close, but I’m looking to use a floating group to control the look and feel - instead of using css to change the banner itself. Ideally, the banner would be hidden, and mine would show and act the same.

This change (along with many other app notifications) comes across through a Web Socket (WS) to communicate the update to your Bubble application. The only, sort of proper, way to do something different currently is to eavesdrop/intercept the WS call. This is highly ill-advised. I bet there is some sort of hack you could do in jquery to intercept the visibility change further down the chain. However, being notified by the message via the WS is the first chance you have to do something different in the app.

If you put the following code in your header/script area it will intercept all WS calls. I put a quick if block to filter for the last update message ‘h last-change’. I’m not advising you or anyone use this code. I’m definitely not interesting in the bounty but maybe someone else wants to take this and run with it for you.

<script type="text/javascript">
function listen(fn){
  fn=fn||console.log
  let property=Object.getOwnPropertyDescriptor
  (MessageEvent.prototype,"data")
  const data=property.get
  function lookAtMessage(){ //to replace get function
    let socket=this.currentTarget instanceof WebSocket
    if(!socket){return data.call(this)}
    let msg=data.call(this)
    Object.defineProperty(this,"data",{value:msg}) //anti-loop
    fn({data:msg,socket:this.currentTarget,event:this})
    return msg
  }
  property.get=lookAtMessage
  Object.defineProperty
  (MessageEvent.prototype,"data",property)
}
listen( ({data})=> { if(data.startsWith('h last-change')) { alert('app updated'); console.log(data); } })
</script>

ref: javascript - Intercept WebSocket messages - Stack Overflow

1 Like

What about this?

Here is the demo: https://ezcodedemo3.bubbleapps.io/version-test/custom_refresh

You can change the refresh bar to a popup with different styling.

Hope that helps. :blush:

1 Like

Thank you, this is leading me on the right direction.

Proof of concept:

Thanks all!

2 Likes

@J805 nice find. Yep, this is the jQuery solution I referenced in my first comment, watching for the CSS to change and then responding to that change and modifying the dom accordingly.

1 Like