|
@ -301,7 +301,34 @@ export default class App extends Vue { |
|
|
return this.askPermission() |
|
|
return this.askPermission() |
|
|
.then((permission) => { |
|
|
.then((permission) => { |
|
|
console.log("Permission granted:", permission); |
|
|
console.log("Permission granted:", permission); |
|
|
// Initialize notifications here |
|
|
|
|
|
|
|
|
// Call the function and handle promises |
|
|
|
|
|
this.subscribeToPush() |
|
|
|
|
|
.then(() => { |
|
|
|
|
|
console.log("Subscribed successfully."); |
|
|
|
|
|
// Assuming the subscription object is available |
|
|
|
|
|
return navigator.serviceWorker.ready; |
|
|
|
|
|
}) |
|
|
|
|
|
.then((registration) => { |
|
|
|
|
|
// Fetch the existing subscription object from the registration |
|
|
|
|
|
return registration.pushManager.getSubscription(); |
|
|
|
|
|
}) |
|
|
|
|
|
.then((subscription) => { |
|
|
|
|
|
if (subscription) { |
|
|
|
|
|
return this.sendSubscriptionToServer(subscription); |
|
|
|
|
|
} else { |
|
|
|
|
|
throw new Error("Subscription object is not available."); |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.then(() => { |
|
|
|
|
|
console.log("Subscription data sent to server."); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((error) => { |
|
|
|
|
|
console.error( |
|
|
|
|
|
"Subscription or server communication failed:", |
|
|
|
|
|
error, |
|
|
|
|
|
); |
|
|
|
|
|
}); |
|
|
}) |
|
|
}) |
|
|
.catch((error) => { |
|
|
.catch((error) => { |
|
|
console.error("An error occurred:", error); |
|
|
console.error("An error occurred:", error); |
|
@ -309,6 +336,73 @@ export default class App extends Vue { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Function to convert URL base64 to Uint8Array |
|
|
|
|
|
private urlBase64ToUint8Array(base64String: string): Uint8Array { |
|
|
|
|
|
const padding = "=".repeat((4 - (base64String.length % 4)) % 4); |
|
|
|
|
|
const base64 = (base64String + padding) |
|
|
|
|
|
.replace(/-/g, "+") |
|
|
|
|
|
.replace(/_/g, "/"); |
|
|
|
|
|
const rawData = window.atob(base64); |
|
|
|
|
|
const outputArray = new Uint8Array(rawData.length); |
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < rawData.length; ++i) { |
|
|
|
|
|
outputArray[i] = rawData.charCodeAt(i); |
|
|
|
|
|
} |
|
|
|
|
|
return outputArray; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// The subscribeToPush method |
|
|
|
|
|
private subscribeToPush(): Promise<void> { |
|
|
|
|
|
return new Promise<void>((resolve, reject) => { |
|
|
|
|
|
if ("serviceWorker" in navigator && "PushManager" in window) { |
|
|
|
|
|
navigator.serviceWorker |
|
|
|
|
|
.register("/service-worker.js") |
|
|
|
|
|
.then((registration) => { |
|
|
|
|
|
const b64 = |
|
|
|
|
|
"BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U"; |
|
|
|
|
|
const applicationServerKey = this.urlBase64ToUint8Array(b64); |
|
|
|
|
|
|
|
|
|
|
|
const options: PushSubscriptionOptions = { |
|
|
|
|
|
userVisibleOnly: true, |
|
|
|
|
|
applicationServerKey: applicationServerKey, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return registration.pushManager.subscribe(options); |
|
|
|
|
|
}) |
|
|
|
|
|
.then((subscription) => { |
|
|
|
|
|
console.log("Push subscription successful:", subscription); |
|
|
|
|
|
resolve(); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((error) => { |
|
|
|
|
|
console.error("Push subscription failed:", error); |
|
|
|
|
|
reject(error); |
|
|
|
|
|
}); |
|
|
|
|
|
} else { |
|
|
|
|
|
const errorMsg = "Push messaging is not supported"; |
|
|
|
|
|
console.warn(errorMsg); |
|
|
|
|
|
reject(new Error(errorMsg)); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
private sendSubscriptionToServer( |
|
|
|
|
|
subscription: PushSubscription, |
|
|
|
|
|
): Promise<void> { |
|
|
|
|
|
// Simulated API call |
|
|
|
|
|
return fetch("/api/save-subscription", { |
|
|
|
|
|
method: "POST", |
|
|
|
|
|
headers: { |
|
|
|
|
|
"Content-Type": "application/json", |
|
|
|
|
|
}, |
|
|
|
|
|
body: JSON.stringify(subscription), |
|
|
|
|
|
}).then((response) => { |
|
|
|
|
|
if (!response.ok) { |
|
|
|
|
|
throw new Error("Failed to send subscription to server"); |
|
|
|
|
|
} |
|
|
|
|
|
console.log("Subscription sent to server successfully."); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
never(ID: string) { |
|
|
never(ID: string) { |
|
|
alert(ID); |
|
|
alert(ID); |
|
|
} |
|
|
} |
|
|