Dalam tutorial ini, Anda akan mempelajari contoh notifikasi firebase laravel 8. saya ingin menunjukkan kepada Anda laravel 8 firebase web push notification. Artikel ini menjelaskan secara mendetail tentang firebase web push notification laravel 8. Anda akan belajar mengirim notifikasi push firebase menggunakan laravel 8.
Hari ini, saya akan memberikan contoh sederhana mengirim notifikasi push Firebase menggunakan laravel.
Firebase menyediakan database dan backend realtime sebagai layanan. Layanan ini menyediakan API bagi pengembang aplikasi yang memungkinkan data aplikasi disinkronkan di seluruh klien dan disimpan di cloud Firebase.
firebase push notification adalah open source gratis dan Anda dapat dengan mudah menerapkannya menggunakan akun google Anda. di sini saya akan memberi Anda kemudahan untuk mendapatkan token perangkat dari pengguna yang masuk dan kemudian kami akan mengirimkan pemberitahuan push web. jadi mari kita ikuti langkah di bawah ini untuk membuat notifikasi push dengan aplikasi laravel.
Pratinjau:
Langkah 1: Buat Proyek dan Aplikasi Firebase
Pada langkah pertama, kita harus pergi ke Firebase Console dan membuat proyek. maka Anda harus membuat aplikasi web pada proyek itu seperti yang saya tambahkan di bawah tangkapan layar:
Setelah diberi nama dan selanjutnya Anda akan menerima firebase sdk seperti di bawah screen shot:
Anda harus menyimpan semua informasi itu karena kami akan menggunakan di aplikasi kami.
Langkah 2: Instal Laravel 8
pertama-tama kita perlu mendapatkan aplikasi Laravel 8 baru menggunakan perintah di bawah ini, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:
composer create-project --prefer-dist laravel/laravel blogFirebaseLangkah 3: Buat Auth menggunakan scaffold
Nah pada langkah ini kita akan membuat perintah auth scaffold untuk membuat login, register dan dashboard. jadi jalankan perintah berikut:
Laravel UI Package
composer require laravel/ui Generate auth
php artisan ui bootstrap --auth
npm install
npm run dev
Langkah 4: Buat Migrasi dan Perbarui Model
Pada langkah ini, kita perlu menambahkan baris baru "device_token" di tabel dan model pengguna. daripada yang kita butuhkan untuk membuat migrasi baru. jadi mari kita buat migrasi baru dengan mengikuti perintah.
php artisan make:migration add_column_device_tokendatabase/migrations/2020_10_23_144523_add_column_device_token.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddColumnDeviceToken extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('device_token')->nullable();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
}
}app/Models/User.php
<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name',
'email',
'password',
'device_token'
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast to native types.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
}Sekarang kita perlu menjalankan migrasi.
jadi mari kita jalankan perintah di bawah ini:
php artisan migrateLangkah 5: Buat Rute
Di sini, kita perlu menambahkan beberapa route untuk menyimpan token dan mengirim notifikasi push jadi mari tambahkan route itu di file web.php.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::post('/save-token', [App\Http\Controllers\HomeController::class, 'saveToken'])->name('save-token');
Route::post('/send-notification', [App\Http\Controllers\HomeController::class, 'sendNotification'])->name('send.notification');Langkah 6: Tambahkan Method pada Controller
Di sini, kita perlu menambahkan metode saveToken () dan sendNotification () untuk rute admin di HomeController.
In this controller there is a $SERVER_API_KEY variable where you have to get server key from firebase console setting page as like bellow screenshot:
sekarang, jadi mari tambahkan seperti di bawah ini:
app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Contracts\Support\Renderable
*/
public function index()
{
return view('home');
}
/**
* Write code on Method
*
* @return response()
*/
public function saveToken(Request $request)
{
auth()->user()->update(['device_token'=>$request->token]);
return response()->json(['token saved successfully.']);
}
/**
* Write code on Method
*
* @return response()
*/
public function sendNotification(Request $request)
{
$firebaseToken = User::whereNotNull('device_token')->pluck('device_token')->all();
$SERVER_API_KEY = 'XXXXXX';
$data = [
"registration_ids" => $firebaseToken,
"notification" => [
"title" => $request->title,
"body" => $request->body,
]
];
$dataString = json_encode($data);
$headers = [
'Authorization: key=' . $SERVER_API_KEY,
'Content-Type: application/json',
];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://fcm.googleapis.com/fcm/send');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $dataString);
$response = curl_exec($ch);
dd($response);
}
}Langkah 7: Perbarui File Blade
Pada langkah ini, kita perlu memperbarui file home.blade.php di mana Anda harus menulis kode untuk mengirim notifikasi dan memungkinkan tombol notifikasi. Ketika Anda mengklik tombol itu, popup browser akan terbuka dengan opsi izinkan dan Anda harus mengizinkannya.
jadi mari kita ubah.
resource/views/home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<center>
<button id="btn-nft-enable" onclick="initFirebaseMessagingRegistration()" class="btn btn-danger btn-xs btn-flat">Allow for Notification</button>
</center>
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<form action="{{ route('send.notification') }}" 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 Notification</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/7.23.0/firebase.js"></script>
<script>
var firebaseConfig = {
apiKey: "XXXX",
authDomain: "XXXX.firebaseapp.com",
databaseURL: "https://XXXX.firebaseio.com",
projectId: "XXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXX",
appId: "XXXX",
measurementId: "XXX"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
function initFirebaseMessagingRegistration() {
messaging
.requestPermission()
.then(function () {
return messaging.getToken()
})
.then(function(token) {
console.log(token);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '{{ route("save-token") }}',
type: 'POST',
data: {
token: token
},
dataType: 'JSON',
success: function (response) {
alert('Token saved successfully.');
},
error: function (err) {
console.log('User Chat Token Error'+ err);
},
});
}).catch(function (err) {
console.log('User Chat 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);
});
</script>
@endsectionLangkah 8: Buat File firebase-messaging-sw.js
public/firebase-messaging-sw.js
/*
Give the service worker access to Firebase Messaging.
Note that you can only use Firebase Messaging here, other Firebase libraries are not available in the service worker.
*/
importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-messaging.js');
/*
Initialize the Firebase app in the service worker by passing in the messagingSenderId.
* New configuration for [email protected]
*/
firebase.initializeApp({
apiKey: "XXXX",
authDomain: "XXXX.firebaseapp.com",
databaseURL: "https://XXXX.firebaseio.com",
projectId: "XXXX",
storageBucket: "XXXX",
messagingSenderId: "XXXX",
appId: "XXXX",
measurementId: "XXX"
});
/*
Retrieve an instance of Firebase Messaging so that it can handle background messages.
*/
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
console.log(
"[firebase-messaging-sw.js] Received background message ",
payload,
);
/* Customize notification here */
const notificationTitle = "Background Message Title";
const notificationOptions = {
body: "Background Message body.",
icon: "/itwonders-web-logo.png",
};
return self.registration.showNotification(
notificationTitle,
notificationOptions,
);
});Oke, sekarang kita siap jalankan proyek.
Jadi mari kita jalankan proyek menggunakan perintah ini:
php artisan serveAnda dapat masuk dan kemudian mengizinkan pemberitahuan push untuk mengklik tombol. kemudian kirim pemberitahuan dari formulir yang diberikan.
Anda akan menerima notifikasi seperti di bawah ini:
Anda dapat mengunduh kode dari git: Download Code From Github
Saya harap ini dapat membantu Anda ...
notification web push firebase laravel 8
andriajah