periodic background sync experiment

.changeset/early-radios-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@verdant-web/store': patch
+---
+
+Experimental support for periodic background sync

packages/store/package.json

@@ -13,6 +13,11 @@
 			"development": "./src/backup.ts",
 			"import": "./dist/esm/backup.js",
 			"types": "./dist/esm/backup.d.ts"
+		},
+		"./serviceWorker": {
+			"development": "./src/sync/serviceWorker.ts",
+			"import": "./dist/esm/sync/serviceWorker.js",
+			"types": "./dist/esm/sync/serviceWorker.d.ts"
 		}
 	},
 	"publishConfig": {
@@ -24,6 +29,10 @@
 			"./backup": {
 				"import": "./dist/esm/backup.js",
 				"types": "./dist/esm/backup.d.ts"
+			},
+			"./serviceWorker": {
+				"import": "./dist/esm/sync/serviceWorker.js",
+				"types": "./dist/esm/sync/serviceWorker.d.ts"
 			}
 		},
 		"access": "public"

packages/store/src/sync/Sync.ts

@@ -20,6 +20,7 @@ import {
 } from './ServerSyncEndpointProvider.js';
 import { WebSocketSync } from './WebSocketSync.js';
 import { Context } from '../context.js';
+import { attemptToRegisterBackgroundSync } from './background.js';
 
 type SyncEvents = {
 	onlineChange: (isOnline: boolean) => void;
@@ -332,6 +333,8 @@ export class ServerSync<Presence = any, Profile = any>
 		if (autoStart) {
 			this.start();
 		}
+
+		attemptToRegisterBackgroundSync();
 	}
 
 	get canDoRealtime() {

packages/store/src/sync/background.ts

@@ -0,0 +1,27 @@
+export async function attemptToRegisterBackgroundSync() {
+	try {
+		const status = await navigator.permissions.query({
+			name: 'periodic-background-sync' as any,
+		});
+		if (status.state === 'granted') {
+			// Periodic background sync can be used.
+			const registration = await navigator.serviceWorker.ready;
+			if ('periodicSync' in registration) {
+				try {
+					await (registration.periodicSync as any).register('verdant-sync', {
+						// An interval of one day.
+						minInterval: 24 * 60 * 60 * 1000,
+					});
+				} catch (error) {
+					// Periodic background sync cannot be used.
+					console.warn('Failed to register background sync:', error);
+				}
+			}
+		} else {
+			// Periodic background sync cannot be used.
+			console.debug('Background sync permission is not granted:', status);
+		}
+	} catch (error) {
+		console.error('Failed to initiate background sync:', error);
+	}
+}

packages/store/src/sync/serviceWorker.ts

@@ -0,0 +1,27 @@
+import type { ClientDescriptor } from '../client/ClientDescriptor.js';
+
+export async function registerBackgroundSync(clientDesc: ClientDescriptor) {
+	self.addEventListener('periodicsync', (event: any) => {
+		if (event.tag === 'verdant-sync') {
+			// See the "Think before you sync" section for
+			// checks you could perform before syncing.
+			event.waitUntil(sync(clientDesc));
+		}
+	});
+}
+
+async function sync(clientDesc: ClientDescriptor) {
+	try {
+		const client = await clientDesc.open();
+
+		await client.sync.syncOnce();
+	} catch (err) {
+		console.error('Failed to sync:', err);
+		if (err instanceof Error) {
+			localStorage.setItem(
+				'backgroundSyncError',
+				`${err.name}: ${err.message}`,
+			);
+		}
+	}
+}