Detect mobile navigation in Laravel

▶

When developing web applications, we don't just worry about how to send emails, it is essential to think about the application's adaptability. One of the most important aspects is programmatically detecting the type of device accessing it: is it a mobile device or a desktop computer?

Optimized User Experience (UX)

User experience is paramount. If the application takes too long to load or displays unnecessary elements, especially on devices with reduced screens like phones, we must adapt the interface.
This improves usability and user satisfaction, ensuring that the application is functional and efficient according to the type of device.

Efficient Performance and Loading

Mobile devices usually have more limited resources than computers. Detecting the device type allows us to load only the necessary elements.
For example, in a blog, we can avoid loading side menus or advertisements in the mobile version, prioritizing the content the user wants to view.

SEO and Search Engine Ranking

In applications like blogs, SEO is fundamental. Optimizing the mobile version improves navigation and ensures that engines like Google recognize that the application offers an optimal experience without unnecessary elements.

Compatibility with Emerging Technologies

The application is not just code in Laravel; the client experience also matters.
Some experimental technologies only work on certain devices. Detecting the device type allows us to enable them only where they are compatible, ignoring other devices.

Packages for Device Detection

There are several packages that help us determine the type of device. Some examples include:

• isiPhone()
• isXiaomi()
• isAndroidOS()
• isiOS()
• isiPadOS()

Although, usually what we want is to determine if a user is browsing our Laravel application using a phone or computer, for this, we have access to the following function:

$detect = new MobileDetect();
$detect->isMobile();

This is a PHP package and not specific to Laravel, although Laravel has a few packages to achieve this goal:

• https://github.com/riverskies/laravel-mobile-detect
• https://github.com/jenssegers/agent

As of the moment these words are written, both packages have not been updated for several years, so they do not work with the latest versions of Laravel.

We can use MobileDetect directly in Laravel without problems:

MobileDetect Package Installation

$ composer require mobiledetect/mobiledetectlib

With this, we can use isMobile() from anywhere in the application: Blade, controllers, or services.

Practical Applications

Detecting the device type allows you to:

1. Optimize the UI: show or hide elements based on the device.
2. Reduce resource load: do not send unnecessary scripts or styles on mobiles.
3. Improve efficiency and response times, especially on limited devices.
4. Optimize SEO: avoiding redundant content on mobiles.

How to Implement it in Laravel

Create a helper.php file inside app/Helpers which is a helper file.

Register the helper in composer.json:

"autoload": {
   "psr-4": {
       "App\\": "app/"
   },
   "files": [
       "app/Helpers/helper.php"
   ]
}

Execute:

$ composer dump-autoload

Create the isMobile() function as shown previously:

function isMobile()
{
   $detect = new MobileDetect();
   // var_dump($detect->getUserAgent()); // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."
   try {
       return $detect->isMobile(); // bool(false)
   } catch (\Detection\Exception\MobileDetectException $e) {
   }
   return false;
   // try {
   //     $isTablet = $detect->isTablet(); // bool(false)
   //     // var_dump($isTablet);
   // } catch (\Detection\Exception\MobileDetectException $e) {
   // }
}

And with this, we can access the **isMobile()** function from anywhere in our application, whether it's a blade file, controller, or other:

@if(isMobile())
  <!-- Contenido exclusivo para móviles -->
@else
  <!-- Contenido para PC -->
@endif

Exploring Advanced Functions

MobileDetect allows detecting many devices and features, for example tablet, iOS, Android, etc.
Although we generally only need to know if it's mobile or PC, we can explore other functions by inspecting the package's source code.

Result and Test

When testing it in the browser:

• On PC: isMobile() returns false.
• On mobile: isMobile() returns true.

This allows adapting the interface and content based on the device easily and efficiently, without depending on CSS alone.

Conclusion

Although MobileDetect is not Laravel-specific, we can easily integrate it using helpers.
This allows us to have native functions in our application and use the full power of device detection to optimize UX, improve loading, and maintain effective SEO.