Integrating Laravel with Firebase and using Vue.js to send push notifications

What is Firebase?

Firebase is a mobile and web application development platform developed by Google. It provides a number of services such as real-time database, authentication, and hosting, making it an all-in-one solution for building modern applications.

One of the key features of Firebase is its ability to send push notifications to users’ devices. This can be particularly useful for keeping users engaged with your application and providing them with timely updates.

Integrating Laravel with Firebase

To integrate Laravel with Firebase, you’ll first need to sign up for a Firebase account and create a new project. Once you’ve done this, you’ll need to install the Firebase PHP library by running the following command:

composer require kreait/firebase-php

Next, you’ll need to create a service account for your Firebase project and download the JSON file containing your service account credentials. This file will contain your project’s private key, which you’ll need to use to authenticate your application with Firebase.

Once you’ve downloaded the JSON file, you’ll need to add it to your Laravel project and set the path to the file in the .env file as follows:

FIREBASE_CREDENTIALS_PATH=path/to/service-account.json

Next, you’ll need to create a Firebase client in your Laravel application. You can do this by adding the following code to your AppServiceProvider:

use Kreait\Firebase\Factory;
use Kreait\Firebase\ServiceAccount;

public function register()
{
    $this->app->singleton(Factory::class, function () {
        $serviceAccount = ServiceAccount::fromJsonFile(env('FIREBASE_CREDENTIALS_PATH'));
        return (new Factory)
            ->withServiceAccount($serviceAccount);
    });
}

Now that you have a Firebase client, you can use it to send push notifications to your users.

Sending push notifications with Vue.js

To send push notifications with Vue.js, you’ll first need to install the Firebase JavaScript library by running the following command:

npm install firebase

Next, you’ll need to create a Vue component that will handle the push notification form. You can do this by creating a new file in the resources/js/components directory and add the following code:

<template>
  <form>
    <!-- form fields go here -->
  </form>
</template>

<script>
import firebase from 'firebase';

export default {
  data() {
    return {
      // form data goes here
    }
  },
  methods: {
    // form submission logic goes here
   sendNotification() {
    const messaging = firebase.messaging();
    messaging.getToken().then((currentToken) => {
      messaging.sendToDevice(currentToken, {
        notification: {
          title: 'Push notification title',
          body: 'Push notification body',
        }
      });
  });
}
});

You can then bind this method to a button or form submission event in your template, like so:

<template>
  <form @submit.prevent="sendNotification">
    <!-- form fields go here -->
    <button type="submit">Send notification</button>
  </form>
</template>

Receiving push notifications on the web

To receive push notifications on the web, you’ll need to do the following:

1. Request permission from the user to send them notifications.
2. If the user grants permission, get their messaging token.
3. Use the messaging token to subscribe the user to a specific topic or send them a notification directly.

Here’s an example of how you might request permission and get the messaging token in your Vue component:

requestPermission() {
  const messaging = firebase.messaging();
  messaging.requestPermission().then(() => {
    console.log('Notification permission granted.');
    // get the messaging token
    messaging.getToken().then((currentToken) => {
      if (currentToken) {
        console.log(currentToken);
        // subscribe the user to a topic or send them a notification
      } else {
        console.log('No Instance ID token available. Request permission to generate one.');
      }
    });
  }).catch((err) => {
    console.log('Unable to get permission to notify.', err);
  });
}

You can then bind this method to a button or form submission event in your template, like so:

<template>
  <button @click="requestPermission">Request permission</button>
</template>

Receiving push notifications on mobile devices

To receive push notifications on mobile devices, you’ll need to do the following:

1. Install the Firebase Cloud Messaging (FCM) SDK in your mobile app.
2. Request permission from the user to send them notifications.
3. If the user grants permission, get their messaging token.
4. Use the messaging token to subscribe the user to a specific topic or send them a notification directly.

To install the FCM SDK in your mobile app, follow the instructions in the Firebase documentation.

To request permission and get the messaging token in your mobile app, you’ll need to use the FCM API. Here’s an example of how you might do this in an Android app:

FirebaseMessaging.getInstance().subscribeToTopic("news");

String token = FirebaseInstanceId.getInstance().getToken();
Log.d(TAG, "FCM Token: " + token);

In an iOS app, you can use the following code to request permission and get the messaging token:

if #available(iOS 10.0, *) {
  // For iOS 10 display notification (sent via APNS)
  UNUserNotificationCenter.current().delegate = self

  let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
  UNUserNotificationCenter.current().requestAuthorization(
    options: authOptions,
    completionHandler: {_, _ in })
} else {
  let settings: UIUserNotificationSettings =
  UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
  UIApplication.shared.registerUserNotificationSettings(settings)
}

UIApplication.shared.registerForRemoteNotifications()

Once you have the messaging token, you can use it to subscribe the user to a specific topic or send them a notification directly.

Conclusion

In this blog post, we’ve covered how to integrate Laravel with Firebase and use Vue.js to send push notifications to users’ devices. We’ve also looked at how to receive push notifications on the web and on mobile devices.

At Electroinvest, we work with these technologies on a daily basis to build robust, scalable applications that keep users engaged and informed.

With the right tools and techniques, you can easily add push notification capabilities to your Laravel and Vue.js applications and keep your users informed and engaged.