added update pwa plugin
This commit is contained in:
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user