JS Toolbox Detect Standalone Mode and Install to Home Screen PWA

[mango74]

I know this has been asked a couple of times in this forum but I’m having trouble setting up a popup to display the message “Install to Home Screen” when the user is looking at my app on a phone browser.

I can either get it to always show or never show, regardless of if I am on my phone’s browser or opening the app from its installed version on my phone’s home screen version.

The popup with the Javascript to Bubble settings:

The conditional settings for the popup:

The workflow action and the javascript code:

What I would like to do when a user visits my domain:

On mobile:

• User has installed the PWA to their home screen - Don’t Show
• User has not installed the PWA to their home screen - Show

On desktop

• Show a page with a QR code so that once scanned it brings the user to the mobile version where the user can see the popup to install the PWA to their phone’s home screen.

Is anyone able to see what I am doing wrong or have suggestions for how to detect standalone mode and show this popup?

[mango74]

I was able to figure this out and wanted to share what I did in case it helps anyone.

This detects if the user is in standalone mode, if yes, do nothing, if no, show a popup, if screen width is > 600 px, send them to a URL.

There may be a better way, but this is how I did it.

Step 1:
Install the Toolbox plugin - Add two Javascript elements to the top of the page. I made them 1x1px and they show on page load.

pwa1

pwa2

Step 2:
On page load, run javascript:

The code:
bubble_fn_pwa1(window.navigator.standalone || window.matchMedia(‘(display-mode: standalone)’).matches)

Step 3:
Start a workflow on the pwa1 javascript element that will consist of three actions.

1: Run Javascript

The code:
bubble_fn_pwa2(
(() => {
const userAgent = navigator.userAgent;
console.log(‘User Agent:’, userAgent);

if (/iPhone/i.test(userAgent)) {
  console.log('Is iPhone');
  return 'iPhone';
} else if (/Android/i.test(userAgent)) {
  console.log('Is Android');
  return 'Android';
} else if (/Windows Phone/i.test(userAgent)) {
  console.log('Is Windows Phone');
  return 'Windows Phone';
} else {
  console.log('Unknown device');
  return null; // or any default value for other cases
}

})()
);

2: Animate the popup

3: Open an external link

[yuehong]

Thank you for sharing your solution. Your detailed explanation was incredibly beneficial and helpful to me. The time and effort you put into providing such a comprehensive response are truly appreciated.

[mango74]

Thanks so much for letting me know. I’m glad it was helpful!