I have a flutter PWA app and I'm able to install it on Home screen manually by triggering deferred prompt.
Q1. Now I want to open the PWA from browser on tap of a button. How we can do this in flutter ?
Q2. How we can permanently add a banner on top of site which says open app and if app is not installed it opens play store and if installed it opens the app. Something like we see when we open reddit in mobile browser.
My code so far for listening for beforeinstallprompt and check for standalone is below
@override
void initState() {
// TODO: implement initState
super.initState();
isDesktopPlatform = (Platform.isWindows || Platform.isMacOS || Platform.isLinux);
if(kIsWeb){
//var deviceType = getSmartPhoneOrTablet();
if (Platform.isAndroid || Platform.isIOS){
//check if browser version supports the api
checkAppInstalled ().then((value) {
if(value){
setState(() {
add2HomeTitle = "App is already Installed";
add2HomeVisible = true;
appAlreadyInstalled = true;
//if(Platform.isIOS){
DART_WEB_HTML.window.alert('checkAppInstalled executed');
//}
});
}
if (DART_WEB_HTML.window.matchMedia('(display: standalone)').matches) {
// do things here
//PWA is already installed do Nothing
//if(Platform.isIOS){
DART_WEB_HTML.window.alert('standalone app');
//}
setState(() {
//btnAdd.style.display = 'block';
add2HomeTitle = "Open Stock IT";
add2HomeVisible = false;
isStandalone = true;
});
}
DART_WEB_HTML.window.addEventListener('beforeinstallprompt', (e)
{
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
//if(Platform.isIOS){
DART_WEB_HTML.window.alert('beforeInstalledprompt');
//}
// Update UI notify the user they can add to home screen
setState(() {
//btnAdd.style.display = 'block';
add2HomeTitle = "Add To Home";
add2HomeVisible = true;
});
});
});
}
}
}
Future<bool> checkAppInstalled () async {
DART_WEB_HTML.RelatedApplication relatedApps = await DART_WEB_HTML.window.navigator.getInstalledRelatedApps();
if(relatedApps != null && (relatedApps.url.toString().contains('https://myapp.web.app') || relatedApps.url.toString().contains('https://myapp.firebase.com'))){
return true;
}
return false;
}