How To Programmatically Switch Display From Standalone To Fullscreen In Pwa

My PWA works as expected when I set the 'display' of my manifest to 'fullscreen' or 'standalone'. But, I want my users to be able to toggle back and forth in settings. Is there a w

Solution 1:

try this if you want to be sure that it will work in all browsers.

functiongetFullScreen() {
    if (document.body.requestFullscreen) {
        document.body.requestFullscreen();
    } elseif (document.body.mozRequestFullScreen) { /* Firefox */document.body.mozRequestFullScreen();
    } elseif (document.body.webkitRequestFullscreen) { /* Chrome, Safari and Opera */document.body.webkitRequestFullscreen();
    } elseif (document.body.msRequestFullscreen) { /* IE/Edge */document.body.msRequestFullscreen();
    }
}

Solution 2:

use document.body.requestFullscreen();

var videoElement = document.getElementById("videoElement");
videoElement.requestFullscreen();

Check https://developers.google.com/web/fundamentals/native-hardware/fullscreen/