A Quick Guide to Implement Firebase Web Push Notification in Laravel

Through this post, I will demonstrate Firebase Web Push Notification by creating a simple Laravel application. I hope, if you understand the process, you can implement web push notification not only in Laravel but also in other frameworks.

Our Application Features

  1. Authentication
  2. Authorization
  3. Firebase Web Push Notification (admin to other users)

Firebase

If you are here, I assume you already know about firebase. What Wikipedia says about firebase, is

Firebase provides a realtime database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud.

Now that we have got a healthy short refresh on Firebase, we can finally jump into the implementation part.

Implementation

➭ Step 1 # Create Project and App in Firebase

Go to Firebase Console, create a project. Under that project, build a web app. For example, we give the web app name “web-push-notification”.

<script>

var firebaseConfig = {
apiKey: "<api-key>",
authDomain: "<xxxxx>.firebaseapp.com",
databaseURL: "https://<xxxxx>.firebaseio.com",
projectId: "<xxxxx>",
storageBucket: "<xxxxx>.appspot.com",
messagingSenderId: "<xxxxx>",
appId: "<xxxxx>"
};

firebase.initializeApp(firebaseConfig);
</script>

➭ Step 2 # Laravel App

Install a fresh Laravel (In this example, Laravel Version 6.2 and PHP Version 7.2),

composer create-project --prefer-dist laravel/laravel web-push-notification

➭ Step 3 # Database, Seed and User Roles

In our Application, there will be two types of users —

Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->string('device_token')->nullable();
$table->integer('role')->comment('1 for admin, 2 for general user');
$table->rememberToken();
$table->timestamps();
});
public function run()
{
$users = [
[
'id' => 1,
'name' => 'admin',
'email' => 'admin@admin.com',
'role' => '1',
'password' => bcrypt('admin@123'),
'created_at' => Carbon::now(),
'updated_at' => Carbon::now(),
],
[
'id' => 2,
'name' => 'ron',
'email' => 'ron@example.com',
'role' => '2',
'password' => bcrypt('admin@123'),
'created_at' => Carbon::now(),
'updated_at' => Carbon::now(),
]
];

DB::table('users')->insert($users);
}
php artisan migrate:fresh --seed
php artisan serve
Admin’s Dashboard: Admin will see general users in the dashboard
General user’s dashboard

➭ Step 4 # Firebase Integration in Our Application

Create a file in the public folder.

'firebase_server_key' => env('FIREBASE_SERVER_KEY'),

Software Engineer | Professional Scrum Master | Research Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store