PWA manager is now visible to all users
This commit is contained in:
Dobromir Popov
@ -3,6 +3,8 @@ import common from '../src/helpers/common'; // Ensure this path is correct
|
||||
//use session to get user role
|
||||
import { useSession } from "next-auth/react"
|
||||
import e from 'express';
|
||||
import ProtectedRoute from './protectedRoute';
|
||||
import { UserRole } from '@prisma/client';
|
||||
|
||||
function PwaManager() {
|
||||
const [deferredPrompt, setDeferredPrompt] = useState(null);
|
||||
@ -12,8 +14,14 @@ function PwaManager() {
|
||||
const [subscription, setSubscription] = useState(null);
|
||||
const [registration, setRegistration] = useState(null);
|
||||
const [notificationPermission, setNotificationPermission] = useState(Notification.permission);
|
||||
const [subs, setSubs] = useState("")
|
||||
|
||||
const { data: session } = useSession();
|
||||
// let isAdmin = ProtectedRoute.IsInRole(UserRole.ADMIN);
|
||||
let isAdmin = false;
|
||||
if (session) {
|
||||
isAdmin = session.user.role === UserRole.ADMIN;
|
||||
}
|
||||
|
||||
// Handle PWA installation
|
||||
useEffect(() => {
|
||||
@ -33,9 +41,13 @@ function PwaManager() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Check if the app is running in standalone mode
|
||||
// const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
|
||||
// if (isStandalone) {
|
||||
// console.log('Running in standalone mode');
|
||||
// setIsPWAInstalled(true);
|
||||
// }
|
||||
|
||||
if (window.matchMedia('(display-mode: standalone)').matches) {
|
||||
setIsStandAlone(true);
|
||||
}
|
||||
@ -58,19 +70,28 @@ function PwaManager() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
const installPWA = async (e) => {
|
||||
console.log('installing PWA');
|
||||
e.preventDefault();
|
||||
console.log('Attempting to install PWA');
|
||||
e.preventDefault(); // Prevent default button action
|
||||
if (deferredPrompt) {
|
||||
console.log('Prompting install');
|
||||
deferredPrompt.prompt();
|
||||
const { outcome } = await deferredPrompt.userChoice;
|
||||
console.log('Installation outcome:', outcome);
|
||||
if (outcome === 'accepted') {
|
||||
console.log('User accepted the A2HS prompt');
|
||||
setIsPWAInstalled(true);
|
||||
} else {
|
||||
console.log('User dismissed the A2HS prompt');
|
||||
}
|
||||
setDeferredPrompt(null);
|
||||
setDeferredPrompt(null); // Clear the deferred prompt to manage its lifecycle
|
||||
} else {
|
||||
console.log('No deferred prompt available');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const subscribeToNotifications = async (e) => {
|
||||
|
||||
try {
|
||||
@ -90,7 +111,9 @@ function PwaManager() {
|
||||
if (!vapidPublicKey) {
|
||||
// Fetch the public key from the server if not present in env variables
|
||||
const response = await fetch('/api/notify', { method: 'GET' });
|
||||
vapidPublicKey = await response.text();
|
||||
const responseData = await response.json();
|
||||
vapidPublicKey = responseData.pk;
|
||||
setSubs(responseData.subs);
|
||||
if (!vapidPublicKey) {
|
||||
throw new Error("Failed to fetch VAPID public key from server.");
|
||||
}
|
||||
@ -107,12 +130,14 @@ function PwaManager() {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ subscription: sub, id: session.user.id })
|
||||
}).then(response => {
|
||||
}).then(async response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save subscription data on server.');
|
||||
}
|
||||
else {
|
||||
console.log('Subscription data saved on server.');
|
||||
const s = await response.json();
|
||||
setSubs(s.subs);
|
||||
setSubscription(sub);
|
||||
setIsSubscribed(true);
|
||||
console.log('Web push subscribed!');
|
||||
@ -144,12 +169,14 @@ function PwaManager() {
|
||||
//send the current subscription to be removed
|
||||
body: JSON.stringify({ id: session.user.id, subscriptionId: subscription.endpoint })
|
||||
}
|
||||
).then(response => {
|
||||
).then(async (response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete subscription data on server.');
|
||||
}
|
||||
else {
|
||||
console.log('Subscription data deleted on server.');
|
||||
const s = await response.json();
|
||||
setSubs(s.subs);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -261,6 +288,7 @@ function PwaManager() {
|
||||
if (subscription) {
|
||||
await subscription.unsubscribe();
|
||||
}
|
||||
setSubs("");
|
||||
setSubscription(null);
|
||||
setIsSubscribed(false);
|
||||
}
|
||||
@ -270,77 +298,81 @@ function PwaManager() {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h1>PWA Manager</h1>
|
||||
<h1>{isAdmin && " PWA (admin)"}</h1>
|
||||
{!isStandAlone && !isPWAInstalled && (
|
||||
<button
|
||||
onClick={installPWA}
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white text-xs py-1 px-2 rounded-full focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
|
||||
>
|
||||
Install PWA
|
||||
Инсталирай приложението
|
||||
</button>
|
||||
)}
|
||||
{isPWAInstalled && <p>App is installed!</p>}
|
||||
{isStandAlone && <p>PWA App</p>}
|
||||
{isPWAInstalled && <p>Инсталирано!</p>}
|
||||
{/* {isStandAlone && <p>PWA App</p>} */}
|
||||
<button
|
||||
onClick={isSubscribed ? unsubscribeFromNotifications : subscribeToNotifications}
|
||||
disabled={false} // Since the button itself acts as a toggle, the disabled attribute might not be needed
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${isSubscribed ? 'bg-red-500 hover:bg-red-700 text-white' : 'bg-green-500 hover:bg-green-700 text-white'}`} >
|
||||
{isSubscribed ? 'Unsubscribe from Notifications' : 'Subscribe to Notifications'}
|
||||
{isSubscribed ? 'Спри известията' : 'Показвай известия'}
|
||||
</button>
|
||||
<button
|
||||
onClick={deleteAllSubscriptions}
|
||||
className="text-xs py-1 px-2 rounded-full focus:outline-none bg-red-500 hover:bg-red-700 text-white"
|
||||
>
|
||||
Delete All Subscriptions
|
||||
Спри известията на всички мои устройства {subs != "" ? `(${subs})` : ""}
|
||||
</button>
|
||||
</div >
|
||||
<div>
|
||||
<button
|
||||
onClick={sendTestNotification}
|
||||
disabled={!isSubscribed}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
|
||||
}`}
|
||||
>
|
||||
Send Test Notification
|
||||
</button>
|
||||
<button
|
||||
onClick={sendTestReminder}
|
||||
disabled={!isSubscribed}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
|
||||
}`}
|
||||
>
|
||||
Broadcast Reminder
|
||||
</button>
|
||||
<button
|
||||
onClick={sendTestCoverMe}
|
||||
disabled={!isSubscribed}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
|
||||
}`}
|
||||
>
|
||||
Broadcast CoverMe
|
||||
</button>
|
||||
|
||||
{notificationPermission !== "granted" && (
|
||||
</div>
|
||||
{isAdmin &&
|
||||
<div>
|
||||
<button
|
||||
onClick={togglePushNotifications}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${notificationPermission === "denied" ? 'bg-red-500 hover:bg-red-700 text-white' : 'bg-green-500 hover:bg-green-700 text-white'
|
||||
onClick={sendTestNotification}
|
||||
disabled={!isSubscribed}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
|
||||
}`}
|
||||
>
|
||||
{notificationPermission === "denied" ? 'Notifications Denied!' : 'Enable Notifications'}
|
||||
Send Test Notification
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://t.me/mwhitnessing_bot" className="inline-flex items-center ml-4" target="_blank">
|
||||
<img src="/content/icons/telegram-svgrepo-com.svg" alt="Телеграм" width="32" height="32" className="align-middle" />
|
||||
<span className="align-middle">Телеграм</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/api/auth/apple-signin" className="inline-flex items-center ml-4" target="_blank">
|
||||
<span className="align-middle">Apple sign-in</span>
|
||||
</a>
|
||||
<button
|
||||
onClick={sendTestReminder}
|
||||
disabled={!isSubscribed}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
|
||||
}`}
|
||||
>
|
||||
Broadcast Reminder
|
||||
</button>
|
||||
<button
|
||||
onClick={sendTestCoverMe}
|
||||
disabled={!isSubscribed}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${!isSubscribed ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-yellow-500 hover:bg-yellow-600 text-white'
|
||||
}`}
|
||||
>
|
||||
Broadcast CoverMe
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
{notificationPermission !== "granted" && (
|
||||
<button
|
||||
onClick={togglePushNotifications}
|
||||
className={`text-xs py-1 px-2 rounded-full focus:outline-none transition duration-150 ease-in-out ${notificationPermission === "denied" ? 'bg-red-500 hover:bg-red-700 text-white' : 'bg-green-500 hover:bg-green-700 text-white'
|
||||
}`}
|
||||
>
|
||||
{notificationPermission === "denied" ? 'Notifications Denied!' : 'Enable Notifications'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{isAdmin && <div>
|
||||
<div>
|
||||
<a href="https://t.me/mwhitnessing_bot" className="inline-flex items-center ml-4" target="_blank">
|
||||
<img src="/content/icons/telegram-svgrepo-com.svg" alt="Телеграм" width="32" height="32" className="align-middle" />
|
||||
<span className="align-middle">Телеграм</span>
|
||||
</a>
|
||||
|
||||
<a href="/api/auth/apple-signin" className="inline-flex items-center ml-4 bg-gray-100 button" target="_blank">
|
||||
<span className="align-middle">Apple sign-in</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user