Compare commits

...

12 Commits

7 changed files with 168 additions and 19 deletions
+1 -1
View File
@@ -1 +1 @@
0.1.0.93
0.1.0.99
@@ -58,7 +58,8 @@ export default function PushNotificationSettings() {
trackPlausibleEvent(PlausibleEvents.PUSH_DISABLED)
}
} catch (err: unknown) {
const message = err instanceof Error ? err.message : t('profile.push_error')
console.error('Failed to toggle push notifications:', err)
const message = err instanceof Error ? `${err.name}: ${err.message}` : String(err)
showAlert(message)
void loadPrefs()
} finally {
+2 -1
View File
@@ -193,7 +193,8 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
trackPlausibleEvent(PlausibleEvents.PUSH_ENABLED)
} catch (err: unknown) {
console.error('Failed to enable push after invite:', err)
await showAlert(err instanceof Error ? err.message : t('profile.push_error'))
const message = err instanceof Error ? `${err.name}: ${err.message}` : String(err)
await showAlert(message)
}
}
+4 -2
View File
@@ -42,12 +42,14 @@ function scheduleUpdateChecks(
const onVisibilityChange = () => {
if (document.visibilityState === 'visible') {
checkForUpdate()
// Delay check on wake-up to allow the mobile network stack to stabilize
setTimeout(checkForUpdate, 2000)
}
}
const onOnline = () => {
checkForUpdate()
// Small delay to ensure connection is fully established
setTimeout(checkForUpdate, 500)
}
document.addEventListener('visibilitychange', onVisibilityChange)
+15
View File
@@ -14,6 +14,7 @@ import {
reconcileVersionOnStartup
} from './services/pwaStartup.ts'
import { redirectToPasskeyCompatibleHostIfNeeded } from './utils/passkeyHost.ts'
import { logToBackend } from './services/pushNotifications.ts'
declare global {
interface Window {
@@ -73,6 +74,20 @@ async function bootstrap(): Promise<void> {
return
}
if ('serviceWorker' in navigator && !import.meta.env.DEV) {
logToBackend('Attempting manual Service Worker registration...')
navigator.serviceWorker
.register('/sw.js', { scope: '/' })
.then((reg) => {
console.log('Service Worker registered successfully with scope:', reg.scope)
logToBackend('Service Worker registered successfully with scope: ' + reg.scope)
})
.catch((err) => {
console.error('Service Worker registration failed:', err)
logToBackend('Service Worker registration failed', err)
})
}
const rootEl = document.getElementById('root')
if (!rootEl) {
throw new Error('Missing #root element')
+139 -14
View File
@@ -2,6 +2,29 @@ import { apiFetch, apiJson } from './api.js'
const API_BASE = '/api/push'
export async function logToBackend(message: string, error?: any): Promise<void> {
try {
await fetch(`${API_BASE}/debug-log`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message,
error: error ? {
name: error.name,
message: error.message,
stack: error.stack,
...error
} : undefined,
userAgent: navigator.userAgent,
href: window.location.href,
timestamp: new Date().toISOString()
})
})
} catch (err) {
console.warn('Failed to send debug log:', err)
}
}
function urlBase64ToUint8Array(base64String: string): Uint8Array {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
@@ -30,6 +53,27 @@ export function getNotificationPermission(): NotificationPermission | 'unsupport
let cachedVapidKey: string | null = null
let cachedRegistration: ServiceWorkerRegistration | null = null
async function getRegistrationCompat(timeoutMs = 8000): Promise<ServiceWorkerRegistration> {
if (!('serviceWorker' in navigator)) {
throw new Error('Service Worker is not supported by your browser')
}
try {
const reg = await navigator.serviceWorker.getRegistration()
if (reg) return reg
} catch (e) {
console.warn('Failed to get service worker registration directly:', e)
}
// Fallback to waiting for ready state with a timeout
const readyPromise = navigator.serviceWorker.ready
const timeoutPromise = new Promise<never>((_, reject) =>
setTimeout(() => reject(new Error('Timeout waiting for Service Worker ready state')), timeoutMs)
)
return Promise.race([readyPromise, timeoutPromise])
}
export async function preloadPushService(): Promise<void> {
if (!isPushSupported()) return
try {
@@ -37,7 +81,7 @@ export async function preloadPushService(): Promise<void> {
await fetchVapidPublicKey()
}
if (!cachedRegistration) {
cachedRegistration = await navigator.serviceWorker.ready
cachedRegistration = await getRegistrationCompat()
}
} catch (err) {
console.warn('Failed to preload push service:', err)
@@ -96,11 +140,61 @@ export async function savePushPrefs(collaboratorChangesEnabled: boolean): Promis
})
}
async function requestNotificationPermission(): Promise<NotificationPermission> {
if (typeof Notification === 'undefined') return 'denied'
// Try promise-based signature first
try {
const result = Notification.requestPermission()
if (result !== undefined) {
return await result
}
} catch {
// Ignore and fall back to callback
}
// Callback-based fallback
return new Promise<NotificationPermission>((resolve) => {
Notification.requestPermission((permission) => {
resolve(permission)
})
})
}
async function saveSubscriptionToServer(subscription: PushSubscription): Promise<void> {
if (!localStorage.getItem('active_userid')) throw new Error('Not authenticated')
const endpoint = subscription.endpoint
const json = subscription.toJSON()
if (!json.endpoint || !json.keys?.p256dh || !json.keys?.auth) {
let p256dh = json.keys?.p256dh
let auth = json.keys?.auth
// Fallback for browsers (like Safari) that might not serialize keys in toJSON()
if (!p256dh && typeof subscription.getKey === 'function') {
try {
const rawKey = subscription.getKey('p256dh')
if (rawKey) {
p256dh = btoa(String.fromCharCode(...new Uint8Array(rawKey)))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
}
} catch (e) {
console.warn('Failed to extract p256dh key manually:', e)
}
}
if (!auth && typeof subscription.getKey === 'function') {
try {
const rawAuth = subscription.getKey('auth')
if (rawAuth) {
auth = btoa(String.fromCharCode(...new Uint8Array(rawAuth)))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
}
} catch (e) {
console.warn('Failed to extract auth key manually:', e)
}
}
if (!endpoint || !p256dh || !auth) {
throw new Error('Invalid push subscription')
}
@@ -109,8 +203,8 @@ async function saveSubscriptionToServer(subscription: PushSubscription): Promise
await apiJson(`${API_BASE}/subscription`, {
method: 'PUT',
body: JSON.stringify({
endpoint: json.endpoint,
keys: json.keys,
endpoint,
keys: { p256dh, auth },
locale,
userAgent: navigator.userAgent
})
@@ -118,20 +212,35 @@ async function saveSubscriptionToServer(subscription: PushSubscription): Promise
}
export async function subscribeToPush(): Promise<void> {
logToBackend('subscribeToPush called')
if (!isPushSupported()) {
logToBackend('subscribeToPush: push not supported')
throw new Error('Push notifications are not supported on this device')
}
// Pre-resolve registration and VAPID key synchronously if preloaded.
// This keeps the user gesture active for iOS Safari.
const registration = cachedRegistration || await navigator.serviceWorker.ready
const publicKey = cachedVapidKey || await fetchVapidPublicKey()
// Pre-resolve registration using getRegistrationCompat to prevent ready state hangs
let registration = cachedRegistration
if (!registration) {
try {
logToBackend('subscribeToPush: getting registration...')
registration = await getRegistrationCompat()
cachedRegistration = registration
logToBackend('subscribeToPush: got registration successfully')
} catch (err) {
logToBackend('subscribeToPush: failed to get registration', err)
throw err
}
}
const publicKey = cachedVapidKey || await fetchVapidPublicKey()
if (!publicKey) {
logToBackend('subscribeToPush: no public key available')
throw new Error('Push notifications are not configured on this server')
}
const permission = await Notification.requestPermission()
logToBackend('subscribeToPush: requesting permission...')
const permission = await requestNotificationPermission()
logToBackend(`subscribeToPush: permission result: ${permission}`)
if (permission !== 'granted') {
throw new Error('Notification permission denied')
}
@@ -139,19 +248,35 @@ export async function subscribeToPush(): Promise<void> {
const keyBytes = urlBase64ToUint8Array(publicKey)
const applicationServerKey = new Uint8Array(keyBytes)
// Always call subscribe to renew/ensure subscription without reusing stale state
const subscription = await registration.pushManager.subscribe({
// Always call subscribe with timeout to prevent silent hangs on push network errors
logToBackend('subscribeToPush: subscribing via pushManager...')
const subscribePromise = registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey
})
await saveSubscriptionToServer(subscription)
const subscribeTimeout = new Promise<never>((_, reject) =>
setTimeout(() => reject(new Error('Timeout establishing subscription with push service (FCM/APNs)')), 12000)
)
try {
const subscription = await Promise.race([subscribePromise, subscribeTimeout])
logToBackend('subscribeToPush: subscribed successfully, saving to server...')
await saveSubscriptionToServer(subscription)
logToBackend('subscribeToPush: saved to server successfully')
} catch (err) {
logToBackend('subscribeToPush: subscription or save failed', err)
throw err
}
}
export async function unsubscribeFromPush(): Promise<void> {
if (!isPushSupported()) return
const registration = cachedRegistration || await navigator.serviceWorker.ready
let registration = cachedRegistration
if (!registration) {
registration = await getRegistrationCompat()
cachedRegistration = registration
}
const subscription = await registration.pushManager.getSubscription()
if (!subscription) return
+5
View File
@@ -22,6 +22,11 @@ router.get('/vapid-public-key', (_req, res) => {
return res.json({ publicKey })
})
router.post('/debug-log', (req, res) => {
console.log('[CLIENT_DEBUG]', req.body)
return res.json({ success: true })
})
router.use(requireUser)
router.get('/prefs', async (req: any, res) => {