fix(push notification): menghindari duplikasi subscription

app/Livewire/Studio/Dashboard/Overview.php

@@ -253,14 +253,25 @@ protected function loadStats()
     #[On('notification:subscribe')]
     public function notificationSubscribe(string $subscription)
     {
+        $subscription = json_decode($subscription, true);
+
+        $isExist = PushNotification::where('user_id', auth()->id())
+            ->whereJsonContains('subscriptions->keys->auth', $subscription['keys']['auth'])
+            ->first();
+
+        if ($isExist) {
+            return;
+        }
+
         $userId = auth()->id();
 
+        $encodedSubscription = json_encode($subscription);
         PushNotification::updateOrCreate(
             [
                 'user_id' => $userId,
-                'subscriptions' => $subscription,
+                'subscriptions' => $encodedSubscription,
             ],
-            ['subscriptions' => $subscription]
+            ['subscriptions' => $encodedSubscription],
         );
     }
 

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

@@ -24,24 +24,38 @@
 
         @fluxScripts
         <script>
+            let isSubscribed = false;
+
             document.addEventListener('livewire:navigated', () => {
-                Notification.requestPermission().then((permission) => {
-                    if (permission === 'granted') {
-                        navigator.serviceWorker.ready.then((sw) => {
-                            sw.pushManager.subscribe({
-                                userVisibleOnly: true,
-                                applicationServerKey: '{{ config('services.vapid.public_key') }}',
-                            }).then((subscription) => {
-                                const json = JSON.stringify(subscription)
-                                Livewire.dispatch('notification:subscribe', {
-                                    subscription: json
-                                })
-                            })
-                        })
-                    }
-                })
+                if (isSubscribed) return;
+
+                if (Notification.permission === 'granted') {
+                    subscribePush();
+                    isSubscribed = true;
+                } else if (Notification.permission !== 'denied') {
+                    Notification.requestPermission().then((permission) => {
+                        if (permission === 'granted' && !isSubscribed) {
+                            subscribePush();
+                            isSubscribed = true;
+                        }
+                    });
+                }
+
                 navigator.serviceWorker.register('{{ URL::asset('service-worker.js') }}');
-            })
+            });
+
+            function subscribePush() {
+                navigator.serviceWorker.ready.then((sw) => {
+                    sw.pushManager.subscribe({
+                        userVisibleOnly: true,
+                        applicationServerKey: '{{ config('services.vapid.public_key') }}',
+                    }).then((subscription) => {
+                        Livewire.dispatch('notification:subscribe', {
+                            subscription: JSON.stringify(subscription)
+                        });
+                    });
+                });
+            }
         </script>
     </body>