popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(wip) PWA Push Notifications

Browse Source
This commit is contained in:
Dobromir Popov
2024-05-06 20:30:15 +03:00
parent a39a0aec4d
commit 4e1bbbbd57
13 changed files with 348 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/PwaManager.tsx
View File

@ -1,5 +1,7 @@
import React, { useEffect, useState } from 'react';
import common from '../src/helpers/common'; // Ensure this path is correct
//use session to get user role
import { useSession } from "next-auth/react"
function PwaManager() {
const [deferredPrompt, setDeferredPrompt] = useState(null);
@ -10,6 +12,8 @@ function PwaManager() {
const [registration, setRegistration] = useState(null);
const [notificationPermission, setNotificationPermission] = useState(Notification.permission);
const { data: session } = useSession();
// Handle PWA installation
useEffect(() => {
@ -54,7 +58,7 @@ function PwaManager() {
}, []);
const installPWA = async (e) => {
console.log('installing PWA');
e.preventDefault();
if (deferredPrompt) {
deferredPrompt.prompt();
@ -107,9 +111,25 @@ function PwaManager() {
applicationServerKey: base64ToUint8Array(vapidPublicKey)
});
// Call your API to save subscription data on server
setSubscription(sub);
setIsSubscribed(true);
console.log('Web push subscribed!');
if (session.user?.id != null) {
await fetch(`/api/notify`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ subscription: sub, id: session.user.id })
}).then(response => {
if (!response.ok) {
throw new Error('Failed to save subscription data on server.');
}
else {
console.log('Subscription data saved on server.');
setSubscription(sub);
setIsSubscribed(true);
console.log('Web push subscribed!');
}
});
}
console.log(sub);
} catch (error) {
console.error('Error subscribing to notifications:', error);
@ -124,6 +144,24 @@ function PwaManager() {
// Call your API to delete or invalidate subscription data on server
setSubscription(null);
setIsSubscribed(false);
if (session?.user?.id != null) {
await fetch(`/api/notify`,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ id: session?.user.id }),
}
).then(response => {
if (!response.ok) {
throw new Error('Failed to delete subscription data on server.');
}
else {
console.log('Subscription data deleted on server.');
}
});
}
console.log('Web push unsubscribed!');
} catch (error) {
console.error('Error unsubscribing from notifications:', error);