WIP: fixing askPermission chain
This commit is contained in:
134
src/App.vue
134
src/App.vue
@@ -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,
|
||||||
});
|
};
|
||||||
|
|
||||||
|
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() {
|
async turnOnNotifications() {
|
||||||
|
|||||||
@@ -27,5 +27,6 @@ self.addEventListener('message', event => {
|
|||||||
if (event.data && event.data.type === 'SEND_LOCAL_DATA') {
|
if (event.data && event.data.type === 'SEND_LOCAL_DATA') {
|
||||||
self.secret = event.data.data;
|
self.secret = event.data.data;
|
||||||
console.log('Data stored in service worker:', self.secret);
|
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) {
|
function decodeBase64(s) {
|
||||||
validateBase64(s);
|
validateBase64(s);
|
||||||
var i, d = atob(s), b = new Uint8Array(d.length);
|
var i, d = atob(s), b = new Uint8Array(d.length);
|
||||||
for (i = 0; i < d.length; i++) b[i] = d.charCodeAt(i);
|
for (i = 0; i < d.length; i++) b[i] = d.charCodeAt(i);
|
||||||
return b;
|
return b;
|
||||||
};
|
}
|
||||||
|
|
||||||
|
|
||||||
async function getSettingById(id) {
|
async function getSettingById(id) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
@@ -40,6 +42,7 @@ async function getSettingById(id) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function getAllAccounts() {
|
function getAllAccounts() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let openRequest = indexedDB.open('TimeSafariAccounts');
|
let openRequest = indexedDB.open('TimeSafariAccounts');
|
||||||
@@ -82,12 +85,13 @@ async function getNotificationCount() {
|
|||||||
let secret = null;
|
let secret = null;
|
||||||
if ('secret' in self) {
|
if ('secret' in self) {
|
||||||
secret = self.secret;
|
secret = self.secret;
|
||||||
const secretUint8Array = decodeBase64(secret);
|
const secretUint8Array = self.decodeBase64(secret);
|
||||||
|
/**
|
||||||
const settings = await getSettingById(1);
|
const settings = await getSettingById(1);
|
||||||
const activeDid = settings['activeDid'];
|
const activeDid = settings['activeDid'];
|
||||||
|
|
||||||
const accounts = await fetchAllAccounts();
|
const accounts = await fetchAllAccounts();
|
||||||
|
|
||||||
/**
|
|
||||||
let result = null;
|
let result = null;
|
||||||
for (var i = 0; i < accounts.length; i++) {
|
for (var i = 0; i < accounts.length; i++) {
|
||||||
let account = accounts[i];
|
let account = accounts[i];
|
||||||
@@ -107,3 +111,4 @@ async function getNotificationCount() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
self.getNotificationCount = getNotificationCount;
|
self.getNotificationCount = getNotificationCount;
|
||||||
|
self.decodeBase64 = decodeBase64
|
||||||
|
|||||||
Reference in New Issue
Block a user