feat(PWA): add Install prompts

frontend/src/App.vue

@@ -3,14 +3,16 @@
 		<Menu />
 		<ion-router-outlet id="main-content" />
 		<Toasts />
+
+		<InstallPrompt />
 	</ion-app>
 </template>
 
 <script setup>
 import { IonApp, IonRouterOutlet } from "@ionic/vue"
-import { defineComponent } from "vue"
 
 import { Toasts } from "frappe-ui"
 
 import Menu from "@/components/Menu.vue"
+import InstallPrompt from "@/components/InstallPrompt.vue"
 </script>

frontend/src/components/InstallPrompt.vue

@@ -0,0 +1,87 @@
+<template>
+	<!-- Install PWA dialog -->
+	<Dialog
+		:options="{
+			title: 'Install Frappe HR',
+			message:
+				'Get the Frappe HR app on your home screen. It won\'t take up any space on your phone!',
+			size: 'xs',
+			actions: [
+				{
+					label: 'Install',
+					appearance: 'primary',
+					'icon-left': 'download',
+					handler: ({ close }) => {
+						install()
+						close() // closes dialog
+					},
+				},
+			],
+		}"
+		v-model="showDialog"
+	/>
+
+	<!-- iOS installation info message -->
+	<Popover :show="iosInstallMessage" placement="bottom">
+		<template #body>
+			<div
+				class="mt-[90vh] mx-2 text-center rounded-xl bg-blue-100 px-3 py-5 text-xs text-blue-700 shadow-xl"
+			>
+				<span class="inline-flex items-center whitespace-nowrap">
+					<span>Install Frappe HR on your iPhone: tap&nbsp;</span>
+					<FeatherIcon name="share" class="h-4 w-4 text-gray-700" />
+					<span>&nbsp;and then Add to Home Screen</span>
+				</span>
+			</div>
+		</template>
+	</Popover>
+</template>
+
+<script setup>
+import { ref } from "vue"
+
+import { Dialog, Popover, FeatherIcon } from "frappe-ui"
+
+// Initialize deferredPrompt for use later to show browser install prompt.
+const deferredPrompt = ref(null)
+const showDialog = ref(false)
+const iosInstallMessage = ref(false)
+
+const isIos = () => {
+	// Detects if device is on iOS
+	const userAgent = window.navigator.userAgent.toLowerCase()
+	return /iphone|ipad|ipod/.test(userAgent)
+}
+
+// Detects if device is in standalone mode
+const isInStandaloneMode = () =>
+	"standalone" in window.navigator && window.navigator.standalone
+
+// Checks if should display install popup notification:
+if (isIos() && !isInStandaloneMode()) {
+	iosInstallMessage.value = true
+}
+
+window.addEventListener("beforeinstallprompt", (e) => {
+	// Prevent the mini-infobar from appearing on mobile
+	e.preventDefault()
+	// Stash the event so it can be triggered later.
+	deferredPrompt.value = e
+	if (isIos() && !isInStandaloneMode()) {
+		iosInstallMessage.value = true
+	} else {
+		showDialog.value = true
+	}
+	// Optionally, send analytics event that PWA install promo was shown.
+	console.log(`'beforeinstallprompt' event was fired.`)
+})
+
+window.addEventListener("appinstalled", () => {
+	showDialog.value = false
+	deferredPrompt.value = null
+})
+
+async function install() {
+	deferredPrompt.value.prompt()
+}
+</script>