feat: Implement PWA features by adding a manifest, enhancing the service worker for push notifications, and improving notification delivery parameters.

app/Jobs/StorePushNotification.php

@@ -43,7 +43,7 @@ public function handle(): void
             $webPush->sendOneNotification(
                 Subscription::create(json_decode($notification->subscriptions, true)),
                 $payload,
-                ['TTL' => 5000],
+                ['TTL' => 86400, 'urgency' => 'high'],
             );
         }
     }

public/manifest.json

@@ -0,0 +1,20 @@
+{
+    "name": "Pangestu Yadi Parfum",
+    "short_name": "PYParfum",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#000000",
+    "icons": [
+        {
+            "src": "/assets/images/logo.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/images/logo.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

public/service-worker.js

@@ -1,11 +1,27 @@
+self.addEventListener('install', (event) => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(clients.claim());
+});
+
 self.addEventListener('push', (event) => {
-    const notification = event.data.json();
+    let notification;
+    try {
+        notification = event.data.json();
+    } catch (e) {
+        return;
+    }
 
     event.waitUntil(
         self.registration.showNotification(
             notification.title, {
             body: notification.body,
             icon: 'assets/images/dark-logo.png',
+            badge: 'assets/images/dark-logo.png',
+            vibrate: [200, 100, 200],
+            requireInteraction: true,
             data: {
                 url: notification.url
             }
@@ -14,7 +30,20 @@ self.addEventListener('push', (event) => {
 })
 
 self.addEventListener('notificationclick', (event) => {
+    event.notification.close();
+
     event.waitUntil(
-        clients.openWindow(event.notification.data.url)
-    );
+        clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+            // Check if there's already a tab open with this URL
+            for (const client of clientList) {
+                if (client.url === event.notification.data.url && 'focus' in client) {
+                    return client.focus();
+                }
+            }
+            // If not, open a new window
+            if (clients.openWindow) {
+                return clients.openWindow(event.notification.data.url);
+            }
         })
+    );
+});

resources/views/components/layouts/home.blade.php

@@ -8,6 +8,7 @@
         @vite(['resources/css/app.css', 'resources/js/app.js'])
         @fluxAppearance
         <link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
+        <link rel="manifest" href="{{ asset('manifest.json') }}">
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
     </head>