Add install popup for PWA in AdminPanelProvider
This commit is contained in:
@@ -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>
|
||||||
|
'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user