Hi
the rules for the app install banners have changed…
Regards
Tom
1 Like
Thanks man, good to know!
BTW I wonder how much using these (yet) fragmented APIs between Apple/Google is more useful than doing a “trick” by popping a small toast and asking user to click share > add to home screen sequence.
Of course its clear that conversion rate and the user journey with the API is better - but how much better really. At least I decided for now to skip using these APIs and just prompt user with a toast banner after first use. Will measure results and see how that goes.
1 Like
Still find it a drag to debug pwa at all
Let alone spend much time getting this to work! 
Your approach may indeed be better indeed for consistency, also to control the ui on the popup
“U like this app? Put it on your homescreen!”
Yup:) for now just based on the platform (iOS/Android) I am showing this toast in either bottom of the screen (iOS) or top (Android):
@morphist cool idea!
may I ask how does the code to effectively add the app to the home screen look like? same code for all browsers?
furthermore how do you check if the toast should be displayed or not in case the pwa is accessed for example on a laptop and not on a mobile device?
I will share what I have so far. It is not perfect (yet;):
- in the app I have the first page a user is facing is a “walkthrough” (simple slider explaining what to do), In this page in the life cycle hook I have:
ionViewDidLoad() {
if (!this.foundation.appIsOnDevice) {
// the app is in PWA mode, we proceed to detect device and browser support:
let userAgent = navigator.userAgent;
if (userAgent.match(/Android/i)) {
//code for "add to desktop" for Android:
this.foundation.toaster.presentToast("Tap ' ... ' in the top panel of your browser and then 'Add to Home Screen' to get full screen mode and faster loading times...", "top", 'speech-bubble-android')
}
else if (userAgent.match(/iPhone/i) || userAgent.match(/iPad/i)) {
//code for "add to desktop" for iOS:
this.foundation.toaster.presentToast("Tap 'Share' in the bottom panel of your browser and then 'Add to Home Screen' to get full screen mode and faster loading times...", "bottom", 'speech-bubble-ios')
}
}
}
- now you will see I am calling “foundation” provider in the code above. Foundation is the layer that provides data across any pages in the app. Here is how I detect device vs browser in app.component.ts:
this.foundation.appIsOnDevice = !this.platform.url().startsWith('http');
- now in the toaster (it is a provider available via foundation) I use just the toastCtrl component of Ionic:
private toast = null;
constructor (
private toastCtrl: ToastController
) {
}
presentToast(message, position, cssclass) {
// prevent toasts from "stacking":
if (this.toast) {
this.toast.dismiss();
this.toast = null;
}
// create a toast:
this.toast = this.toastCtrl.create({
message: message,
closeButtonText: "OK",
showCloseButton: true,
cssClass: cssclass,
position: position,
});
this.toast.present();
}
- so in iOS the “share” button of the browser is typically in the bottom center of the screen, while on Android it is top right. I place toasts accordingly and also add this extra bubbly tail to help “point” to it clearer in page.walkthrough.scss:
.speech-bubble-android .toast-wrapper:after {
content: '';
position: absolute;
bottom: 0;
left: 100%;
width: 0;
height: 50%;
border: 20px solid transparent;
border-top-color: black;
border-bottom: 0;
border-left: 0;
margin-left: -10px;
margin-bottom: -20px;
}
.speech-bubble-ios .toast-wrapper:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: black;
border-bottom: 0;
border-left: 0;
margin-left: -5px;
margin-bottom: -10px;
}
So this gives me that:
in IOS:
in Android:
Only issue with toast is that the official way offers more goodies (add to list of apps, etc). Maybe minor for now
Hope there will be an angular provider published sometime to cater for it all
@morphist thx for the code 
now we just need a feature action which allow us to trigger manually the addition of the link to the home screen 
@Tommertom definitely cool, the link following the one you posted, https://developers.google.com/web/fundamentals/app-install-banners/native, is also super interesting to link a website with its mobile app
1 Like
yeah. I saw that one… Google is really picking up the app-web integration
1 Like