vxm / laravel-mobile-first
Support implement mobile-first principle for your Laravel application.
Requires
- php: ^7.1
- illuminate/support: ^5.7
- jenssegers/agent: ^2.6
Requires (Dev)
- orchestra/testbench: ^3.7
- phpunit/phpunit: ~7.5
- scrutinizer/ocular: ^1.5
Suggests
- riverskies/laravel-mobile-detect: For detect device in blade environment.
This package is auto-updated.
Last update: 2024-10-27 04:33:32 UTC
README
Laravel Mobile First
About it
A package support you implementing mobile-first principle base on Jenssegers Agent.
Installation
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. ], ];
Usage
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)
Mobile redirect
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, ],
Auto switch view
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.
The 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 resources/views/mobile/about.blade.php
.
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 apple
.