PWA Standalone mode

Ask us anything
1

When using the published app as a PWA on Android, it takes up the native bottom nav controls.
According to my sidekick developer (aka chatGPT) it is possible to set a ‘standalone’ value for the ‘display’ property.
This should show the bottom nav but hide the top address bar - like a native application.

Is this value possible to set up in WW?

2

Bumping this.
@Joyce or @flo ?

3

Hey @Waz! Sorry for the delay.
For the moment it’s not possible, but it’s very relevant, I’ll propose to the team to dig deeper into the subject.
But I can’t give you a date on if and when it will be done.

1 Like
4

Awesome, thanks @Kevin.

5

I’m not sure if there’s a native solution to this yet, but here’s a snippet that works for me.

// Function to check if the application is running in standalone mode
function isStandaloneMode() {
    // Check for standalone mode using matchMedia or navigator.standalone
    const isStandalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || window.navigator.standalone;

    // Return "true" if in standalone mode, otherwise "false"
    return isStandalone ? "true" : "false";
}

// Call the function and store the result
const standaloneModeStatus = isStandaloneMode();

// Output the result
console.log("Standalone mode:", standaloneModeStatus);

return standaloneModeStatus;

I bind it to a variable on app load, and then use it to dynamically adjust padding.

6

They now have an option in the PWA Settings!

3 Likes