Cara Mudah Push Notifikasi Dengan Laravel Firebase

• Maulana Saputra
• 24 Jan 2021 - php | Laravel
• https://www.itsolutionstuff.com/post/laravel-firebase-push-notification-tutorialexample.html

1. Menambahkan File Credential

Di sini kita akan menambahkan env firebase bedasarkan donwload apps berupa credential json yang kita daftarkan dari firebase console

FIREBASE_CREDENTIALS=firebase-credential-demo.json

2. Membuat Firebase Notification

Pada langkah ini kita akan menambahkan request permission, mengambil token, dan menampilkan notifikasi pada browser.

Buat file pada public\js\firebase.js dan masukan script di bawah ini.

var firebaseConfig = {
	apiKey: "xxx",
	authDomain: "firebase-demo.firebaseapp.com",
	projectId: "firebase-demo",
	storageBucket: "firebase-demo.appspot.com",
	messagingSenderId: "12345",
	appId: "1:12345:web:12345abc",
	measurementId: "G-N8EHJ1Y15R"
};
  
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.requestPermission().then(function () {
	return messaging.getToken({ vapidKey: '*public-key' })
}).then(function(token) {
	console.log(token);
	$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
	$.ajax({
		url: 'api/firebase/register',
		type: 'POST',
		data: { token: token },
		dataType: 'JSON',
		success: function (response) {
			console.log('Token has storing.');
		},
		error: function (err) {
			console.log('Token Error: ' + err);
		},
	});
}).catch(function (err) {
	console.log('Token Error'+ err);
});
  
messaging.onMessage(function(payload) {
	const noteTitle = payload.notification.title;
	const noteOptions = {
		body: payload.notification.body,
		icon: payload.notification.icon,
	};
	new Notification(noteTitle, noteOptions);
});

Lalu kita panggil pada home.

<script src="" defer></script>

3. Membuat Controller Firebase

Pada langkah ini kita akan membuat controller firebase untuk menyetor token dan membuat send notification. Untuk menyetor token di sini kita menggunakan cloud message yang sudah di sediakan, untuk lebih lanjut kalian bisa kunjungi tutorial di sini kreait/laravel-firebase.

php artisan make:controller FirebaseController

Kemudian tambahkan script di bawah ini.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Kreait\Firebase\Messaging\CloudMessage;
use Kreait\Firebase\Messaging\WebPushConfig;

class FirebaseController extends Controller
{
    public function register(Request $request)
    {
        $messaging = app('firebase.messaging');

        $topic = 'testing';

        $result = $messaging->subscribeToTopic($topic, $request->token);

        return response()->json(['status' => $result[$topic][$request->token] ?? 'OK']);
    }
    
    public function sendNotification(Request $request) {

        $messaging = app('firebase.messaging');

        $topic = 'testing';

        $message = CloudMessage::withTarget('topic', $topic);

        $config = WebPushConfig::fromArray([
            'notification' => [
                'title' => $request->title,
                'body' => $request->body,
                'icon' => asset('favicon.ico'),
            ],
            'fcm_options' => [
                'link' => url('/'),
            ],
        ]);

        $message = $message->withWebPushConfig($config);

        $messaging->send($message);
    }
}

Lalu tambahkan route pada api.

Route::post('firebase/register', 'FirebaseController@register')->name('firebase.register');
Route::post('firebase/send-notification', 'FirebaseController@sendNotification')->name('firebase.send-notification');

4. Membuat Form

Pada langkah ini kita akan membuat form.blade.php untuk mengetes pada push notification.

@extends('layouts.app')

@section('title', 'Form Push Notification')

@section('content')
<div class="card-body">
	@if (session('status'))
		<div class="alert alert-success" role="alert">
			
		</div>
	@endif
	<form action="" method="POST">
		@csrf
		<div class="form-group">
			<label>Title</label>
			<input type="text" class="form-control" name="title">
		</div>
		<div class="form-group">
			<label>Body</label>
			<textarea class="form-control" name="body"></textarea>
		  </div>
		<button type="submit" class="btn btn-primary">Send</button>
	</form>
</div>
@endsection

Sekian untuk kali ini semoga bermanfaat :D untuk lebih lanjut bisa kunjungi link tersebut.