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:

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.

Video Transcript

Surely many times you will need to be able to detect the type of device with which your user is accessing, either to measure some internal metrics or usually to be able to change the experience of the UI, that is, of the graphical interface and be able to optimize it accordingly, since there are things that you may want to show and generate for when it is consumed through a computer and there are other things that you will want to remove or simply add, and I am no longer referring only to the style since you could easily do this through CSS but directly to functionalities, such as drawing a banner, removing, for example, an alert dialog to show information when we are on mobile devices so that those annoying alerts do not appear, things of that type. So this can be done in Laravel easily. Now here we have something to analyze since if we search for mobile laravel detector or something like that you will find some packages if we open them:

It's been like 8 years that it hasn't been updated and as you can imagine it's not going to work for you, you're not going to be able to install it and here we also have another one that's quite old so it's not going to work for you, therefore we have to go to another way to be able to use or install this type of features. So it's here where we can review a package that is not specific to Laravel but is already generic for php which is the one we have here on the screen, the Movil detection whose page is the one we have. Well, here I tell you what this is basically, that this is not a specific package for Laravel but is generic for php. I'm going to search here by name for this link. I'm going to leave it in the description of this video. Anything that's not there, tell me and this is again for php. Note that nothing about Laravel appears here as you can see and we can adapt it perfectly since both use composer to be able to work, so while I'm giving you a little more information about this you can go to the link associated with this video, install the mobile detector mobile detector in the meantime and leave it there. So again it seems important to me again to go back a little to what would be the importance of this as I indicated to you to improve the user experience and with this also optimize the loading of the resources Since a mobile device is obviously a more limited device than a computer and therefore there we have to optimize the resources that we are loading, that is to say if we are not going to use something for a mobile device that if we use on a computer simply through a conditional in what would be for example the controller or playade we could simply limit it or not return it. Now we are going to do some examples with this but in the end if for example you have a js that you are only going to use on a computer then there you place a conditional and if it is a mobile device for example And it is there where you do not want to return the said resource you place a conditional and it simply says that if it is a mobile device do not return it and the matter is over it is basically that, so from here you can see a little bit of sense to all this is to improve efficiency and loading more or less the same as I indicated to you here based on the u to be able to improve response times and this is obviously also an important point if you have a blot and you want to improve what would be the SEO and positioning and it is precisely to not return so many resources but the minimum necessary so that the user can enjoy the experience and well you can see that it is a package that is updated:

composer require mobiledetect/mobiledetectlib

And we were able to install it here perfectly as you can see then there we could use it and how it works basically we have several functions to detect the type of device of course this usually we don't want Unless you want to save some metrics there yes you could use it but usually we want to know if it is a PC or if it is a mobile device to do whatever you want to do and for that we have a function called isMobile() which is the one we could use eye again there are many functions and you can evaluate it when we install and when we start to reference these functions but for the purposes of this video I am simply going to use this one and then the others I simply present them to you but they are of this style obviously they are quite descriptive if you are on iOS then in case you do not know the iOS browser or something there has a special feature of that environment and you could place it and if not well you do not place it Well we already installed it and here we have a small example of what we are going to do then here what we do is create an instance of mobile detector here we ask what is the agent well I placed this in a Bom so you could see and what interests us here is to ask if it is Mobil that is to say if it is a mobile device and here well This can launch a section and that is why we put it here well in order to use this anywhere the best thing is to create a file where it helps and then we reference elile from wherever we want So that is what we are going to do since again remember that it is a generic package for php so quickly we are going to create here now here the composer I am going to create a folder called helpers very careful with the capital letters point well if you want to put it in capital letters if not put it in lowercase but what I mean when we are going to reference it I always create a folder I have to give it the option from here in App Now yes we come here
quickly and we look for the one that we have here we put double quotes we put fields:

"autoload": {
       "psr-4": {
           "App\\": "app/",
           "Database\\Factories\\": "database/factories/",
           "Database\\Seeders\\": "database/seeders/"
       },
       "files": [
           "app/Helpers/helper.php",
       ]
   },

It seemed to me the option to put a comma here and we place our help files which in this case is only this one from hel well I forgot to add the one from App again pending here with the capital letters the best thing you can do here is copy and paste so you don't make a mistake and you put app here of course So we already saw this previously:

composer dump-autoload

In order to reference the file that we just created, we leave it there and in the meantime we can work here. What we are going to do is create a function. We put function. We put for example is Mobile for this example in which we are going to detect the device. I am going to call it here detect. It will be equal to New mobile:

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) {
   // }
}

Note that it already cares there you have the package In case it does not find it and here we are going to ask what the hell is detect get user agents to get the agent Well here you can click as I told you and start exploring all the functions or methods that we have here; you must inspect the source code of the library and with that, see all the available functions

table if it is a if it is a tablet we have many then if you want something more specific you will surely find it here Well I think you already understood the point there are many then from this point on this is a heer Then we can use them from anywhere for the moment… obviously it works as is you can see that was the important thing about all this what you have to do with this is up to you in this case as I usually tell you what we want is to know what device we are using if it is a pc if it is something else Well a mobile and therefore it is the implementation that we are going to do but again here you can see that you can get a lot of juice out of this depending on what you want to do then I am going to place here the TR set as indicated in the official documentation you can see this in the official documentation here I am not interested in doing anything here it would be the mobile detection ex section it would be this and here we are going to return yes this is very exciting you will see the output is Mobile that tells us if it is a mobile device or not and what you can expect what's going to happen here is that we don't see anything because it's not a mobile device and therefore it returns a false and that's the exciting thing about this is that we don't see anything so I go here hit f12 to open my developer tools here I click on the little icon and place a mobile device here and well we don't see demon let's see how I do it with the zoom because it's a little complicated here it should appear What happens is that there's a lot of stuff here in this view I'm going to remove all this from the Body at least for this example right now I'll put it again there's our nice one that indicates that we're on a mobile device because well this is a mobile device and therefore there we can see it if you have doubts about what it's doing you can come here and uncomment this uncomment and here you can see that it indicates that you're on Well a Mac device is a mobile it's an iPhone because it's the device that I selected Sure you can select a Pixel here and again the zoom went away the demon and here we see a little information… what you can see on the screen if we come back to the normal browser Here we're going to see that it's a PC such which you can see in my case is Windows So that's basically what you do with it is up to you since again you can see that we can use it perfectly from here from the Welcome I mean des Blade in case you don't understand it yet I'm going to do a little example here at the end all these are always conditional B I put bf you have to put ismobile here... I wanted to get to the point that this is the best we can do and it's something that you can also adapt to other packages if you want a package that is for php that is that simple, that is, it doesn't have much integration with anything and you can install it perfectly in larabel just as you could see, so to make your life easier to make it, as who says, compatible with laravel you can simply create a helper or a fake here as well, but in this case I recommend the helpers and Well you put your logic there and use it from anywhere in the application so it remains as if it were native at the level of our framework So nothing more to say let's move on to the next class.

05-08-2024 - Andrés Cruz

En español

Laravel Laragon

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy