On your emulated device, launch Chrome app and then navigate to https://10.0.2.2 address again.
Tap on Add Conf App to Home screen button on the screen. An A2HS prompt will show up.
Tap on Add and proceed with the icon. Your app icon will eventually show up on the home screen.
You might have seen the Chrome badge icon being on your app icon. If that's the case, it's possibly an indication of an app being a shortcut rather than a native app on the home screen. And, your emulated device is bundled with an older version of Chrome.
Chrome team introduced a feature called WebAPK for PWA installations. Android creates an APK file on the file while adding a PWA to the home screen and you can manage your app like any other native apps installed on your Android system.
If you see the described behaviour, you need to update Chrome to see how WebAPK works. If there's no Chrome icon on top of your app icon, then you can skip updating the Chrome.
Open Chrome app and tap on three dots next to the address bar.
Tap on Update Chrome.
You need to sign in with your Google account to the Play Store in order to update Chrome on the emulated device. Do login with your account and finalize the installation of the Chrome update.
After updating the Chrome, navigate to https://10.0.2.2 address again. Tap on Add Conf App to Home screen button on the screen. An A2HS prompt will show up. Proceed with adding the app to the home screen.
When looked at the home screen, you might have noticed the difference of the WebAPK installation.
The app on the app is more like a Chrome shortcut, but the one we've just added is packaged and installed like a native app.
Validate the PWA behaving like a native installed app on the system by navigation to the following screens:
Settings > Apps & Notifications > See all x apps > Conf App
As you can observe, Conf App is installed just like any other native app. And, it's much smaller in size compared to other store apps.
When your PWA meets with A2HS criteria, Chrome automatically displays a mini info bar.
As it goes for any sort of user engagement, the time to engage with your users is crucial for a better conversion.
You might want to wait for the right moment to request your user to add your app to their home screen. Such as waiting for a time duration, a navigation pattern, a predicted hot path, and so on.
See Patterns for Promoting PWA Installation for recommended patterns and best practices for notifying the user your PWA is installable.
Starting in Chrome 76, it's possible to prevent the mini-infobar from appearing automatically by calling preventDefault() on the beforeinstallprompt event.
Open app.component.ts file and add the following property and method:
deferredPrompt;
hijackInstallPrompt() {
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 76 and later from showing the mini-infobar
e.preventDefault();
// Stash the event so it can be triggered later.
this.deferredPrompt = e;
// Toggle the install promotion display
this.showInstallPromotion();
});
}
showInstallPromotion() {
// TODO: Toggle the install promotion display
}Also, navigate to ngOnInit() method to add hijackInstallPrompt() call on component init:
async ngOnInit() {
this.hijackInstallPrompt();
}Within the app.component.ts file, add the following property and implement the functionality of the showInstallPromotion() method.
isInstallPromotionDisplayed = false;
showInstallPromotion() {
this.isInstallPromotionDisplayed = true;
}Then, open app.component.html file to add the custom install promotion UI in ion-menu element right after ion-header:
<ion-card button color="tertiary" *ngIf="isInstallPromotionDisplayed">
<ion-card-header>
<ion-card-title>Add to home screen</ion-card-title>
</ion-card-header>
<ion-item>
<ion-icon name="download" slot="start"></ion-icon>
<ion-label>1 click away</ion-label>
<ion-button color="tertiary" slot="end">INSTALL</ion-button>
</ion-item>
<ion-card-content>
By adding our app to your home screen you can enjoy browsing the app offline.
</ion-card-content>
</ion-card>Feel free to customize the UI as you wish. You can use
ion-carddocs andioniconswebsite to see what are your customization options in ionic.
As beforeinstallprompt is not available in Safari, the UI displayed above will never be shown on iOS platform.
Now that we have the install promotion UI in place, we need to add a click handler to it to re-trigger th install prompt event stashed in deferredPrompt property.
Add a click handler to ion-card element we've just added in app.component.html template and re-trigger install prompt event stashed in deferredPrompt property in AppComponent class.
Extend ion-card element in app.component.html by adding the following click handler:
<ion-card (click)="showInstallPrompt()">Open app.component.ts file to add showInstallPrompt() method:
showInstallPrompt() {
// Show the prompt
this.deferredPrompt.prompt();
// Wait for the user to respond to the prompt
this.deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
// Hide the install promotion UI as user just installed it
this.isInstallPromotionDisplayed = false;
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
this.deferredPrompt = null;
});
}Run npm run build:serve:https to build the app for production and serve it on local server over HTTPS protocol.
After running the command, test the functionality on the emulated device.
You need to remove the previously installed app in order to test this functionality. The beforeinstallprompt event will not be fired if it's already installed on the device.
Now you can continue to Step 13 -> Add maskable icons.