forked from trent_larson/crowd-funder-for-time-pwa
move push notification setup out of an App.vue Notification and into a component
This commit is contained in:
495
src/App.vue
495
src/App.vue
@@ -238,70 +238,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="notification.type === 'notification-permission'"
|
||||
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
||||
>
|
||||
<div
|
||||
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
||||
>
|
||||
<div class="w-full px-6 py-6 text-slate-900 text-center">
|
||||
<p v-if="serviceWorkerReady" class="text-lg mb-4">
|
||||
Would you like to be notified of new activity once a day?
|
||||
</p>
|
||||
<p v-else class="text-lg mb-4">
|
||||
Waiting for system initialization, which may take up to 10
|
||||
seconds...
|
||||
<fa icon="spinner" spin />
|
||||
</p>
|
||||
|
||||
<div v-if="serviceWorkerReady">
|
||||
<span class="flex flex-row justify-center">
|
||||
<span class="mt-2">Yes, tell me at: </span>
|
||||
<input
|
||||
type="number"
|
||||
@change="checkHourInput"
|
||||
class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
|
||||
v-model="hourInput"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
@change="checkMinuteInput"
|
||||
class="border border-slate-400 mt-2 px-2 py-2 text-center w-20"
|
||||
v-model="minuteInput"
|
||||
/>
|
||||
<span
|
||||
class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
|
||||
@click="hourAm = !hourAm"
|
||||
>
|
||||
<span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
|
||||
<span v-else> PM <fa icon="chevron-up" /> </span>
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
|
||||
@click="
|
||||
() => {
|
||||
if (checkHour()) {
|
||||
close(notification.id);
|
||||
turnOnNotifications();
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
Turn on Daily Message
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="close(notification.id)"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
|
||||
>
|
||||
No, Not Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="notification.type === 'notification-mute'"
|
||||
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
||||
@@ -380,442 +316,13 @@
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import axios from "axios";
|
||||
import { Vue, Component } from "vue-facing-decorator";
|
||||
|
||||
import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
|
||||
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
|
||||
import * as libsUtil from "@/libs/util";
|
||||
import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
|
||||
|
||||
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;
|
||||
};
|
||||
}
|
||||
|
||||
interface PushSubscriptionWithTime extends PushSubscriptionJSON {
|
||||
notifyTime: { utcHour: number; minute: number };
|
||||
notifyType: string;
|
||||
}
|
||||
import { logConsoleAndDb } from "@/db/index";
|
||||
|
||||
@Component
|
||||
export default class App extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
stopAsking = false;
|
||||
b64 = "";
|
||||
hourAm = true;
|
||||
hourInput = "8";
|
||||
minuteInput = "00";
|
||||
serviceWorkerReady = true;
|
||||
|
||||
async mounted() {
|
||||
try {
|
||||
const settings = await retrieveSettingsForActiveAccount();
|
||||
let pushUrl = DEFAULT_PUSH_SERVER;
|
||||
if (settings?.webPushServer) {
|
||||
pushUrl = settings.webPushServer;
|
||||
}
|
||||
|
||||
if (pushUrl.startsWith("http://localhost")) {
|
||||
logConsoleAndDb("Not checking for VAPID in this local environment.");
|
||||
} else {
|
||||
let responseData = "";
|
||||
await axios
|
||||
.get(pushUrl + "/web-push/vapid")
|
||||
.then((response: VapidResponse) => {
|
||||
this.b64 = response.data?.vapidKey || "";
|
||||
logConsoleAndDb("Got vapid key: " + this.b64);
|
||||
responseData = JSON.stringify(response.data);
|
||||
navigator.serviceWorker?.addEventListener(
|
||||
"controllerchange",
|
||||
() => {
|
||||
logConsoleAndDb(
|
||||
"New service worker is now controlling the page",
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
if (!this.b64) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error Setting Notifications",
|
||||
text: "Could not set notifications.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
logConsoleAndDb(
|
||||
"Error Setting Notifications: web push server response didn't have vapidKey: " +
|
||||
responseData,
|
||||
true,
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (window.location.host.startsWith("localhost")) {
|
||||
logConsoleAndDb(
|
||||
"Ignoring the error getting VAPID for local development.",
|
||||
);
|
||||
} else {
|
||||
logConsoleAndDb(
|
||||
"Got an error initializing notifications: " + JSON.stringify(error),
|
||||
true,
|
||||
);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error Setting Notifications",
|
||||
text: "Got an error setting notifications.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
}
|
||||
}
|
||||
// there may be a long pause here on first initialization
|
||||
navigator.serviceWorker?.ready.then(() => {
|
||||
this.serviceWorkerReady = true;
|
||||
});
|
||||
}
|
||||
|
||||
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> {
|
||||
logConsoleAndDb(
|
||||
"Requesting permission for notifications: " + JSON.stringify(navigator),
|
||||
);
|
||||
if (
|
||||
!("serviceWorker" in navigator && navigator.serviceWorker?.controller)
|
||||
) {
|
||||
return Promise.reject("Service worker not available.");
|
||||
}
|
||||
|
||||
const secret = localStorage.getItem("secret");
|
||||
if (!secret) {
|
||||
return Promise.reject("No secret found.");
|
||||
}
|
||||
|
||||
return this.sendSecretToServiceWorker(secret)
|
||||
.then(() => this.checkNotificationSupport())
|
||||
.then(() => this.requestNotificationPermission())
|
||||
.catch((error) => Promise.reject(error));
|
||||
}
|
||||
|
||||
private sendSecretToServiceWorker(secret: string): Promise<void> {
|
||||
const message: ServiceWorkerMessage = {
|
||||
type: "SEND_LOCAL_DATA",
|
||||
data: secret,
|
||||
};
|
||||
|
||||
return this.sendMessageToServiceWorker(message).then((response) => {
|
||||
logConsoleAndDb(
|
||||
"Response from service worker: " + JSON.stringify(response),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
private checkNotificationSupport(): Promise<void> {
|
||||
if (!("Notification" in window)) {
|
||||
alert("This browser does not support notifications.");
|
||||
return Promise.reject("This browser does not support notifications.");
|
||||
}
|
||||
if (Notification.permission === "granted") {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
private requestNotificationPermission(): Promise<NotificationPermission> {
|
||||
return Notification.requestPermission().then((permission) => {
|
||||
if (permission !== "granted") {
|
||||
alert(
|
||||
"Allow this app permission to make notifications for personal reminders." +
|
||||
" You can adjust them at any time in your settings.",
|
||||
);
|
||||
throw new Error("We weren't granted permission.");
|
||||
}
|
||||
return permission;
|
||||
});
|
||||
}
|
||||
|
||||
private checkHourInput() {
|
||||
const hourNum = parseInt(this.hourInput);
|
||||
if (isNaN(hourNum)) {
|
||||
this.hourInput = "12";
|
||||
} else if (hourNum < 1) {
|
||||
this.hourInput = "12";
|
||||
this.hourAm = !this.hourAm;
|
||||
} else if (hourNum > 12) {
|
||||
this.hourInput = "1";
|
||||
this.hourAm = !this.hourAm;
|
||||
} else {
|
||||
this.hourInput = hourNum.toString();
|
||||
}
|
||||
}
|
||||
|
||||
private checkMinuteInput() {
|
||||
const minuteNum = parseInt(this.minuteInput);
|
||||
if (isNaN(minuteNum)) {
|
||||
this.minuteInput = "00";
|
||||
} else if (minuteNum < 0) {
|
||||
this.minuteInput = "59";
|
||||
} else if (minuteNum < 10) {
|
||||
this.minuteInput = "0" + minuteNum;
|
||||
} else if (minuteNum > 59) {
|
||||
this.minuteInput = "00";
|
||||
} else {
|
||||
this.minuteInput = minuteNum.toString();
|
||||
}
|
||||
}
|
||||
|
||||
// this allows us to show an error without closing the dialog
|
||||
checkHour() {
|
||||
if (!libsUtil.isNumeric(this.hourInput)) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Not a Number",
|
||||
text: "The time must be an hour number.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
return false;
|
||||
}
|
||||
const hourNum = libsUtil.numberOrZero(this.hourInput);
|
||||
if (!Number.isInteger(hourNum)) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Not a Whole Number",
|
||||
text: "The time must be a whole hour number.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
return false;
|
||||
}
|
||||
if (hourNum < 1 || 12 < hourNum) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Not a Whole Number",
|
||||
text: "The time must be an hour between 1 and 12.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
public async turnOnNotifications() {
|
||||
return this.askPermission()
|
||||
.then((permission) => {
|
||||
logConsoleAndDb("Permission granted: " + JSON.stringify(permission));
|
||||
|
||||
// Call the function and handle promises
|
||||
this.subscribeToPush()
|
||||
.then(() => {
|
||||
logConsoleAndDb("Subscribed successfully.");
|
||||
return navigator.serviceWorker?.ready;
|
||||
})
|
||||
.then((registration) => {
|
||||
return registration.pushManager.getSubscription();
|
||||
})
|
||||
.then(async (subscription) => {
|
||||
if (subscription) {
|
||||
await this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Notification Setup Underway",
|
||||
text: "Setting up notifications for interesting activity, which takes about 10 seconds. If you don't see a final confirmation, check the 'Troubleshoot' page.",
|
||||
},
|
||||
-1,
|
||||
);
|
||||
// we already checked that this is a valid hour number
|
||||
const rawHourNum = libsUtil.numberOrZero(this.hourInput);
|
||||
const adjHourNum = this.hourAm
|
||||
? // If it's AM, then we'll change it to 0 for 12 AM but otherwise use rawHourNum
|
||||
rawHourNum === 12
|
||||
? 0
|
||||
: rawHourNum
|
||||
: // Otherwise it's PM, so keep a 12 but otherwise add 12
|
||||
rawHourNum === 12
|
||||
? 12
|
||||
: rawHourNum + 12;
|
||||
const hourNum = adjHourNum % 24; // probably unnecessary now
|
||||
const utcHour =
|
||||
hourNum + Math.round(new Date().getTimezoneOffset() / 60);
|
||||
const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
|
||||
const minuteNum = libsUtil.numberOrZero(this.minuteInput);
|
||||
const utcMinute =
|
||||
minuteNum + Math.round(new Date().getTimezoneOffset() % 60);
|
||||
const finalUtcMinute =
|
||||
(utcMinute + (utcMinute < 0 ? 60 : 0)) % 60;
|
||||
|
||||
const subscriptionWithTime: PushSubscriptionWithTime = {
|
||||
notifyTime: { utcHour: finalUtcHour, minute: finalUtcMinute },
|
||||
notifyType: "DAILY_CHECK",
|
||||
...subscription.toJSON(),
|
||||
};
|
||||
await this.sendSubscriptionToServer(subscriptionWithTime);
|
||||
// To help investigate potential issues with this: https://firebase.google.com/docs/cloud-messaging/migrate-v1
|
||||
logConsoleAndDb(
|
||||
"Subscription data sent to server with endpoint: " +
|
||||
subscription.endpoint,
|
||||
);
|
||||
return subscriptionWithTime;
|
||||
} else {
|
||||
throw new Error("Subscription object is not available.");
|
||||
}
|
||||
})
|
||||
.then(async (subscription: PushSubscriptionWithTime) => {
|
||||
logConsoleAndDb(
|
||||
"Subscription data sent to server and all finished successfully.",
|
||||
);
|
||||
await libsUtil.sendTestThroughPushServer(subscription, true);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Notifications Turned On",
|
||||
text: "Notifications are on. You should see at least one on your device; if not, check the 'Troubleshoot' page.",
|
||||
},
|
||||
-1,
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(
|
||||
"Subscription or server communication failed:",
|
||||
error,
|
||||
);
|
||||
alert(
|
||||
"Subscription or server communication failed. Try again in a while.",
|
||||
);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
logConsoleAndDb(
|
||||
"An error occurred setting notification permissions: " +
|
||||
JSON.stringify(error),
|
||||
true,
|
||||
);
|
||||
alert("Some error occurred setting notification permissions.");
|
||||
});
|
||||
}
|
||||
|
||||
private subscribeToPush(): Promise<void> {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!("serviceWorker" in navigator && "PushManager" in window)) {
|
||||
const errorMsg = "Push messaging is not supported";
|
||||
console.warn(errorMsg);
|
||||
return reject(new Error(errorMsg));
|
||||
}
|
||||
|
||||
if (Notification.permission !== "granted") {
|
||||
const errorMsg = "Notification permission not granted";
|
||||
console.warn(errorMsg);
|
||||
return reject(new Error(errorMsg));
|
||||
}
|
||||
|
||||
const applicationServerKey = urlBase64ToUint8Array(this.b64);
|
||||
const options: PushSubscriptionOptions = {
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: applicationServerKey,
|
||||
};
|
||||
|
||||
navigator.serviceWorker?.ready
|
||||
.then((registration) => {
|
||||
return registration.pushManager.subscribe(options);
|
||||
})
|
||||
.then((subscription) => {
|
||||
logConsoleAndDb(
|
||||
"Push subscription successful: " + JSON.stringify(subscription),
|
||||
);
|
||||
resolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
logConsoleAndDb(
|
||||
"Push subscription failed: " +
|
||||
JSON.stringify(error) +
|
||||
" - " +
|
||||
JSON.stringify(options),
|
||||
true,
|
||||
);
|
||||
|
||||
// Inform the user about the issue
|
||||
alert(
|
||||
"We encountered an issue setting up push notifications. " +
|
||||
"If you wish to revoke notification permissions, please do so in your browser settings.",
|
||||
);
|
||||
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private sendSubscriptionToServer(
|
||||
subscription: PushSubscriptionWithTime,
|
||||
): Promise<void> {
|
||||
logConsoleAndDb("About to send subscription... " + subscription);
|
||||
return fetch("/web-push/subscribe", {
|
||||
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");
|
||||
}
|
||||
logConsoleAndDb("Subscription sent to server successfully.");
|
||||
});
|
||||
}
|
||||
|
||||
async turnOffNotifications() {
|
||||
let subscription;
|
||||
|
||||
@@ -49,7 +49,7 @@ export default class ContactNameDialog extends Vue {
|
||||
async open(
|
||||
title?: string,
|
||||
message?: string,
|
||||
saveCallback?: (name: string) => void,
|
||||
saveCallback?: (name?: string) => void,
|
||||
cancelCallback?: () => void,
|
||||
) {
|
||||
this.cancelCallback = cancelCallback || this.cancelCallback;
|
||||
|
||||
@@ -91,8 +91,8 @@ import { retrieveSettingsForActiveAccount } from "@/db/index";
|
||||
export default class OfferDialog extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
@Prop projectId?;
|
||||
@Prop projectName?;
|
||||
@Prop projectId?: string;
|
||||
@Prop projectName?: string;
|
||||
|
||||
activeDid = "";
|
||||
apiServer = "";
|
||||
|
||||
481
src/components/PushNotificationPermission.vue
Normal file
481
src/components/PushNotificationPermission.vue
Normal file
@@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<transition
|
||||
enter-active-class="transform ease-out duration-300 transition"
|
||||
enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
|
||||
enter-to-class="translate-y-0 opacity-100 sm:translate-y-0"
|
||||
leave-active-class="transition ease-in duration-500"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="fixed z-[100] top-0 inset-x-0 w-full absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
||||
>
|
||||
<div
|
||||
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
||||
>
|
||||
<div class="w-full px-6 py-6 text-slate-900 text-center">
|
||||
<p v-if="serviceWorkerReady && vapidKey" class="text-lg mb-4">
|
||||
Would you like to be notified of new activity once a day?
|
||||
</p>
|
||||
<p v-else class="text-lg mb-4">
|
||||
Waiting for system initialization, which may take up to 10
|
||||
seconds...
|
||||
<fa icon="spinner" spin />
|
||||
</p>
|
||||
|
||||
<div v-if="serviceWorkerReady && vapidKey">
|
||||
<span class="flex flex-row justify-center">
|
||||
<span class="mt-2">Yes, tell me at: </span>
|
||||
<input
|
||||
type="number"
|
||||
@change="checkHourInput"
|
||||
class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
|
||||
v-model="hourInput"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
@change="checkMinuteInput"
|
||||
class="border border-slate-400 mt-2 px-2 py-2 text-center w-20"
|
||||
v-model="minuteInput"
|
||||
/>
|
||||
<span
|
||||
class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
|
||||
@click="hourAm = !hourAm"
|
||||
>
|
||||
<span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
|
||||
<span v-else> PM <fa icon="chevron-up" /> </span>
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
|
||||
@click="
|
||||
close();
|
||||
turnOnNotifications();
|
||||
"
|
||||
>
|
||||
Turn on Daily Message
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="close()"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
|
||||
>
|
||||
No, Not Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from "vue-facing-decorator";
|
||||
|
||||
import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
|
||||
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
|
||||
import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
|
||||
import * as libsUtil from "@/libs/util";
|
||||
|
||||
// Example interface for error
|
||||
interface ErrorResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
// PushSubscriptionJSON is defined in the Push API https://www.w3.org/TR/push-api/#dom-pushsubscriptionjson
|
||||
interface PushSubscriptionWithTime extends PushSubscriptionJSON {
|
||||
notifyTime: { utcHour: number; minute: number };
|
||||
notifyType: string;
|
||||
}
|
||||
|
||||
interface ServiceWorkerMessage {
|
||||
type: string;
|
||||
data: string;
|
||||
}
|
||||
|
||||
interface ServiceWorkerResponse {
|
||||
// Define the properties and their types
|
||||
success: boolean;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
interface VapidResponse {
|
||||
data: {
|
||||
vapidKey: string;
|
||||
};
|
||||
}
|
||||
|
||||
@Component
|
||||
export default class PushNotificationPermission extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
hourAm = true;
|
||||
hourInput = "8";
|
||||
isVisible = false;
|
||||
minuteInput = "00";
|
||||
serviceWorkerReady = false;
|
||||
vapidKey = "";
|
||||
|
||||
async open() {
|
||||
this.isVisible = true;
|
||||
try {
|
||||
const settings = await retrieveSettingsForActiveAccount();
|
||||
let pushUrl = DEFAULT_PUSH_SERVER;
|
||||
if (settings?.webPushServer) {
|
||||
pushUrl = settings.webPushServer;
|
||||
}
|
||||
|
||||
if (pushUrl.startsWith("http://localhost")) {
|
||||
logConsoleAndDb("Not checking for VAPID in this local environment.");
|
||||
} else {
|
||||
let responseData = "";
|
||||
await this.axios
|
||||
.get(pushUrl + "/web-push/vapid")
|
||||
.then((response: VapidResponse) => {
|
||||
this.vapidKey = response.data?.vapidKey || "";
|
||||
logConsoleAndDb("Got vapid key: " + this.vapidKey);
|
||||
responseData = JSON.stringify(response.data);
|
||||
navigator.serviceWorker?.addEventListener(
|
||||
"controllerchange",
|
||||
() => {
|
||||
logConsoleAndDb(
|
||||
"New service worker is now controlling the page",
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
if (!this.vapidKey) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error Setting Notifications",
|
||||
text: "Could not set notifications.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
logConsoleAndDb(
|
||||
"Error Setting Notifications: web push server response didn't have vapidKey: " +
|
||||
responseData,
|
||||
true,
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (window.location.host.startsWith("localhost")) {
|
||||
logConsoleAndDb(
|
||||
"Ignoring the error getting VAPID for local development.",
|
||||
);
|
||||
} else {
|
||||
logConsoleAndDb(
|
||||
"Got an error initializing notifications: " + JSON.stringify(error),
|
||||
true,
|
||||
);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error Setting Notifications",
|
||||
text: "Got an error setting notifications.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
}
|
||||
}
|
||||
// there may be a long pause here on first initialization
|
||||
navigator.serviceWorker?.ready.then(() => {
|
||||
this.serviceWorkerReady = true;
|
||||
});
|
||||
}
|
||||
|
||||
private close() {
|
||||
this.isVisible = false;
|
||||
}
|
||||
|
||||
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> {
|
||||
logConsoleAndDb(
|
||||
"Requesting permission for notifications: " + JSON.stringify(navigator),
|
||||
);
|
||||
if (
|
||||
!("serviceWorker" in navigator && navigator.serviceWorker?.controller)
|
||||
) {
|
||||
return Promise.reject("Service worker not available.");
|
||||
}
|
||||
|
||||
const secret = localStorage.getItem("secret");
|
||||
if (!secret) {
|
||||
return Promise.reject("No secret found.");
|
||||
}
|
||||
|
||||
return this.sendSecretToServiceWorker(secret)
|
||||
.then(() => this.checkNotificationSupport())
|
||||
.then(() => this.requestNotificationPermission())
|
||||
.catch((error) => Promise.reject(error));
|
||||
}
|
||||
|
||||
private sendSecretToServiceWorker(secret: string): Promise<void> {
|
||||
const message: ServiceWorkerMessage = {
|
||||
type: "SEND_LOCAL_DATA",
|
||||
data: secret,
|
||||
};
|
||||
|
||||
return this.sendMessageToServiceWorker(message).then((response) => {
|
||||
logConsoleAndDb(
|
||||
"Response from service worker: " + JSON.stringify(response),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
private checkNotificationSupport(): Promise<void> {
|
||||
if (!("Notification" in window)) {
|
||||
alert("This browser does not support notifications.");
|
||||
return Promise.reject("This browser does not support notifications.");
|
||||
}
|
||||
if (window.Notification.permission === "granted") {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
private requestNotificationPermission(): Promise<NotificationPermission> {
|
||||
return window.Notification.requestPermission().then(
|
||||
(permission: string) => {
|
||||
if (permission !== "granted") {
|
||||
alert(
|
||||
"Allow this app permission to make notifications for personal reminders." +
|
||||
" You can adjust them at any time in your settings.",
|
||||
);
|
||||
throw new Error("We weren't granted permission.");
|
||||
}
|
||||
return permission;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
private checkHourInput() {
|
||||
const hourNum = parseInt(this.hourInput);
|
||||
if (isNaN(hourNum)) {
|
||||
this.hourInput = "12";
|
||||
} else if (hourNum < 1) {
|
||||
this.hourInput = "12";
|
||||
this.hourAm = !this.hourAm;
|
||||
} else if (hourNum > 12) {
|
||||
this.hourInput = "1";
|
||||
this.hourAm = !this.hourAm;
|
||||
} else {
|
||||
this.hourInput = hourNum.toString();
|
||||
}
|
||||
}
|
||||
|
||||
private checkMinuteInput() {
|
||||
const minuteNum = parseInt(this.minuteInput);
|
||||
if (isNaN(minuteNum)) {
|
||||
this.minuteInput = "00";
|
||||
} else if (minuteNum < 0) {
|
||||
this.minuteInput = "59";
|
||||
} else if (minuteNum < 10) {
|
||||
this.minuteInput = "0" + minuteNum;
|
||||
} else if (minuteNum > 59) {
|
||||
this.minuteInput = "00";
|
||||
} else {
|
||||
this.minuteInput = minuteNum.toString();
|
||||
}
|
||||
}
|
||||
|
||||
public async turnOnNotifications() {
|
||||
return this.askPermission()
|
||||
.then((permission) => {
|
||||
logConsoleAndDb("Permission granted: " + JSON.stringify(permission));
|
||||
|
||||
// Call the function and handle promises
|
||||
return this.subscribeToPush();
|
||||
})
|
||||
.then(() => {
|
||||
logConsoleAndDb("Subscribed successfully.");
|
||||
return navigator.serviceWorker?.ready;
|
||||
})
|
||||
.then((registration) => {
|
||||
return registration.pushManager.getSubscription();
|
||||
})
|
||||
.then(async (subscription) => {
|
||||
if (subscription) {
|
||||
await this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "info",
|
||||
title: "Notification Setup Underway",
|
||||
text: "Setting up notifications for interesting activity, which takes about 10 seconds. If you don't see a final confirmation, check the 'Troubleshoot' page.",
|
||||
},
|
||||
-1,
|
||||
);
|
||||
// we already checked that this is a valid hour number
|
||||
const rawHourNum = libsUtil.numberOrZero(this.hourInput);
|
||||
const adjHourNum = this.hourAm
|
||||
? // If it's AM, then we'll change it to 0 for 12 AM but otherwise use rawHourNum
|
||||
rawHourNum === 12
|
||||
? 0
|
||||
: rawHourNum
|
||||
: // Otherwise it's PM, so keep a 12 but otherwise add 12
|
||||
rawHourNum === 12
|
||||
? 12
|
||||
: rawHourNum + 12;
|
||||
const hourNum = adjHourNum % 24; // probably unnecessary now
|
||||
const utcHour =
|
||||
hourNum + Math.round(new Date().getTimezoneOffset() / 60);
|
||||
const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
|
||||
const minuteNum = libsUtil.numberOrZero(this.minuteInput);
|
||||
const utcMinute =
|
||||
minuteNum + Math.round(new Date().getTimezoneOffset() % 60);
|
||||
const finalUtcMinute = (utcMinute + (utcMinute < 0 ? 60 : 0)) % 60;
|
||||
|
||||
const subscriptionWithTime: PushSubscriptionWithTime = {
|
||||
notifyTime: { utcHour: finalUtcHour, minute: finalUtcMinute },
|
||||
notifyType: "DAILY_CHECK",
|
||||
...subscription.toJSON(),
|
||||
};
|
||||
await this.sendSubscriptionToServer(subscriptionWithTime);
|
||||
// To help investigate potential issues with this: https://firebase.google.com/docs/cloud-messaging/migrate-v1
|
||||
logConsoleAndDb(
|
||||
"Subscription data sent to server with endpoint: " +
|
||||
subscription.endpoint,
|
||||
);
|
||||
return subscriptionWithTime;
|
||||
} else {
|
||||
throw new Error("Subscription object is not available.");
|
||||
}
|
||||
})
|
||||
.then(async (subscription: PushSubscriptionWithTime) => {
|
||||
logConsoleAndDb(
|
||||
"Subscription data sent to server and all finished successfully.",
|
||||
);
|
||||
await libsUtil.sendTestThroughPushServer(subscription, true);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Notifications Turned On",
|
||||
text: "Notifications are on. You should see at least one on your device; if not, check the 'Troubleshoot' page.",
|
||||
},
|
||||
-1,
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
logConsoleAndDb(
|
||||
"Got an error setting notification permissions: " +
|
||||
" string " +
|
||||
error.toString() +
|
||||
" JSON " +
|
||||
JSON.stringify(error),
|
||||
true,
|
||||
);
|
||||
alert("Some error occurred setting notification permissions.");
|
||||
// unsubscribe just in case we failed after getting a subscription
|
||||
navigator.serviceWorker?.ready
|
||||
.then((registration) => registration.pushManager.getSubscription())
|
||||
.then((subscription) => {
|
||||
if (subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private subscribeToPush(): Promise<void> {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!("serviceWorker" in navigator && "PushManager" in window)) {
|
||||
const errorMsg = "Push messaging is not supported";
|
||||
console.warn(errorMsg);
|
||||
return reject(new Error(errorMsg));
|
||||
}
|
||||
|
||||
if (window.Notification.permission !== "granted") {
|
||||
const errorMsg = "Notification permission not granted";
|
||||
console.warn(errorMsg);
|
||||
return reject(new Error(errorMsg));
|
||||
}
|
||||
|
||||
const applicationServerKey = urlBase64ToUint8Array(this.vapidKey);
|
||||
const options: PushSubscriptionOptions = {
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: applicationServerKey,
|
||||
};
|
||||
|
||||
navigator.serviceWorker?.ready
|
||||
.then((registration) => {
|
||||
return registration.pushManager.subscribe(options);
|
||||
})
|
||||
.then((subscription) => {
|
||||
logConsoleAndDb(
|
||||
"Push subscription successful: " + JSON.stringify(subscription),
|
||||
);
|
||||
resolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
logConsoleAndDb(
|
||||
"Push subscription failed: " +
|
||||
JSON.stringify(error) +
|
||||
" - " +
|
||||
JSON.stringify(options),
|
||||
true,
|
||||
);
|
||||
|
||||
// Inform the user about the issue
|
||||
alert(
|
||||
"We encountered an issue setting up push notifications. " +
|
||||
"If you wish to revoke notification permissions, please do so in your browser settings.",
|
||||
);
|
||||
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private sendSubscriptionToServer(
|
||||
subscription: PushSubscriptionWithTime,
|
||||
): Promise<void> {
|
||||
logConsoleAndDb("About to send subscription... " + subscription);
|
||||
return fetch("/web-push/subscribe", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(subscription),
|
||||
}).then((response) => {
|
||||
if (!response.ok) {
|
||||
console.error("Bad response subscribing to web push: ", response);
|
||||
throw new Error("Failed to send push subscription to server");
|
||||
}
|
||||
logConsoleAndDb("Push subscription sent to server successfully.");
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Add any specific styles for this component here */
|
||||
</style>
|
||||
@@ -210,6 +210,7 @@
|
||||
Troubleshoot your notification setup.
|
||||
</router-link>
|
||||
</div>
|
||||
<PushNotificationPermission ref="pushNotificationPermission" />
|
||||
|
||||
<div
|
||||
id="sectionSearchLocation"
|
||||
@@ -722,6 +723,7 @@ import { useClipboard } from "@vueuse/core";
|
||||
|
||||
import EntityIcon from "@/components/EntityIcon.vue";
|
||||
import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
|
||||
import PushNotificationPermission from "@/components/PushNotificationPermission.vue";
|
||||
import QuickNav from "@/components/QuickNav.vue";
|
||||
import TopMessage from "@/components/TopMessage.vue";
|
||||
import UserNameDialog from "@/components/UserNameDialog.vue";
|
||||
@@ -763,6 +765,7 @@ const inputImportFileNameRef = ref<Blob>();
|
||||
components: {
|
||||
EntityIcon,
|
||||
ImageMethodDialog,
|
||||
PushNotificationPermission,
|
||||
QuickNav,
|
||||
TopMessage,
|
||||
UserNameDialog,
|
||||
@@ -954,15 +957,9 @@ export default class AccountViewView extends Vue {
|
||||
|
||||
async showNotificationChoice() {
|
||||
if (!this.subscription) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "modal",
|
||||
type: "notification-permission",
|
||||
title: "", // unused, only here to satisfy type check
|
||||
text: "", // unused, only here to satisfy type check
|
||||
},
|
||||
-1,
|
||||
);
|
||||
(
|
||||
this.$refs.pushNotificationPermission as PushNotificationPermission
|
||||
).open();
|
||||
} else {
|
||||
this.$notify(
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user