website/islands/RegisterServiceWorker.tsx

import { requestApi } from ':src/utils.ts'

export default function RegisterServiceWorker() {
	if ('serviceWorker' in navigator) {
		import(':islands/StartServiceWorker.tsx').then(async (mod) => {
			const href = mod.default()
			const registration = await navigator.serviceWorker.register(href, {
				scope: '/',
				type: 'module',
			})

			// Notification.requestPermission().then((permission) => {
			// if (permission !== 'granted') return

			// registration.showNotification('Notification permission granted', {
			// 	body: 'Notification is ok.',
			// })
			// })

			async function getSubscription() {
				const currentSubscription = await registration.pushManager
					.getSubscription()
				if (currentSubscription) return currentSubscription

				const applicationServerKey = await requestApi<void, string>(
					'webpush/vapid',
					'GET',
				)

				return await registration.pushManager.subscribe({
					userVisibleOnly: true,
					applicationServerKey,
				})
			}

			try {
				const subscription = await getSubscription()
				await requestApi('webpush/subscription', 'POST', subscription)
			} catch (cause) {
				console.error('Push subscription is not available', { cause })
			}
		})
	}

	return <></>
}