1. Prerequisites
You must have Apploy installed on your store.
Ensure the PWA plan is activated.
Make sure the Apploy theme extension is enabled on your theme.
2. Check PWA Installation Status
On android, browsers show a default prompt to ask users to install the app. We suppress the default prompt so we can show a custom prompt. You can use the deferredPrompt to trigger the browser prompt from a custom UI.
On iOS, there is no feedback provided by browsers to know if a PWA is available to install. We consider the PWA to be not installed if the user is visiting the mobile website directly.
// Android
const pwaIsInstalled = !window.apployAppManager.deferredPrompt;
//iOS
const pwaIsInstalled = window.apployAppManager.isPWA();
3. Display Custom Install Banner
After detecting the status of the PWA installation you can show your banner at any instance.
if(!pwaIsInstalled){
// show your install banner differently on Android and iOS
if(window.apployAppManager.isAndroid()){
// show Android banner
}
if(window.apployAppManager.isIOS()){
// show iOS banner
}
}
4. Handle Install Button Click
PWA installation are handled differently on Android and iOS. Follow the code below specifically for Android.
// For Android only, use the code below when install button is clicked
try {
await this.deferredPrompt.prompt();
const { outcome } = await this.deferredPrompt.userChoice;
if (outcome === 'accepted') {
// Do not remove the next line, has no visual impact
window.apployAppManager.handlePWAInstalled();
}
} catch (error) {
console.error('PWA install prompt error:', error);
}
5. Customize Install Banner Appearance
You can use the Additional CSS settings to apply custom styling to the app install banner. Here's the structure of the banner with every component.
<div
class="apploy-app-install-banner"
id="apploy-app-install-banner"
>
<button
class="apploy-app-install-banner-close"
id="apploy-app-install-banner-close"
aria-label="Close banner"
>
✕
</button>
<div class="apploy-app-install-banner-content">
<img
src="{{ shop.brand.square_logo | image_url: width: 50 }}"
alt="{{ shop.brand.name }}"
width="50"
height="50"
class="apploy-app-install-banner-logo"
id="apploy-app-install-banner-logo"
>
<div class="apploy-app-install-banner-text" id="apploy-app-install-banner-text">
<h3 class="apploy-app-install-banner-title" id="apploy-app-install-banner-title">
{{ block.settings.app_install_banner_title }}
</h3>
<p class="apploy-app-install-banner-subtitle" id="apploy-app-install-banner-subtitle">
{{ block.settings.app_install_banner_subtitle }}
</p>
</div>
<button class="apploy-app-install-button" id="apploy-app-install-banner-button">
{{ block.settings.app_install_button_text }}
</button>
</div>
</div>
For assistance with setup, contact us via chat for our premium customer concierge service.