Laravel 10 - How to get Browser & Device details
Laravel 10 - How to get Browser & Device details
In this tutorial, we’ll explore how to extract browser and device information in Laravel 10, improving user experience and gaining valuable insights
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this step-by-step guide, we walk through the process of detecting browser, platform, and device information in a Laravel 10 application using the jenssegers/agent package. You’ll begin with a fresh Laravel project setup and configure your frontend assets with Vite. Then, you’ll install and configure the Agent package, create a controller to collect user device details, and define a route to serve the output. Finally, you’ll build a styled Blade view to display the extracted information in a user-friendly layout. By visiting the test route, you'll see real-time insights about your browser and device, demonstrating a fully functional user agent detection feature in Laravel.
Step # 1 : Create a Fresh Laravel 10 Project.
To get started smoothly, it's recommended to use a fresh Laravel 10 installation, especially when building out a new feature like the one we’re adding here. You can either use an existing Laravel 10 project or create a new one. If you have Laravel globally installed use the following command to create a fresh project.
laravel new agent
Alternatively, if you prefer using Composer, you can run.
composer create-project laravel/laravel --prefer-dist agent
Starting from a clean slate helps prevent unexpected conflicts and ensures you're working in a focused, uncluttered environment tailored specifically to the task at hand.
Step # 2 : Access the Project and Set Up Frontend Assets.
Open your terminal and navigate to the root directory of your Laravel project. For example.
cd c:xampp/htdocs/agent
Once inside, install the necessary frontend dependencies and start the Vite development server.
npm install && npm run dev
This compiles your assets and enables automatic browser updates during development. Keep this terminal running, and open a new tab or window to continue working with Laravel commands in the same project directory.
Step # 3 : Install the Jenssegers Agent Package.
To detect browser, device, and platform details in your Laravel app, install the jenssegers/agent package by running the following command.
composer require jenssegers/agent
This lightweight package provides a simple way to identify user agents, making it useful for customizing views, logging user activity, or tailoring content based on device type. It can detect whether a user is on a phone, tablet, desktop, or even specific platforms like iOS or Android. The integration is seamless and doesn't require complex setup, making it a handy tool for adaptive design or analytics.
Step # 4 : Publish the Package Configuration.
After installing the package, publish its configuration file using the following command.
php artisan vendor:publish --provider="Jenssegers\Agent\AgentServiceProvider"
This will create a agent.php config file in your config directory, allowing you to adjust default settings if needed. While most use cases work fine out of the box, having the config file gives you the flexibility to tweak how the package behaves based on your project’s needs.
Step # 5 : Create the Device Info Controller.
Generate a new controller to handle device detection logic by running.
php artisan make:controller DeviceInfoController
Next, open the newly created DeviceInfoController.php file and update it with the following code.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Jenssegers\Agent\Facades\Agent;
class DeviceInfoController extends Controller
{
public function index()
{
// Get browser name and version
$browser = Agent::browser();
$browserVersion = Agent::version($browser);
// Get device type and platform info
$device = Agent::device();
$isMobile = Agent::isMobile() ? 'Yes' : 'No';
$isTablet = Agent::isTablet() ? 'Yes' : 'No';
$isDesktop = Agent::isDesktop() ? 'Yes' : 'No';
$platform = Agent::platform();
// Pass all data to the view
return view('device-info', compact(
'browser',
'browserVersion',
'device',
'isMobile',
'isTablet',
'isDesktop',
'platform'
));
}
}
Inside this controller, we’re using the Agent facade to gather detailed information about the user’s browser, device, and operating system. It checks whether the user is on mobile, tablet, or desktop, and collects their browser name, version, and platform. All this data is then passed to a view, where we can display it in a clean and readable format. You can also build on this logic to personalize content, log user environments, or trigger device-specific actions.
Step # 6 : Create a Route.
Now let’s define a route to access the controller method. First, import the controller at the top of your web.php file.
use App\Http\Controllers\DeviceInfoController;
Then, add the following route.
Route::get('/device-info', [DeviceInfoController::class, 'index']);
This route listens for GET requests to /device-info and calls the index method of DeviceInfoController, which will handle detecting and displaying the user’s device information.
Step # 7 : Create a View.
Now let’s build the Blade view that will present the user's device and browser details in a clean, user-friendly layout. Inside the resources/views directory, create a new file named device-info.blade.php, and add the following HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Device Info - Code Shotcut</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card mt-5">
<div class="card-header bg-dark text-white text-center">
<h3 class="card-title">Device Information</h3>
</div>
<div class="card-body">
<p><strong>Browser:</strong> {{ $browser }}</p>
<p><strong>Browser Version:</strong> {{ $browserVersion }}</p>
<p><strong>Device:</strong> {{ $device }}</p>
<p><strong>Mobile:</strong> {{ $isMobile }}</p>
<p><strong>Tablet:</strong> {{ $isTablet }}</p>
<p><strong>Desktop:</strong> {{ $isDesktop }}</p>
<p><strong>Platform:</strong> {{ $platform }}</p>
</div>
<div class="card-footer text-center">
<a href="/" class="btn btn-dark">Back to Home</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This view displays all device-related details passed from the controller using Blade syntax, including browser type, version, platform, and device type (mobile, tablet, or desktop). Styled with Bootstrap, the layout is clean, responsive, and mobile-friendly, making it ideal for testing or debugging user environments. You can also customize it further to match your project’s design or integrate it with user analytics and logging features.
Step # 8 : It's Time to Test.
With everything set up, let’s see it in action. Start your Laravel development server by running the command.
php artisan serve
Once the server is running, open your browser and visit: http://127.0.0.1:8000/device-info.
You’ll see a neatly styled page showing your browser, device, and platform details, pulled in real-time using the Agent package. This confirms that the setup is working perfectly.
Conclusion
By following this step-by-step guide, you’ve successfully integrated device, browser, and platform detection into your Laravel 10 application using the jenssegers/agent package. Starting from a clean Laravel setup, you installed and configured the Agent package, created a controller to handle detection logic, defined a route, and built a responsive Blade view to display user-specific data. This implementation provides a solid foundation for tailoring content, enhancing user experience, or collecting analytics based on the visitor’s device.
For more advanced features and customization, be sure to explore the official Jenssegers Agent documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments