5 changed files with 491 additions and 506 deletions
@ -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> |
|||
Loading…
Reference in new issue