forked from jsnbuchanan/crowd-funder-for-time-pwa
WIP: fixing askPermission chain
This commit is contained in:
134
src/App.vue
134
src/App.vue
@@ -261,7 +261,30 @@
|
||||
|
||||
<script lang="ts">
|
||||
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
|
||||
export default class App extends Vue {
|
||||
@@ -269,57 +292,96 @@ export default class App extends Vue {
|
||||
mounted() {
|
||||
axios
|
||||
.get("https://timesafari-pwa.anomalistlabs.com/web-push/vapid")
|
||||
.then((response) => {
|
||||
.then((response: VapidResponse) => {
|
||||
this.b64 = response.data.vapidKey;
|
||||
console.log(this.b64);
|
||||
})
|
||||
.catch((error) => {
|
||||
.catch((error: AxiosError) => {
|
||||
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> {
|
||||
if ("serviceWorker" in navigator && navigator.serviceWorker.controller) {
|
||||
const secret = localStorage.getItem("secret");
|
||||
|
||||
if (secret) {
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
const message: ServiceWorkerMessage = {
|
||||
type: "SEND_LOCAL_DATA",
|
||||
data: secret,
|
||||
});
|
||||
};
|
||||
|
||||
this.sendMessageToServiceWorker(message)
|
||||
.then((response) => {
|
||||
// The service worker has received the message and responded
|
||||
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.",
|
||||
);
|
||||
}
|
||||
|
||||
// Check existing permissions
|
||||
if (Notification.permission === "granted") {
|
||||
return Promise.resolve("granted");
|
||||
}
|
||||
|
||||
// Request permission
|
||||
return new Promise((resolve, reject) => {
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
return new Promise((resolve, reject) => {
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
async turnOnNotifications() {
|
||||
|
||||
@@ -27,5 +27,6 @@ self.addEventListener('message', event => {
|
||||
if (event.data && event.data.type === 'SEND_LOCAL_DATA') {
|
||||
self.secret = event.data.data;
|
||||
console.log('Data stored in service worker:', self.secret);
|
||||
event.ports[0].postMessage({ success: true });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -7,12 +7,14 @@ function validateBase64(s) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function decodeBase64(s) {
|
||||
validateBase64(s);
|
||||
var i, d = atob(s), b = new Uint8Array(d.length);
|
||||
for (i = 0; i < d.length; i++) b[i] = d.charCodeAt(i);
|
||||
return b;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
async function getSettingById(id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
@@ -40,6 +42,7 @@ async function getSettingById(id) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getAllAccounts() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let openRequest = indexedDB.open('TimeSafariAccounts');
|
||||
@@ -82,12 +85,13 @@ async function getNotificationCount() {
|
||||
let secret = null;
|
||||
if ('secret' in self) {
|
||||
secret = self.secret;
|
||||
const secretUint8Array = decodeBase64(secret);
|
||||
const secretUint8Array = self.decodeBase64(secret);
|
||||
/**
|
||||
const settings = await getSettingById(1);
|
||||
const activeDid = settings['activeDid'];
|
||||
|
||||
const accounts = await fetchAllAccounts();
|
||||
|
||||
/**
|
||||
let result = null;
|
||||
for (var i = 0; i < accounts.length; i++) {
|
||||
let account = accounts[i];
|
||||
@@ -107,3 +111,4 @@ async function getNotificationCount() {
|
||||
}
|
||||
|
||||
self.getNotificationCount = getNotificationCount;
|
||||
self.decodeBase64 = decodeBase64
|
||||
|
||||
Reference in New Issue
Block a user