Paul Bailey
1c5e623c7b
Add mounted state to prevent rendering during SSR. Component now only renders after client-side mount.
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function NotificationDebug() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [debug, setDebug] = useState<any>({});
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const info = {
|
|
notificationSupported: 'Notification' in window,
|
|
serviceWorkerSupported: 'serviceWorker' in navigator,
|
|
pushManagerSupported: 'PushManager' in window,
|
|
permission: 'Notification' in window ? Notification.permission : 'N/A',
|
|
localStorage: typeof localStorage !== 'undefined' ? localStorage.getItem('notification-prompt-dismissed') : 'N/A',
|
|
};
|
|
setDebug(info);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-4 left-4 bg-black text-white text-xs p-3 rounded-lg max-w-xs z-50 font-mono">
|
|
<div className="font-bold mb-2">Push Debug:</div>
|
|
<div>Notification: {debug.notificationSupported ? '✓' : '✗'}</div>
|
|
<div>ServiceWorker: {debug.serviceWorkerSupported ? '✓' : '✗'}</div>
|
|
<div>PushManager: {debug.pushManagerSupported ? '✓' : '✗'}</div>
|
|
<div>Permission: {debug.permission}</div>
|
|
<div>Dismissed: {debug.localStorage || 'No'}</div>
|
|
</div>
|
|
);
|
|
}
|