poc/pds
1
0
Fork 1
Code Issues Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Add PWAServiceProvider and pwa-install.js for PWA integration

Browse Source
This commit is contained in:
dhanabalan
2025-11-04 17:11:22 +05:30
parent 9cf5e34568
commit ba60c41951
3 changed files with 174 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
app/Providers/Filament/AdminPanelProvider.php
View File

@@ -97,89 +97,89 @@ class AdminPanelProvider extends PanelProvider
->plugin(FilamentSpatieRolesPermissionsPlugin::make()); ->plugin(FilamentSpatieRolesPermissionsPlugin::make());
} }
public function boot(): void // public function boot(): void
{ // {
FilamentView::registerRenderHook( // FilamentView::registerRenderHook(
'panels::head.end', // 'panels::head.end',
fn() => ' // fn() => '
<link rel="manifest" href="' . asset('manifest.json') . '"> // <link rel="manifest" href="' . asset('manifest.json') . '">
<meta name="theme-color" content="#007bff"> // <meta name="theme-color" content="#007bff">
<script> // <script>
if ("serviceWorker" in navigator) { // if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js") // navigator.serviceWorker.register("/sw.js")
.then(reg => console.log("Service Worker registered:", reg.scope)) // .then(reg => console.log("Service Worker registered:", reg.scope))
.catch(err => console.error("Service Worker registration failed:", err)); // .catch(err => console.error("Service Worker registration failed:", err));
} // }
</script> // </script>
' // '
); // );
/** // /**
* ✅ 2. Add install popup for mobile/desktop // * ✅ 2. Add install popup for mobile/desktop
*/ // */
FilamentView::registerRenderHook( // FilamentView::registerRenderHook(
'panels::body.end', // 'panels::body.end',
fn() => ' // fn() => '
<script> // <script>
let deferredPrompt; // let deferredPrompt;
window.addEventListener("beforeinstallprompt", (e) => { // window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault(); // e.preventDefault();
deferredPrompt = e; // deferredPrompt = e;
if (document.getElementById("install-banner")) return; // if (document.getElementById("install-banner")) return;
const banner = document.createElement("div"); // const banner = document.createElement("div");
banner.id = "install-banner"; // banner.id = "install-banner";
banner.innerHTML = ` // banner.innerHTML = `
<div style=" // <div style="
position: fixed; // position: fixed;
bottom: 20px; // bottom: 20px;
left: 20px; // left: 20px;
right: 20px; // right: 20px;
background: var(--fi-color-primary, #007bff); // background: var(--fi-color-primary, #007bff);
color: white; // color: white;
padding: 15px; // padding: 15px;
border-radius: 10px; // border-radius: 10px;
text-align: center; // text-align: center;
font-family: system-ui, sans-serif; // font-family: system-ui, sans-serif;
box-shadow: 0 4px 10px rgba(0,0,0,0.3); // box-shadow: 0 4px 10px rgba(0,0,0,0.3);
z-index: 99999; // z-index: 99999;
"> // ">
<span style="font-size: 16px;">📱 Install <b>Quality Dashboard</b> App?</span><br> // <span style="font-size: 16px;">📱 Install <b>Quality Dashboard</b> App?</span><br>
<button id="installBtn" style=" // <button id="installBtn" style="
margin-top: 10px; // margin-top: 10px;
background: white; // background: white;
color: var(--fi-color-primary, #007bff); // color: var(--fi-color-primary, #007bff);
border: none; // border: none;
padding: 8px 16px; // padding: 8px 16px;
border-radius: 6px; // border-radius: 6px;
font-weight: 600; // font-weight: 600;
cursor: pointer; // cursor: pointer;
">Install</button> // ">Install</button>
</div> // </div>
`; // `;
document.body.appendChild(banner); // document.body.appendChild(banner);
document.getElementById("installBtn").addEventListener("click", async () => { // document.getElementById("installBtn").addEventListener("click", async () => {
banner.remove(); // banner.remove();
deferredPrompt.prompt(); // deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice; // const { outcome } = await deferredPrompt.userChoice;
console.log("User install choice:", outcome); // console.log("User install choice:", outcome);
deferredPrompt = null; // deferredPrompt = null;
}); // });
}); // });
window.addEventListener("appinstalled", () => { // window.addEventListener("appinstalled", () => {
console.log("🎉 PWA installed successfully!"); // console.log("🎉 PWA installed successfully!");
const banner = document.getElementById("install-banner"); // const banner = document.getElementById("install-banner");
if (banner) banner.remove(); // if (banner) banner.remove();
}); // });
</script> // </script>
' // '
); // );
} // }
} }

43
app/Providers/PWAServiceProvider.php Normal file
View File

@@ -0,0 +1,43 @@
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Filament\Support\Facades\FilamentView;
class PWAServiceProvider extends ServiceProvider
{
/**
* Register services.
*/
public function register(): void
{
//
}
/**
* Bootstrap services.
*/
public function boot(): void
{
FilamentView::registerRenderHook(
'panels::head.end',
fn() => '
<link rel="manifest" href="' . asset('manifest.json') . '">
<meta name="theme-color" content="#007bff">
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js")
.then(reg => console.log("Service Worker registered:", reg.scope))
.catch(err => console.error("Service Worker registration failed:", err));
}
</script>
'
);
FilamentView::registerRenderHook('panels::body.end', function () {
return '<script src="' . asset('js/pwa-install.js') . '"></script>';
});
}
}

55
public/js/pwa-install.js Normal file
View File

@@ -0,0 +1,55 @@
let deferredPrompt;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;
// Prevent duplicate banner
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 App</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("🎉 PDS installed successfully!");
const banner = document.getElementById("install-banner");
if (banner) banner.remove();
});