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 registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({ const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true, 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; isSubscribed.value = true;
} }
@ -28,7 +37,14 @@ export function usePushNotifications() {
const subscription = await registration.pushManager.getSubscription(); const subscription = await registration.pushManager.getSubscription();
if (subscription) { 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(); await subscription.unsubscribe();
} }
@ -40,9 +56,11 @@ export function usePushNotifications() {
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/'); const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = window.atob(base64); const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length); const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) { for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i); outputArray[i] = rawData.charCodeAt(i);
} }
return outputArray; return outputArray;
} }

View File

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