Mamalizz
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
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);
|
|
}
|