bad-example.com
+4
atproto-notifications/src/App.css
+4
atproto-notifications/src/App.css
+46
-19
atproto-notifications/src/pages/Early.tsx
+46
-19
atproto-notifications/src/pages/Early.tsx
···
1
1
import { useCallback, useState } from 'react';
2
+
import { Link } from 'react-router';
2
3
import { postJson } from '../components/Fetch';
3
4
import './Early.css';
4
5
5
6
export function Early({ }) {
6
-
const [pushCount, setPushCount] = useState(0);
7
+
const [notified, setNotified] = useState(false);
7
8
const [pushStatus, setPushStatus] = useState(null);
9
+
const [pushed, setPushed] = useState(false);
8
10
9
11
const localTest = useCallback(() => {
10
-
new Notification("Hello world!", { body: "This notification never left your browser" });
12
+
try {
13
+
new Notification("Hello world!", { body: "This notification never left your browser" });
14
+
} catch (e) {
15
+
console.error('failed to create local notification', e);
16
+
alert('Failed to create local notification. If you\'re up for helping debug, get in touch.');
17
+
}
18
+
setNotified(true);
11
19
});
12
20
13
21
const pushTest = useCallback(async () => {
14
-
setPushStatus(n => n + 1);
15
22
setPushStatus('pending');
16
23
const host = import.meta.env.VITE_NOTIFICATIONS_HOST;
17
24
const url = new URL('/push-test', host);
···
22
29
console.error('failed push test request', e);
23
30
setPushStatus('failed');
24
31
}
32
+
setPushed(true);
25
33
});
26
34
27
35
return (
···
30
38
<p>Welcome to the early preview for the spacedust notifications demo, and since you're here early: thanks so much for supporting microcosm!</p>
31
39
<p>A few things to keep in mind:</p>
32
40
<ol>
33
-
<li>This is a demo, not a polished product</li>
34
-
<li>It has a lot of moving pieces, so things not always work</li>
35
-
<li>Many features can easily be added! Some others can't! Make a request and let's see :)</li>
41
+
<li>This is a <a href="https://spacedust.microcosm.blue" target="_blank">spacedust</a> demo, not a polished product</li>
36
42
<li>It's not a long-term committed part of microcosm <em>(yet)</em></li>
43
+
<li>Mobile browsers are unreliable at delivering Web Push notifications</li>
44
+
<li>Many features are easy to add! Some are surprisingly hard! Make a request and let's see :)</li>
37
45
</ol>
38
-
<p>Sadly, it doesn't really work on mobile. iOS will stop delivering notifications after some minutes. Android people might have better luck?</p>
39
46
<p>With that out of the way, let's cover some basics!</p>
40
-
<h3>Hello hello</h3>
47
+
48
+
<h3>Testing 1, 2, 3…</h3>
41
49
<p>
42
50
To see a test notification, <button onClick={localTest}>click on this</button>. This is a local-only test.
43
51
</p>
44
-
<p>
45
-
<button
46
-
disabled={pushStatus === 'pending'}
47
-
onClick={pushTest}
48
-
>
49
-
Click here {pushCount > 0 && <>({pushCount})</>}
50
-
</button>
51
-
{' '}
52
-
to see another. This one goes over Web Push.
53
-
</p>
54
-
{pushStatus === 'failed' && <p>uh oh, something went wrong requesting a web push</p>}
52
+
{notified && (
53
+
<>
54
+
<p>
55
+
Then
56
+
{' '}
57
+
<button
58
+
disabled={pushStatus === 'pending'}
59
+
onClick={pushTest}
60
+
>
61
+
click here {pushed > 0 && '✅'}
62
+
</button>
63
+
{' '}
64
+
for another. This one uses Web Push!
65
+
</p>
66
+
{pushStatus === 'failed' && <p>uh oh, something went wrong requesting a web push</p>}
67
+
</>
68
+
)}
69
+
{(pushed && pushStatus !== 'failed') && (
70
+
<>
71
+
<h3>Great!</h3>
72
+
<p>
73
+
You can get back to this page by clicking the early
74
+
<span className="chrome-role-tag">early</span>
75
+
{' '}
76
+
tag by your handle.
77
+
</p>
78
+
<p><Link to="/">Go to Notifications</Link></p>
79
+
</>
80
+
)}
81
+
55
82
</div>
56
83
);
57
84
}