initial pusher beams

.env.example

@@ -62,3 +62,8 @@ GOOGLE_AUTH_ENABLE=false
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 GOOGLE_REDIRECT_URI=http://localhost/auth/google/callback
+
+PUSHER_BEAMS_ENABLED=false
+PUSHER_BEAMS_INSTANCE_ID=
+PUSHER_BEAMS_SECRET_KEY=
+VITE_PUSHER_BEAMS_INSTANCE_ID=${PUSHER_BEAMS_INSTANCE_ID}

app/Models/User.php

@@ -51,6 +51,13 @@ class User extends Authenticatable implements MustVerifyEmail
         'password' => 'hashed',
     ];
 
+    public $pushNotificationType = 'users';
+
+    public function routeNotificationForPusherPushNotifications($notification): string
+    {
+        return $this->id;
+    }
+
     public static function whereCanVerifikasi()
     {
         return static::whereIn('role', [self::ROLE_SU, self::ROLE_VERIFIKASI]);

app/Notifications/BasePermohonanNotification.php

@@ -4,20 +4,39 @@
 
 use App\Models\Permohonan;
 use Illuminate\Notifications\Notification;
+use NotificationChannels\PusherPushNotifications\PusherChannel;
+use NotificationChannels\PusherPushNotifications\PusherMessage;
 
 abstract class BasePermohonanNotification extends Notification
 {
 
+    abstract public function toArray($notifiable): array;
+
     public function __construct(protected readonly Permohonan $permohonan)
     {
     }
 
     public function via($notifiable): array
     {
-        if (config('app.env') === 'local') {
-            return ['database'];
-        }
-        return ['database', 'mail'];
+        $via = ['database'];
+        if (config('services.pusher.beams_enabled'))
+            $via[] = PusherChannel::class;
+        if (config('app.env') !== 'local')
+            $via[] = 'mail';
+
+        return $via;
+    }
+
+    public function toPushNotification($notifiable)
+    {
+        $data = $this->toArray($notifiable);
+        return PusherMessage::create()
+            ->web()
+            ->badge(1)
+            ->sound('success')
+            ->title("Permohonan")
+            ->link(route('app.permohonan.detail', ['permohonan' => $this->permohonan]))
+            ->body($data['title']);
     }
 
 }

composer.json

@@ -8,6 +8,7 @@
         "php": "^8.1",
         "blade-ui-kit/blade-icons": "^1.5",
         "guzzlehttp/guzzle": "^7.2",
+        "laravel-notification-channels/pusher-push-notifications": "^4.1",
         "laravel/fortify": "^1.18",
         "laravel/framework": "^10.10",
         "laravel/sanctum": "^3.2",

config/services.php

@@ -36,5 +36,10 @@
         'client_secret' => env('GOOGLE_CLIENT_SECRET'),
         'redirect' => env('GOOGLE_REDIRECT_URI')
     ],
+    'pusher' => [
+        'beams_enabled' => env('PUSHER_BEAMS_ENABLED', false),
+        'beams_instance_id' => env('PUSHER_BEAMS_INSTANCE_ID'),
+        'beams_secret_key' => env('PUSHER_BEAMS_SECRET_KEY'),
+    ],
 
 ];

package.json

@@ -6,6 +6,7 @@
   },
   "devDependencies": {
     "@alpinejs/persist": "^3.13.0",
+    "@pusher/push-notifications-web": "^1.1.0",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
     "@toast-ui/editor": "^3.2.2",

public/service-worker.js

@@ -0,0 +1 @@
+importScripts("https://js.pusher.com/beams/service-worker.js");

resources/js/app.js

@@ -1,7 +1,21 @@
 import {Livewire, Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
 import {dropFileComponent} from "./lib/drop-file-component";
 import './editor';
+import * as PusherPushNotifications from "@pusher/push-notifications-web";
 
-Alpine.data('drop_file_component', dropFileComponent);
-
+window.appOnLoad = (userId, beamsIsEnabled) => {
+  if (beamsIsEnabled) {
+    const beamsTokenProvider = new PusherPushNotifications.TokenProvider({
+      url: `/app/pusher/beams-auth/${userId}`,
+    });
+    const beamsClient = new PusherPushNotifications.Client({
+      instanceId: import.meta.env.VITE_PUSHER_BEAMS_INSTANCE_ID,
+    });
+    beamsClient
+      .start()
+      .then(() => beamsClient.setUserId(userId.toString(), beamsTokenProvider))
+      .catch(console.error);
+  }
+}
+window.Alpine.data('drop_file_component', dropFileComponent);
 Livewire.start()

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

@@ -13,7 +13,8 @@
   @livewireStyles
   @vite($viteAssets)
 </head>
-<body class="bg-base-200">
+<body class="bg-base-200"
+      onload="window.appOnLoad({{Auth::id()}}, {{intval(config('services.pusher.beams_enabled'))}})">
 <div class="drawer lg:drawer-open ">
   <input id="drawer" type="checkbox" class="drawer-toggle">
   <div class="drawer-content flex flex-col min-h-screen">

routes/web.php

@@ -28,6 +28,21 @@
     'prefix' => '/app',
     'as' => 'app.'
 ], function () {
+
+    Route::get('/pusher/beams-auth/{id}', function (Request $request, $id) {
+        $config = config('services.pusher');
+        if (!$config['beams_enabled']) {
+            return response()->json(["error" => "Not enabled"]);
+        }
+        $beamsClient = new \Pusher\PushNotifications\PushNotifications([
+            'instanceId' => $config['beams_instance_id'],
+            'secretKey' => $config['beams_secret_key'],
+        ]);
+        $beamsToken = $beamsClient->generateToken($id);
+        return response()->json($beamsToken);
+
+    });
+
     Route::get('/', 'App\Http\Controllers\App\DashboardController@index')->name('index');
     Route::get('/update-password', \App\Livewire\UserUpdatePasswordForm::class)->name('update-password');
     Route::get('/pemberitahuan', 'App\Http\Controllers\App\UserController@pemberitahuan')->name('pemberitahuan');

yarn.lock

@@ -180,6 +180,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pusher/push-notifications-web@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@pusher/push-notifications-web/-/push-notifications-web-1.1.0.tgz#bd5bab25971eab523e0b2d0fb519beeae56aec1c"
+  integrity sha512-qR9RZNpH9E54GEpn9uqag9VbLG3kk13DPtf0v4ScsbIZhLFrc1vVWoylzh9zPKiJx3LLwnSxZQA/DkF13OBYXw==
+
 "@tailwindcss/line-clamp@^0.4.4":
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
@@ -500,11 +505,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-highcharts@^11.1.0:
-  version "11.1.0"
-  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-11.1.0.tgz#715eb55fd081351b526e28cd89ac0e4e30b35c15"
-  integrity sha512-vhmqq6/frteWMx0GKYWwEFL25g4OYc7+m+9KQJb/notXbNtIb8KVy+ijOF7XAFqF165cq0pdLIePAmyFY5ph3g==
-
 immutable@^4.0.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"