web push nu zonder axios
Some checks failed
linter / quality (push) Failing after 1m4s
tests / ci (8.3) (push) Failing after 49s
tests / ci (8.5) (push) Failing after 1m7s
tests / ci (8.4) (push) Failing after 10m2s

This commit is contained in:
Daan Meijer 2026-06-21 23:55:36 +02:00
parent 5ad018ed6e
commit 2b28831c2f
2 changed files with 24 additions and 3 deletions

View File

@ -11,10 +11,19 @@ export function usePushNotifications() {
const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(import.meta.env.VITE_VAPID_PUBLIC_KEY),
applicationServerKey: urlBase64ToUint8Array(
document.querySelector('meta[name="vapid-public-key"]')?.getAttribute('content') || '',
),
});
await axios.post('/subscriptions', subscription);
await fetch('/subscriptions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify(subscription),
});
isSubscribed.value = true;
}
@ -28,7 +37,14 @@ export function usePushNotifications() {
const subscription = await registration.pushManager.getSubscription();
if (subscription) {
await axios.post('/subscriptions/delete', { endpoint: subscription.endpoint });
await fetch('/subscriptions/delete', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify({ endpoint: subscription.endpoint }),
});
await subscription.unsubscribe();
}
@ -40,9 +56,11 @@ export function usePushNotifications() {
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}

View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- Inline script to detect system dark mode preference and apply it immediately --}}
<script>
@ -34,6 +35,8 @@
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="vapid-public-key" content="{{ config('webpush.vapid.public_key') }}">
@fonts
@routes