2026-03-04 00:32:23 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
import { toast } from '@/components/ui';
|
|
|
|
|
import { isWebRuntime } from '@/lib/desktop';
|
|
|
|
|
import { usePwaDetection } from '@/hooks/usePwaDetection';
|
2026-05-06 18:38:58 +02:00
|
|
|
import { useI18n } from '@/lib/i18n';
|
2026-06-30 04:47:52 -04:00
|
|
|
import { getDeferredSafeStorage, getSafeSessionStorage } from '@/stores/utils/safeStorage';
|
2026-05-19 10:57:23 -03:00
|
|
|
import { shouldShowPwaInstallToast } from '@/components/update/openCodeUpdateDedup';
|
2026-03-04 00:32:23 +02:00
|
|
|
|
|
|
|
|
type InstallPromptOutcome = 'accepted' | 'dismissed';
|
|
|
|
|
|
|
|
|
|
type BeforeInstallPromptEvent = Event & {
|
|
|
|
|
prompt: () => Promise<void>;
|
|
|
|
|
userChoice: Promise<{ outcome: InstallPromptOutcome }>;
|
|
|
|
|
};
|
|
|
|
|
|
2026-04-06 13:04:36 +03:00
|
|
|
const INSTALL_TOAST_SESSION_KEY = 'pwa-install-toast-shown';
|
2026-05-19 10:57:23 -03:00
|
|
|
const INSTALL_TOAST_DISMISSED_KEY = 'pwa-install-toast-dismissed';
|
2026-04-06 13:04:36 +03:00
|
|
|
|
2026-03-04 00:32:23 +02:00
|
|
|
export const usePwaInstallPrompt = () => {
|
|
|
|
|
const { browserTab } = usePwaDetection();
|
2026-05-06 18:38:58 +02:00
|
|
|
const { t } = useI18n();
|
|
|
|
|
const tRef = React.useRef(t);
|
|
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
|
tRef.current = t;
|
|
|
|
|
}, [t]);
|
2026-03-04 00:32:23 +02:00
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
|
if (typeof window === 'undefined' || !isWebRuntime() || !browserTab) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let deferredPrompt: BeforeInstallPromptEvent | null = null;
|
|
|
|
|
let installToastId: string | number | null = null;
|
|
|
|
|
|
|
|
|
|
const dismissInstallToast = () => {
|
|
|
|
|
if (installToastId === null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
toast.dismiss(installToastId);
|
|
|
|
|
installToastId = null;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const triggerInstall = async () => {
|
|
|
|
|
if (!deferredPrompt) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const promptEvent = deferredPrompt;
|
|
|
|
|
deferredPrompt = null;
|
|
|
|
|
dismissInstallToast();
|
|
|
|
|
|
|
|
|
|
await promptEvent.prompt();
|
|
|
|
|
const { outcome } = await promptEvent.userChoice;
|
|
|
|
|
if (outcome === 'accepted') {
|
2026-05-06 18:38:58 +02:00
|
|
|
toast.success(tRef.current('pwa.installPrompt.started'));
|
2026-03-04 00:32:23 +02:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onBeforeInstallPrompt = (event: Event) => {
|
|
|
|
|
const installEvent = event as BeforeInstallPromptEvent;
|
|
|
|
|
if (typeof installEvent.prompt !== 'function') {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
installEvent.preventDefault();
|
|
|
|
|
deferredPrompt = installEvent;
|
|
|
|
|
|
2026-06-30 04:47:52 -04:00
|
|
|
const localStorage = getDeferredSafeStorage();
|
2026-04-06 13:04:36 +03:00
|
|
|
const sessionStorage = getSafeSessionStorage();
|
2026-05-19 10:57:23 -03:00
|
|
|
const decision = shouldShowPwaInstallToast({
|
|
|
|
|
dismissed: localStorage.getItem(INSTALL_TOAST_DISMISSED_KEY),
|
|
|
|
|
sessionShown: sessionStorage.getItem(INSTALL_TOAST_SESSION_KEY),
|
|
|
|
|
hasActiveToast: installToastId !== null,
|
|
|
|
|
});
|
|
|
|
|
if (!decision) {
|
2026-03-04 00:32:23 +02:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-06 13:04:36 +03:00
|
|
|
sessionStorage.setItem(INSTALL_TOAST_SESSION_KEY, 'true');
|
|
|
|
|
|
2026-05-06 18:38:58 +02:00
|
|
|
installToastId = toast.info(tRef.current('pwa.installPrompt.description'), {
|
2026-03-04 00:32:23 +02:00
|
|
|
duration: Infinity,
|
|
|
|
|
action: {
|
2026-05-06 18:38:58 +02:00
|
|
|
label: tRef.current('pwa.installPrompt.action'),
|
2026-03-04 00:32:23 +02:00
|
|
|
onClick: () => {
|
|
|
|
|
void triggerInstall();
|
|
|
|
|
},
|
|
|
|
|
},
|
2026-05-19 10:57:23 -03:00
|
|
|
cancel: {
|
|
|
|
|
label: tRef.current('pwa.installPrompt.dismiss'),
|
|
|
|
|
onClick: () => {
|
2026-06-30 04:47:52 -04:00
|
|
|
getDeferredSafeStorage().setItem(INSTALL_TOAST_DISMISSED_KEY, 'true');
|
2026-05-19 10:57:23 -03:00
|
|
|
dismissInstallToast();
|
|
|
|
|
},
|
|
|
|
|
},
|
2026-03-04 00:32:23 +02:00
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onAppInstalled = () => {
|
|
|
|
|
deferredPrompt = null;
|
|
|
|
|
dismissInstallToast();
|
2026-05-06 18:38:58 +02:00
|
|
|
toast.success(tRef.current('pwa.installPrompt.installed'));
|
2026-03-04 00:32:23 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.addEventListener('beforeinstallprompt', onBeforeInstallPrompt as EventListener);
|
|
|
|
|
window.addEventListener('appinstalled', onAppInstalled);
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
dismissInstallToast();
|
|
|
|
|
window.removeEventListener('beforeinstallprompt', onBeforeInstallPrompt as EventListener);
|
|
|
|
|
window.removeEventListener('appinstalled', onAppInstalled);
|
|
|
|
|
};
|
|
|
|
|
}, [browserTab]);
|
|
|
|
|
};
|