Browse Source

WIP: fixing askPermission chain

home-view-notification-improvements
Matthew Raymer 10 months ago
parent
commit
7906aab36e
  1. 130
      src/App.vue
  2. 1
      sw_scripts/additional-scripts.js
  3. 11
      sw_scripts/safari-notifications.js

130
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,
}); };
}
}
// 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() {

1
sw_scripts/additional-scripts.js

@ -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 });
} }
}); });

11
sw_scripts/safari-notifications.js

@ -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

Loading…
Cancel
Save