v0.12.30 add notifications for iOS

This commit is contained in:
2026-03-26 14:49:17 -04:00
parent 6e5c39607c
commit d6a37d5948
11 changed files with 386 additions and 149 deletions

View File

@@ -27,6 +27,7 @@ export default function ProfileModal({ onClose }) {
const [notifPermission, setNotifPermission] = useState(
typeof Notification !== 'undefined' ? Notification.permission : 'unsupported'
);
const isIOS = /iphone|ipad/i.test(navigator.userAgent);
const [hideAdminTag, setHideAdminTag] = useState(!!user?.hide_admin_tag);
const [allowDm, setAllowDm] = useState(user?.allow_dm !== 0);
@@ -216,7 +217,9 @@ export default function ProfileModal({ onClose }) {
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '10px 12px', borderRadius: 8, background: 'var(--surface-variant)' }}>
<div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
{notifPermission === 'denied'
? 'Notifications are blocked. Enable them in Android Settings → Apps → RosterChirp → Notifications.'
? isIOS
? 'Notifications are blocked. Enable them in iOS Settings → RosterChirp → Notifications.'
: 'Notifications are blocked. Enable them in Android Settings → Apps → RosterChirp → Notifications.'
: 'Push notifications are not yet enabled on this device.'}
</div>
{notifPermission === 'default' && (
@@ -232,7 +235,12 @@ export default function ProfileModal({ onClose }) {
<div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
<p style={{ margin: '0 0 8px' }}>Tap <strong>Send Test Notification</strong> to trigger a push to this device. The notification will arrive shortly if everything is configured correctly.</p>
<p style={{ margin: 0 }}>If it doesn't arrive, check:<br/>
• Android Settings → Apps → RosterChirp → Notifications → Enabled<br/>
{isIOS ? (
<>• iOS Settings → RosterChirp → Notifications → Allow<br/>
• App must be added to the Home Screen (not open in Safari)<br/></>
) : (
<>• Android Settings → Apps → RosterChirp → Notifications → Enabled<br/></>
)}
• App is backgrounded when the test fires
</p>
</div>
@@ -258,30 +266,34 @@ export default function ProfileModal({ onClose }) {
>
{pushTesting ? 'Sending' : 'Test (via SW)'}
</button>
<button
className="btn btn-secondary"
style={{ flex: 1 }}
disabled={pushTesting}
onClick={async () => {
setPushTesting(true);
setPushResult(null);
try {
const { results } = await api.testPush('browser');
setPushResult({ ok: true, results, mode: 'browser' });
} catch (e) {
setPushResult({ ok: false, error: e.message });
} finally {
setPushTesting(false);
}
}}
>
{pushTesting ? 'Sending' : 'Test (via Browser)'}
</button>
</div>
<div style={{ fontSize: 12, color: 'var(--text-tertiary)', lineHeight: 1.4 }}>
<strong>Test (via SW)</strong> — normal production path, service worker shows notification.<br/>
<strong>Test (via Browser)</strong> — bypasses service worker; Chrome displays directly.
{!isIOS && (
<button
className="btn btn-secondary"
style={{ flex: 1 }}
disabled={pushTesting}
onClick={async () => {
setPushTesting(true);
setPushResult(null);
try {
const { results } = await api.testPush('browser');
setPushResult({ ok: true, results, mode: 'browser' });
} catch (e) {
setPushResult({ ok: false, error: e.message });
} finally {
setPushTesting(false);
}
}}
>
{pushTesting ? 'Sending' : 'Test (via Browser)'}
</button>
)}
</div>
{!isIOS && (
<div style={{ fontSize: 12, color: 'var(--text-tertiary)', lineHeight: 1.4 }}>
<strong>Test (via SW)</strong> — normal production path, service worker shows notification.<br/>
<strong>Test (via Browser)</strong> — bypasses service worker; Chrome displays directly.
</div>
)}
</>)}
{pushResult && (
<div style={{