app/Filament/Pages/NotificationSettings.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Filament\Pages;
+
+use Filament\Pages\Page;
+
+class NotificationSettings extends Page
+{
+    protected static ?string $navigationIcon = 'heroicon-o-document-text';
+
+    protected static string $view = 'filament.pages.notification-settings';
+
+
+    public static function getScripts(): array
+    {
+        return [
+            asset('js/push.js')
+        ];
+    }
+}

resources/views/filament/pages/notification-settings.blade.php

@@ -0,0 +1,39 @@
+<x-filament-panels::page>
+    <button
+        type="button"
+        class="filament-button filament-button-primary"
+        onclick="registerPush()"
+    >
+        Enable Push Notifications
+    </button>
+
+    <script>
+        const vapidKey = "{{ config('webpush.vapid.public_key') }}";
+        const csrfToken = "{{ csrf_token() }}";
+
+        async function registerPush() {
+            if (!('serviceWorker' in navigator)) return;
+
+            const permission = await Notification.requestPermission();
+            if (permission != 'granted') return;
+
+            const registration = await navigator.serviceWorker.register('/service-worker.js');
+
+            const subscription = await registration.pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey: vapidKey
+            });
+
+            await fetch('/push/subscribe', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken
+                },
+                body: JSON.stringify(subscription)
+            });
+
+            alert("Push notifications enabled ✅");
+        }
+    </script>
+</x-filament-panels::page>