Laravel 10 Push Notifications Without npm: A Step-by-Step Guide

Creating a real-time notification system in Laravel 10 using Pusher without npm and node installations is possible, but it may not be as efficient or straightforward as utilizing the suggested tools and packages. Laravel’s default setup for real-time notifications frequently includes npm and node.js for handling real-time events with Pusher.

If you wish to avoid npm and node.js, you can take a different approach by directly incorporating Pusher JavaScript SDK via a CDN and manually triggering events from your Laravel application. Here’s a high-level overview on how to do it:

# Setup Pusher Account:

• Sign up for a Pusher account if you haven’t already.
• To obtain your API credentials, create a new app in your Pusher dashboard.

# Include Pusher SDK:

• Include the Pusher JavaScript SDK in your HTML layout file for your Laravel project. This can be included to your blade file. (e.g., resources/views/layouts/app.blade.php):

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
    var pusher = new Pusher('YOUR_APP_KEY', {
        cluster: 'YOUR_APP_CLUSTER',
        encrypted: true
    });
</script>

Instead of “YOUR_APP_KEY” and “YOUR_APP_CLUSTER,” please use your actual Pusher login information.

# Define Routes and Controller:

• Create routes for sending notifications. You can define a route in your web.php file:

Route::get('/send-notification', 'NotificationController@send');

• Create a controller (if not already present):

php artisan make:controller NotificationController

In your NotificationController.php, create a method to send notifications. Here's a basic example:

use Illuminate\Http\Request;
use Pusher\Pusher;

class NotificationController extends Controller
{
    public function send(Request $request)
    {
        $pusher = new Pusher('YOUR_APP_KEY', 'YOUR_APP_SECRET', 'YOUR_APP_ID', [
            'cluster' => 'YOUR_APP_CLUSTER',
        ]);

        $data['message'] = 'Hello, this is a real-time notification!';
        $pusher->trigger('notifications', 'new-notification', $data);

        return 'Notification sent!';
    }
}

# Trigger Notifications:

• Now, you can trigger notifications from your Laravel application wherever you need them. For example, in a controller or a route callback:

public function someAction()
{
    // Your code here

    $data['message'] = 'Some event occurred!';
    $pusher->trigger('notifications', 'new-notification', $data);
}

# Handle Notifications on the Client Side:

• In your JavaScript files or within a <script> tag on the pages where you want to display notifications, subscribe to the Pusher channel and listen for events:

var channel = pusher.subscribe('notifications');
channel.bind('new-notification', function(data) {
    alert(data.message);
});

Replace ‘YOUR_APP_KEY’, ‘YOUR_APP_SECRET’, ‘YOUR_APP_ID’, and ‘YOUR_APP_CLUSTER’ with your actual Pusher credentials.

This configuration allows you to send real-time notifications in Laravel without needing npm or node.js. However, bear in mind that for better performance and maintainability, utilizing npm and node.js is the recommended way to interact with Pusher in Laravel.