diff --git a/atproto-notifications/src/App.css b/atproto-notifications/src/App.css index 66c63ce..4991e76 100644 --- a/atproto-notifications/src/App.css +++ b/atproto-notifications/src/App.css @@ -41,6 +41,10 @@ padding: 0.5rem 1rem; } +h3 { + margin-top: 2rem; +} + .detail { font-style: italic; font-size: 0.8rem; diff --git a/atproto-notifications/src/pages/Early.tsx b/atproto-notifications/src/pages/Early.tsx index b849d71..df71db4 100644 --- a/atproto-notifications/src/pages/Early.tsx +++ b/atproto-notifications/src/pages/Early.tsx @@ -1,17 +1,24 @@ import { useCallback, useState } from 'react'; +import { Link } from 'react-router'; import { postJson } from '../components/Fetch'; import './Early.css'; export function Early({ }) { - const [pushCount, setPushCount] = useState(0); + const [notified, setNotified] = useState(false); const [pushStatus, setPushStatus] = useState(null); + const [pushed, setPushed] = useState(false); const localTest = useCallback(() => { - new Notification("Hello world!", { body: "This notification never left your browser" }); + try { + new Notification("Hello world!", { body: "This notification never left your browser" }); + } catch (e) { + console.error('failed to create local notification', e); + alert('Failed to create local notification. If you\'re up for helping debug, get in touch.'); + } + setNotified(true); }); const pushTest = useCallback(async () => { - setPushStatus(n => n + 1); setPushStatus('pending'); const host = import.meta.env.VITE_NOTIFICATIONS_HOST; const url = new URL('/push-test', host); @@ -22,6 +29,7 @@ export function Early({ }) { console.error('failed push test request', e); setPushStatus('failed'); } + setPushed(true); }); return ( @@ -30,28 +38,47 @@ export function Early({ }) {
Welcome to the early preview for the spacedust notifications demo, and since you're here early: thanks so much for supporting microcosm!
A few things to keep in mind:
Sadly, it doesn't really work on mobile. iOS will stop delivering notifications after some minutes. Android people might have better luck?
With that out of the way, let's cover some basics!
-To see a test notification, . This is a local-only test.
-- - {' '} - to see another. This one goes over Web Push. -
- {pushStatus === 'failed' &&uh oh, something went wrong requesting a web push
} + {notified && ( + <> ++ Then + {' '} + + {' '} + for another. This one uses Web Push! +
+ {pushStatus === 'failed' &&uh oh, something went wrong requesting a web push
} + > + )} + {(pushed && pushStatus !== 'failed') && ( + <> ++ You can get back to this page by clicking the early + early + {' '} + tag by your handle. +
+Go to Notifications
+ > + )} + ); }