refactor(pwa): handle pwa install in manager

Signed-off-by: Kai Henseler <kai.henseler@strato.de>

Author: bromiesTM

src/lib/IONOS/components/notifications/NotificationBanner.svelte

@@ -9,29 +9,11 @@
 	import Link from '$lib/IONOS/components/common/Link.svelte';
 	import { NotificationType, type Notification } from '$lib/IONOS/stores/notifications';
 	import { createEventDispatcher, getContext } from 'svelte';
-	import { isIOSDevice, isSafari } from '$lib/IONOS/services/pwa';
 
 	const dispatch = createEventDispatcher();
 	const i18n = getContext<Readable<I18Next>>('i18n');
 
 	export let notification: Notification;
-	export let deferredPrompt: any = null;
-
-	const showIOSInstructions = isIOSDevice() && isSafari();
-
-
-	const handlePWAInstall = () => {
-		if (showIOSInstructions) {
-			dispatch('showDialog');
-		} else if (deferredPrompt) {
-			deferredPrompt.prompt();
-			deferredPrompt.userChoice.then((choiceResult: any) => {
-				if (choiceResult.outcome === 'accepted') {
-					dispatch('dismiss', { notification });
-				}
-			});
-		}
-	};
 </script>
 
 

src/lib/IONOS/components/notifications/NotificationManager.svelte

@@ -13,7 +13,9 @@
 	import {
 		shouldShowPWAPrompt,
 		dismissPWAPrompt,
-		triggerPWAInstall
+		triggerPWAInstall,
+		isIOSDevice,
+		isSafari
 	} from '$lib/IONOS/services/pwa';
 	import { deferredPrompt, isPWAInstallable, setupGlobalPWAListener, clearDeferredPrompt } from '$lib/IONOS/stores/pwa-prompt';
 
@@ -99,7 +101,7 @@
 			actions: [{
 				label: $i18n.t('Install', { ns: 'ionos' }),
 				handler: () => {
-					showPWADialog = true;
+					handlePWAInstall();
 				}
 			}],
 			dismissible: true,
@@ -108,34 +110,46 @@
 	};
 
 	const handlePWAInstall = async () => {
-		if ($deferredPrompt) {
+		const showIOSInstructions = isIOSDevice() && isSafari();
+
+		if (showIOSInstructions) {
+			showPWADialog = true;
+		} else if ($deferredPrompt) {
 			const accepted = await triggerPWAInstall($deferredPrompt);
 			if (accepted) {
 				clearDeferredPrompt();
+				removeNotification({ type: NotificationType.PWA_INSTALL } as Notification);
 			}
 		}
-		showPWADialog = false;
-		removeNotification({ type: NotificationType.PWA_INSTALL } as Notification);
 	};
 
 	const handlePWADialogDismiss = () => {
 		showPWADialog = false;
 	};
+
+	const handlePWADialogInstall = async () => {
+		if ($deferredPrompt) {
+			const accepted = await triggerPWAInstall($deferredPrompt);
+			if (accepted) {
+				clearDeferredPrompt();
+			}
+		}
+		showPWADialog = false;
+		removeNotification({ type: NotificationType.PWA_INSTALL } as Notification);
+	};
 </script>
 
 <div class="sticky top-0 flex flex-col w-full z-50">
 	{#each $notifications as notification }
 		<NotificationBanner
 			{notification}
-			deferredPrompt={$deferredPrompt}
 			on:dismiss={dismissHandler}
-			on:showDialog={showPWADialog = true }
 		/>
 	{/each}
 </div>
 
 <PWAInstallDialog
 	bind:show={showPWADialog}
-	on:install={handlePWAInstall}
+	on:install={handlePWADialogInstall}
 	on:close={handlePWADialogDismiss}
-/>
+/>