|
@ -261,7 +261,30 @@ |
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
import { Vue, Component } from "vue-facing-decorator"; |
|
|
import { Vue, Component } from "vue-facing-decorator"; |
|
|
import axios from "axios"; |
|
|
import axios, { AxiosError } from "axios"; |
|
|
|
|
|
|
|
|
|
|
|
interface ServiceWorkerMessage { |
|
|
|
|
|
type: string; |
|
|
|
|
|
data: string; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
interface ServiceWorkerResponse { |
|
|
|
|
|
// Define the properties and their types |
|
|
|
|
|
success: boolean; |
|
|
|
|
|
message?: string; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Example interface for error |
|
|
|
|
|
interface ErrorResponse { |
|
|
|
|
|
message: string; |
|
|
|
|
|
// Other properties as needed |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
interface VapidResponse { |
|
|
|
|
|
data: { |
|
|
|
|
|
vapidKey: string; |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
@Component |
|
|
@Component |
|
|
export default class App extends Vue { |
|
|
export default class App extends Vue { |
|
@ -269,57 +292,96 @@ export default class App extends Vue { |
|
|
mounted() { |
|
|
mounted() { |
|
|
axios |
|
|
axios |
|
|
.get("https://timesafari-pwa.anomalistlabs.com/web-push/vapid") |
|
|
.get("https://timesafari-pwa.anomalistlabs.com/web-push/vapid") |
|
|
.then((response) => { |
|
|
.then((response: VapidResponse) => { |
|
|
this.b64 = response.data.vapidKey; |
|
|
this.b64 = response.data.vapidKey; |
|
|
console.log(this.b64); |
|
|
console.log(this.b64); |
|
|
}) |
|
|
}) |
|
|
.catch((error) => { |
|
|
.catch((error: AxiosError) => { |
|
|
console.error("API error", error); |
|
|
console.error("API error", error); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
private sendMessageToServiceWorker( |
|
|
|
|
|
message: ServiceWorkerMessage, |
|
|
|
|
|
): Promise<unknown> { |
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
if (navigator.serviceWorker.controller) { |
|
|
|
|
|
const messageChannel = new MessageChannel(); |
|
|
|
|
|
|
|
|
|
|
|
messageChannel.port1.onmessage = (event: MessageEvent) => { |
|
|
|
|
|
if (event.data.error) { |
|
|
|
|
|
reject(event.data.error as ErrorResponse); |
|
|
|
|
|
} else { |
|
|
|
|
|
resolve(event.data as ServiceWorkerResponse); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
navigator.serviceWorker.controller.postMessage(message, [ |
|
|
|
|
|
messageChannel.port2, |
|
|
|
|
|
]); |
|
|
|
|
|
} else { |
|
|
|
|
|
reject("Service worker controller not available"); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
private askPermission(): Promise<NotificationPermission> { |
|
|
private askPermission(): Promise<NotificationPermission> { |
|
|
if ("serviceWorker" in navigator && navigator.serviceWorker.controller) { |
|
|
if ("serviceWorker" in navigator && navigator.serviceWorker.controller) { |
|
|
const secret = localStorage.getItem("secret"); |
|
|
const secret = localStorage.getItem("secret"); |
|
|
|
|
|
|
|
|
if (secret) { |
|
|
if (secret) { |
|
|
navigator.serviceWorker.controller.postMessage({ |
|
|
const message: ServiceWorkerMessage = { |
|
|
type: "SEND_LOCAL_DATA", |
|
|
type: "SEND_LOCAL_DATA", |
|
|
data: secret, |
|
|
data: secret, |
|
|
}); |
|
|
}; |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Check if Notifications are supported |
|
|
|
|
|
if (!("Notification" in window)) { |
|
|
|
|
|
alert("This browser does not support notifications."); |
|
|
|
|
|
return Promise.reject("This browser does not support notifications."); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Check existing permissions |
|
|
|
|
|
if (Notification.permission === "granted") { |
|
|
|
|
|
return Promise.resolve("granted"); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Request permission |
|
|
this.sendMessageToServiceWorker(message) |
|
|
return new Promise((resolve, reject) => { |
|
|
.then((response) => { |
|
|
const permissionResult = Notification.requestPermission((result) => { |
|
|
// The service worker has received the message and responded |
|
|
resolve(result); |
|
|
console.log("Response from service worker:", response); |
|
|
}); |
|
|
// Perform the next action here |
|
|
|
|
|
// Check if Notifications are supported |
|
|
|
|
|
if (!("Notification" in window)) { |
|
|
|
|
|
alert("This browser does not support notifications."); |
|
|
|
|
|
return Promise.reject( |
|
|
|
|
|
"This browser does not support notifications.", |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (permissionResult) { |
|
|
// Check existing permissions |
|
|
permissionResult.then(resolve, reject); |
|
|
if (Notification.permission === "granted") { |
|
|
} |
|
|
return Promise.resolve("granted"); |
|
|
}).then((permissionResult) => { |
|
|
} |
|
|
console.log("Permission result:", permissionResult); |
|
|
|
|
|
|
|
|
|
|
|
if (permissionResult !== "granted") { |
|
|
// Request permission |
|
|
alert("We need notification permission to provide certain features."); |
|
|
return new Promise((resolve, reject) => { |
|
|
return Promise.reject("We weren't granted permission."); |
|
|
const permissionResult = Notification.requestPermission( |
|
|
|
|
|
(result) => { |
|
|
|
|
|
resolve(result); |
|
|
|
|
|
}, |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (permissionResult) { |
|
|
|
|
|
permissionResult.then(resolve, reject); |
|
|
|
|
|
} |
|
|
|
|
|
}).then((permissionResult) => { |
|
|
|
|
|
console.log("Permission result:", permissionResult); |
|
|
|
|
|
|
|
|
|
|
|
if (permissionResult !== "granted") { |
|
|
|
|
|
alert( |
|
|
|
|
|
"We need notification permission to provide certain features.", |
|
|
|
|
|
); |
|
|
|
|
|
return Promise.reject("We weren't granted permission."); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return permissionResult; |
|
|
|
|
|
}); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((error) => { |
|
|
|
|
|
console.error("Error:", error); |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
return permissionResult; |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async turnOnNotifications() { |
|
|
async turnOnNotifications() { |
|
|