added update pwa plugin

This commit is contained in:
Mamalizz
2025-03-06 18:03:05 +03:30
parent fcc7346528
commit 3d763335f6
+58
View File
@@ -0,0 +1,58 @@
import { Workbox } from "workbox-window";
export default defineNuxtPlugin(() => {
const updateAvailable = ref(false);
let wb = null;
if ("serviceWorker" in navigator) {
wb = new Workbox("/sw.js");
// Detect when a new service worker is waiting
wb.addEventListener("waiting", () => {
updateAvailable.value = true;
showUpdateModal();
});
// Register the service worker
wb.register();
}
// Handle update confirmation
const handleUpdate = () => {
if (updateAvailable) {
// Send message to service worker to skip waiting
wb?.messageSW({ type: "SKIP_WAITING" });
// Wait for controller change and reload
navigator.serviceWorker.addEventListener("controllerchange", () => {
window.location.reload();
});
}
};
const handleUpdateAvailable = (state: boolean) => {
updateAvailable.value = state;
};
return {
provide: {
updateAvailable,
handleUpdate,
handleUpdateAvailable,
},
};
});
function showUpdateModal() {
// Create and show your modal UI here
const modal = document.createElement("div");
modal.innerHTML = `
<div class="update-modal">
<h2>New Version Available! 🎉</h2>
<p>A new version of the app is available. Please update to get the latest features.</p>
<button onclick="handleUpdate()">Update Now</button>
</div>
`;
document.body.appendChild(modal);
}