Add install popup for PWA in AdminPanelProvider

This commit is contained in:
dhanabalan
2025-11-04 16:32:02 +05:30
parent e92ab121d6
commit 6dc9b89851

View File

@@ -99,6 +99,7 @@ class AdminPanelProvider extends PanelProvider
public function boot(): void public function boot(): void
{ {
FilamentView::registerRenderHook( FilamentView::registerRenderHook(
'panels::head.end', 'panels::head.end',
fn() => ' fn() => '
@@ -113,6 +114,71 @@ class AdminPanelProvider extends PanelProvider
</script> </script>
' '
); );
/**
* 2. Add install popup for mobile/desktop
*/
FilamentView::registerRenderHook(
'panels::body.end',
fn() => '
<script>
let deferredPrompt;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;
if (document.getElementById("install-banner")) return;
const banner = document.createElement("div");
banner.id = "install-banner";
banner.innerHTML = `
<div style="
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
background: var(--fi-color-primary, #007bff);
color: white;
padding: 15px;
border-radius: 10px;
text-align: center;
font-family: system-ui, sans-serif;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
z-index: 99999;
">
<span style="font-size: 16px;">📱 Install <b>Quality Dashboard</b> App?</span><br>
<button id="installBtn" style="
margin-top: 10px;
background: white;
color: var(--fi-color-primary, #007bff);
border: none;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
">Install</button>
</div>
`;
document.body.appendChild(banner);
document.getElementById("installBtn").addEventListener("click", async () => {
banner.remove();
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log("User install choice:", outcome);
deferredPrompt = null;
});
});
window.addEventListener("appinstalled", () => {
console.log("🎉 PWA installed successfully!");
const banner = document.getElementById("install-banner");
if (banner) banner.remove();
});
</script>
'
);
} }