A key benefit of progressive web apps (PWA) is that they can be installed on the device, and subsequently run from an app icon without requiring the surrounding browser. This capability provides a native look to your app. In this blog we show how to help end users discover this option and guide them to install the app when they first access it.
Oracle Visual Builder has been supporting mobile progressive web apps for a while now, starting with mobile apps and now you can turn any web app to be deployed as PWA. In the latest version of Visual Builder we also added responsive templates to the default web app that adjust nicely on mobile devices. The only part that the web option is missing when deployed as a PWA is the prompt that we show when your PWA app was developed using the mobile option. It is quite easy to replicate that behavior for web apps too – and this is what we show in the video below.
When you enable PWA setting on your mobile app and stage the app and run the staged version, you'll notice a little install icon on the end side of the URL address in your browser. If you'll click it you'll get a browser dialog offering you the ability to install the app. This is a bit harder to find on a mobile phone where the "Install app" option is one of the browser's menu options.
But not all end users are going to notice this option – so we would likely want to help them discover the install option and streamline the install experience.
In our demo we are using a new event listener that is added to the shell page of your web app once you enable PWA – vbBeforeAppInstallPrompt – this event listener can be used to bring up a dialog (or any other UI component) during the page initial load. In our sample we add a dialog component with a message encouraging installation and an install button. The action chain we create receives an "event" parameter that we assign to a page variable of type Any – so we could use it later. This variable contains the pointer to the browser's native install option (for Chrome) that we can then use in a JavaScript function that we add to the install button. This JS code simply invokes the browser's native install prompt.
The JavaScript used for the function is:
installPWA(installPromptEventPayload) {
var installPromptEvent = installPromptEventPayload.getInstallPromptEvent();
if (installPromptEvent) {
// Call prompt() to display the official prompt
installPromptEvent.prompt().catch(function () {
// In case of DOMException, ask again
return false;
});
// Wait for the user to respond to the prompt
return installPromptEvent.userChoice.then(function (choiceResult) {
if (choiceResult.outcome === 'accepted') {
console.log('user accepted ');
} else {
console.log('user cancelled ');
}
// Don't ask the user again
return true;
});
}
return Promise.resolve(false);
}
One thing we didn't do in the demo but you would likely want to do is add a component close event on the dialog after the call to the JS function. This will clear the dialog after the installation is completed.
If you are only interested in promoting the install for mobile users of your web app – you can add an if action to your action chain that checks the size of the device accessing the app and only show the prompt when it is a small device.