Detect Standalone mode of browser with JavascriptToBubble

Hey Bubblers!

I know, this topic has been discussed already but i am still facing an issue here.
Since my app is supposed to run as an pwa, i would like to detect if the user is running the app in standalone mode. I am using the Toolbox with the javascripttobubble function, as you can see in the screenshot.
But somehow, i dont get a value back. It doesnt change at all. The return value remains NO.

What am i doing wrong?
Any hint would be appreciated!


pwa_jstobubble2

I spent a lot of time finding this… not sure why it was so hard.

if (window.matchMedia(’(display-mode:browser)’).matches) {bubble_fn_pwa(true); }else {bubble_fn_pwa(false);}

Works fine (note I have browser in there, you can put in standalone also of course)

.matches already returns true of false, so that’s not the issue. @Phil83, note that the value will not instantaneously be available, so if you’re expecting JStoBubble’s value output to be populated in the next workflow step, it won’t be.

What you do is select the Trigger event option in JStoBubble and trigger a workflow based on that trigger from JStoBubble. That event triggers once JStoBubble has published its value.

Hi Keith,

thank you for your response on that. I followed your hint, but still no success. I dont know what i am doing wrong (see screenshot) but it still doesnt detect the standalone mode.


You sure my solution doesn’t work? It worked on my PC

Hi Troy! Thank you for your response. I tried your solution, however it doesnt work :smiley:
I tried it with Chrome, Safari and Firefox. All in browser and standalone mode. The Return Value doesent change at all. Could you add a screenshot of your workflow Run javascript?

Hope this helps.

if (window.matchMedia(‘(display-mode:browser)’).matches) {bubble_fn_pwa(true); }else {bubble_fn_pwa(false);}


image
image
image
image

1 Like

Thanks again for your kind support. I have exactly the same what you have in the screenshots. But still no change. The return value remains NO. Are there any settings to do in order to run the Toolbox properly? I am lost :confused:
I took a look in the browser console. It is logging an error referring to the js.

Sorry, I have sent you every screenshot I can. There is nothing else.

1 Like

Here’s the exact code you need in your Run JavaScript action:

bubble_fn_pwa(window.matchMedia('(display-mode: standalone)').matches)

1 Like

Hi Keith. Now it works apparently.
What i did?
I removed the Javascript to Bubble Element from my page and added it again. I used your code (which is actually the same i used before ) and apparently it works.

Works fine with Chrome and Safari. However, not with Firefox. Probably firefox doesnt provide the information of standalome/browser. Any clue on that?

1 Like

This was simple code but didn’t work in my app, so asked GPT to craft a code and it worked !

function fn_bubble_pwa(evt) {
let displayMode = ‘browser’;
if (evt.matches) {
displayMode = ‘standalone’;
}
// Log display mode change to analytics
console.log(‘DISPLAY_MODE_CHANGED’, displayMode);
}

// Call fn_bubble_pwa when the page loads
fn_bubble_pwa(window.matchMedia(‘(display-mode: standalone)’));

// Add an event listener to monitor changes in display mode
window.matchMedia(‘(display-mode: standalone)’).addEventListener(‘change’, fn_bubble_pwa);