Adding Download Pop-up for Mobile App in Custom Frappe App

Sudhanshu · July 20, 2024, 5:13pm

Hi all,

I’ve created a mobile view app in the Frappe framework, similar to the HRMS app in ERPNext. I’d like to replicate the functionality where a pop-up appears on mobile browsers prompting users to download the app.

Can anyone advise on how to achieve this feature in my custom app?

avc · July 20, 2024, 11:49pm

Hi @Sudhanshu:

Check this files:

github.com

frappe/hrms/blob/develop/frontend/src/App.vue

<template>
	<ion-app>
		<ion-router-outlet id="main-content" />
		<Toasts />

		<InstallPrompt />
	</ion-app>
</template>

<script setup>
import { onMounted } from "vue"
import { IonApp, IonRouterOutlet } from "@ionic/vue"

import { Toasts } from "frappe-ui"

import InstallPrompt from "@/components/InstallPrompt.vue"
import { showNotification } from "@/utils/pushNotifications"

onMounted(() => {
	window?.frappePushNotification?.onMessage((payload) => {

This file has been truncated. show original

github.com

frappe/hrms/blob/develop/frontend/src/components/InstallPrompt.vue

<template>
	<!-- Install PWA dialog -->
	<Dialog v-model="showDialog">
		<template #body-title>
			<h2 class="text-lg font-bold">Install Frappe HR</h2>
		</template>
		<template #body-content>
			<p>Get the app on your device for easy access & a better experience!</p>
		</template>
		<template #actions>
			<Button variant="solid" @click="() => install()" class="py-5 w-full">
				<template #prefix><FeatherIcon name="download" class="w-4" /></template>
				Install
			</Button>
		</template>
	</Dialog>

	<!-- iOS installation info message -->
	<Popover :show="iosInstallMessage" placement="bottom">
		<template #body>

This file has been truncated. show original

Hope this helps.

Sudhanshu · July 21, 2024, 4:24am

I tried this

but its not working for me…

avc · July 21, 2024, 8:08am

Hi @Sudhanshu:

HRMS uses Ionic, have you installed it?
Any error in console?

Sudhanshu · July 21, 2024, 10:59am

Thanks for the help man,
the config file was not set properly.

its working now

Sudhanshu · July 21, 2024, 11:00am

Make sure the vite.config.js is set properly and all the assets are in mentioned path