bad-example.com
demos for spacedust
chrome on feature detection pages
+11
-4
+9
-2
atproto-notifications/src/components/setup/WithFeatureChecks.tsx
+9
-2
atproto-notifications/src/components/setup/WithFeatureChecks.tsx
···
1
+
import { Chrome } from './Chrome';
2
+
1
3
export function WithFeatureChecks({ children }) {
2
4
if (!('serviceWorker' in navigator)) {
3
5
return (
···
7
9
8
10
if (!('PushManager' in window)) {
9
11
return (
10
-
<p>sorry, your browser does not support WebPush for notifications</p>
12
+
<Chrome>
13
+
<p>Sorry, your browser does not support Web Push for notifications</p>
14
+
</Chrome>
11
15
);
12
16
}
13
17
14
18
if (!('Notification' in window)) {
15
19
return (
16
-
<p>sorry, your browser does not support creating system notifications</p>
20
+
<Chrome>
21
+
<p>Sorry, your browser does not support the Notifications API for creating system notifications</p>
22
+
<p>If you're on iOS, you can try tapping <strong>add to home screen</strong> from the <strong>share</strong> menu, and then opening <strong>Spacedust</strong> from your home screen to unlock notifications support, but note that Web Push in iOS is unreliable.</p>
23
+
</Chrome>
17
24
);
18
25
}
19
26
+2
-2
atproto-notifications/src/pages/Early.tsx
+2
-2
atproto-notifications/src/pages/Early.tsx
···
35
35
<li>Many features can easily be added! Some others can't! Make a request and let's see :)</li>
36
36
<li>It's not a long-term committed part of microcosm <em>(yet)</em></li>
37
37
</ol>
38
-
<p>Sadly, it doesn't really work on mobile. On iOS you can hit "share" and "add to home screen" to get things eventually mostly set up, but push delivery will stop after a few minutes. Android people might have better luck?</p>
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
+
<p>With that out of the way, let's cover some basics!</p>
39
40
<h3>Hello hello</h3>
40
-
<p>With that out of the way, let's cover some basics.</p>
41
41
<p>
42
42
To see a test notification, <button onClick={localTest}>click on this</button>. This is a local-only test.
43
43
</p>