Wed May 2021 1 year ago

Tutorial Laravel 8 Firebase Web Push Notification

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 waktu nyata 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 blogFirebase

Langkah 3: Create Auth Menggunakan scaffold

Nah, pada langkah ini kita akan membuat perintah auth scaffold untuk membuat login, register dan dashboard. jadi jalankan perintah berikut:

Paket UI Laravel

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_token

database/migrations/2021_05_12_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 migrate

Langkah 5: Buat Route

Di sini, kita perlu menambahkan beberapa route untuk menyimpan token dan mengirim notifikasi push jadi mari tambahkan route itu di file web.php.

route/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 Metode pada Controller

Di sini, kita perlu menambahkan metode saveToken() dan sendNotification() untuk route admin di HomeController.

Di pengontrol ini ada variabel $ SERVER_API_KEY di mana Anda harus mendapatkan server key dari halaman pengaturan konsol firebase seperti screenshot di bawah ini:

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: Update Blade File

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.

resources/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>
@endsection

 

Langkah 8: Create firebase-messaging-sw.js File

Pada langkah ini, kita harus membuat firebase-messaging-sw.js di folder publik dan meletakkan kode di bawah ini.

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 lari.

 

Jadi mari kita jalankan proyek menggunakan perintah ini:

php artisan serve

Anda 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:

Saya harap ini dapat membantu Anda...

web push notification laravel firebase laravel laravel 8 laravel