Detect mobile navigation in Laravel

When developing web applications, it is essential to think about the adaptability of any web application and one of these aspects involves programmatically detecting the type of device with which the application is being accessed: is it a mobile device or a computer? desktop?.

Optimized User Experience (UX)

The user experience is essential, if the application takes a long time to appear or many elements appear that are not important, and this is an important factor if the web app is accessed from a device with a small screen such as a phone, it should be adapt the interface based on the criteria previously described and with this, improve usability and user satisfaction.

Performance and Efficient Charging

Mobile devices tend to have more limited resources compared to computers. Detecting the type of device allows us to load only the necessary elements. For example, if we have a blog, and we have a menu of options and advertising on one side, in mobile mode we can prevent it from loading by giving priority to the content that the client want to visualize.

SEO and Search Engine Positioning

In a blog-type application, SEO cannot be missing, and precisely the two aspects mentioned above are essential for engines like Google to verify that the mobile mode presented is optimal and does not have elements that complicate the navigability of the application.

Compatibility with Emerging Technologies

The application is more than code in Laravel, the experience from the client side is essential, there may be some experimental technology that only works on some devices and that you can define so that they work on these devices, ignoring the others.

In this entry we are going to learn about a technology that will allow us to create the foundations to achieve the above, which are just some points that we must take into account and the importance of detecting the type of device.

This package allows you to determine between a large number of devices such as:

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

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

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

This is a package for PHP 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

At the time these words are written, the latest versions of Laravel have not been updated for several years and do not work, however, we can use this package without major problems; from our Laravel project, we execute the following composer command:

$ composer require mobiledetect/mobiledetectlib

To use it, we can create a help function, as we saw in the helpers section:

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 will be able to access the isMobile() function from anywhere in our application, whether it is a blade file, driver or something else.

21-05-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Detect mobile navigation in Laravel