Support implement mobile-first principle for your Laravel application.
A package support you implementing mobile-first principle base on Jenssegers Agent.
Require Laravel Mobile First using Composer:
composer require vxm/laravel-mobile-first
After require, you need to publish the config-file with:
php artisan vendor:publish --provider="VXM\MobileFirst\MobileFirstServiceProvider" --tag="config"
This is the contents of the published config file:
return [ /** * Your mobile site use to redirect when user not using desktop device. * Note: it only affect when you registered `VXM\MobileFirst\MobileRedirect` middleware. */ 'mobile_url' => 'https://m.yoursite.com', /** * Keep url path when redirect to mobile url (ex: https://yoursite.com/abc to https://m.yoursite.com/abc). */ 'keep_url_path' => true, /** * HTTP status code will be set when redirect to mobile url. */ 'redirect_status_code' => 301, /** * HTTP request method should be redirect to mobile url. */ 'redirect_methods' => ['OPTIONS', 'GET'], /** * Enable auto switch view by device type. * When enabled, the system auto switch view to compatible view (sub-view) by user device type (ex: 'index.blade.php' => 'mobile/index.blade.php'), * compatible view will be find on `device_sub_dirs`. If not found, not affect. */ 'auto_switch_view_by_device' => false, /** * An array with key is device type and value is sub dir of it. Use to switch view to compatible view (sub-view) by user device type. */ 'device_sub_dirs' => [ //'phone' => 'phone', // switch when device is phone. //'tablet' => 'tablet', // switch when device is tablet. //'android' => 'android', // switch when device os is android. //'ios' => 'ios', // switch when device os is ios. 'mobile' => 'mobile', // switch when device is tablet or phone. ], ];
This package provides you two features:
- Redirect end-user to mobile site url if they not using desktop device.
- Auto switch view to compatible view (sub-view)
You need setup your mobile site url in your
mobilefirst config file:
'mobile_url' => 'https://m.yoursite.com',
Now add middleware:
// app/Http/Kernel.php protected $middleware = [ ... \VXM\MobileFirst\MobileRedirect::class, ],
This feature is disabled by default, you need to enabled it in
mobilefirst config file:
'auto_switch_view_by_device' => true,
It is a way to replace a set of views with another by user device without the need of touching the original view rendering code.
You can use it to systematically change the look and feel of an application depend on user device.
For example, when call
view('about'), you will be rendering the view file
resources/views/about.blade.php, if user use mobile device, the view file
resources/views/mobile/about.blade.php will be rendered, instead.
device_sub_dirs governs how view files should be replaced by user device.
It takes an array of key-value pairs, where the keys are the device types and the values are the corresponding view sub-directory.
The replacement is based on user device: if user device match with any key in the
device_sub_dirs array, a view path will be added with the corresponding sub-directory value.
Using the above configuration example, when user using mobile device because it match the key mobile, a view path will be added mobile look like
Of course you can change the value or add more cases:
'device_sub_dirs' => [ 'ios' => 'apple', // switch when device os is ios. 'mobile' => 'mobile', // switch when device is tablet or phone. ],
The above configuration if user using ios, the view path will be added