Содержание
В настоящее время люди используют свои мобильные устройства гораздо чаще, чем раньше, по простой причине, Интернету, что означает, что ваш сайт должен быть оптимизирован и иметь возможность предоставлять удивительные возможности для таких устройств так же, как ваш сайт на рабочем столе. , Хотя многие разработчики предпочитают работать с адаптивным дизайном на своих сайтах для оптимизации SEO и по другим причинам, есть другие разработчики, которые работают с поддоменами для одной и той же версии сайта, но оптимизированы для разных устройств (например, www.t.yourweb.com для планшета или www.m.yourweb.com для телефонов). Разница между адаптивным дизайном заключается в том, что вам не нужно возиться с такими вещами на вашем сервере, как создание новых доменов и их правильная настройка, а просто изменять исходный код, однако, если вы решите работать с поддоменом, вам придется связываться с обоими ( исходный код для обнаружения, использует ли посетитель мобильное устройство или настольный компьютер, а затем настраивает домены).
В проекте Symfony эта задача намного проще, если вы используете правильный инструмент. Чтобы определить платформу, которая использует вашего посетителя для просмотра вашего веб-сайта, мы рекомендуем вам использовать Mobile Detect Bundle. Этот пакет основан на проекте Mobile Detect. Mobile_Detect это легкий PHP-класс для обнаружения мобильных устройств (включая планшеты). Он использует строку User-Agent в сочетании с определенными заголовками HTTP для обнаружения мобильной среды.
В этой статье вы узнаете, как установить и внедрить Mobile Detect Bundle в ваш проект Symfony 3.
1. Установите MobileDetectBundle
MobileDetectBundle — это совместимый с Symfony пакет 2.4.x и 3.0.x для обнаружения мобильных устройств, управления мобильным просмотром и перенаправления на мобильные и планшетные версии. Он предоставляет следующие функции:
- Обнаружение различных мобильных устройств по имени, ОС, браузеру User-Agent.
- Управляет просмотром сайтов для различных мобильных устройств (
mobile,tablet,full). - Перенаправляет на мобильные и планшетные сайты.
Чтобы установить этот пакет в вашем проекте, откройте новый терминал, переключитесь в каталог вашего проекта и выполните следующую команду composer:
composer require suncat/mobile-detect-bundleИли вы можете изменить свой composer.json файл и добавить библиотеку вручную в качестве зависимости:
{
"require": {
"suncat/mobile-detect-bundle": "^1.0"
},
}Тогда беги composer install в каталоге. После завершения установки библиотеки через composer перейдите к включению пакета в вашем AppKernel.php:
Очистите кеш вашего проекта, и вы будете готовы использовать библиотеку вашего проекта. Если вам нужна дополнительная информация об этом комплекте, пожалуйста, посетите официальный репозиторий в Github здесь.
2. Использование Mobile Detect Bundle вручную с контроллеров и представлений
Первая и самая полезная вещь в этом комплекте - это то, что вы можете без особых усилий использовать по отдельности многие функции, которые он предлагает, и вам не нужно создавать собственные функции Twig для проверки того, перемещается ли пользователь с Android-устройства или других исследователей с вашего Просмотры. Это удобно, когда вы хотите показывать определенную рекламу своему пользователю в соответствии с платформой, которую он посещает.
Проверьте тип устройства в целом
В большинстве случаев вам нужно будет только проверить, перемещается ли ваш пользователь с мобильного устройства, планшета или настольного компьютера. Вы можете легко достичь с помощью условного оператора в соответствии с результатом методов, таких как isTablet или же isMobile:
get('mobile_detect.mobile_detector');
// Create a flag string to returns as response
$responseText = "Another kind of device";
// Verify from the controller if is a tablet
if($mobileDetector->isTablet()){
$responseText = "You're using a tablet, our system works only in Desktop computers";
// Verify if it's a mobile device (tablet is a mobile device too)
}else if($mobileDetector->isMobile()){
$responseText = "You're using a mobile device, our system works only in Desktop computers";
}
return new Response($responseText);
}
}В других случаях вам не нужно будет проверять эту информацию на ваших контроллерах, а на ваших представлениях с помощью Twig. К счастью, с этим пакетом вам не нужно предоставлять пользовательские функции Twig, поскольку он уже предлагает пользовательские функции, готовые для использования в ваших представлениях:
{% extends 'base.html.twig' %}
{% block body %}
{% if is_mobile() %}
{# Tablets are mobile devices too #}
Is a Mobile device
{% endif %}
{% if is_tablet() %}
Is a Tablet
{% endif %}
{% endblock %}Таким образом, вы можете проверять более сложные шаблоны устройств или отправлять определенную информацию в соответствии с платформой без необходимости перенаправления на другой веб-сайт.
Проверка работоспособности системы
Вы можете проверить, какая операционная система в настоящее время использует вашего пользователя, используя is* (где подстановочный знак - идентификатор операционной системы):
get('mobile_detect.mobile_detector');
// Check for different mobile operative systems
// They return a boolean (true if match)
$mobileDetector->isAndroidOS();
$mobileDetector->isBlackBerryOS();
$mobileDetector->isPalmOS();
$mobileDetector->isSymbianOS();
$mobileDetector->isWindowsMobileOS();
$mobileDetector->isiOS();
$mobileDetector->isbadaOS();
return new Response("Some response text");
}
}Таким же образом вы можете использовать эти функции в Twig (только для iOS и Android):
{% extends 'base.html.twig' %}
{% block body %}
{% if is_android_os() %}
Android
{% endif %}
{% if is_ios() %}
iOS
{% endif %}
{% endblock %}Проверьте мобильный браузер User-Agent
Вы можете проверить, какой браузер использует ваш посетитель в вашем контроллере:
get('mobile_detect.mobile_detector');
/*
* Returns a boolean (true in case the browser matches)
*/
$mobileDetector->isChrome();
$mobileDetector->isSafari();
$mobileDetector->isDolfin();
$mobileDetector->isOpera();
$mobileDetector->isSkyfire();
$mobileDetector->isIE();
$mobileDetector->isFirefox();
$mobileDetector->isBolt();
$mobileDetector->isTeaShark();
$mobileDetector->isBlazer();
$mobileDetector->isSafari();
$mobileDetector->isMidori();
$mobileDetector->isGenericBrowser();
return new Response("");
}
}3. Настройка Mobile Detect Bundle автоматически
Этот шаг может быть немного грязным и хитрым. Если вместо этого вы используете несколько доменов для своего веб-сайта для мобильных устройств и настольных компьютеров, вы можете настроить основной проект на перенаправление на другой URL-адрес или даже использовать один и тот же проект Symfony для того же веб-сайта, но расположенный в другом домене.
Для этого выполните следующие действия:
1. Настройте перенаправление в вашем config.yml
В качестве первого шага вы хотите перенаправить пользователей, которые посещают ваш сайт (www.yourweb.com) с мобильного устройства на мобильный домен (www.m.yourweb.com), добавив правильную конфигурацию в config.yml, Следующий фрагмент просто перенаправит всех пользователей, посещающих ваш сайт, с мобильных устройств (планшетов и телефонов) на мобильный домен:
mobile_detect:
redirect:
mobile:
is_enabled: true
host: http://m.site.com
status_code: 301
action: redirect
tablet: ~
switch_device_view: ~Обратите внимание, что это всего лишь пример, вы даже можете перенаправить на планшетный домен. Прочитайте полную область конфигурации в документации для получения дополнительной информации.
2. Создайте новый файл приложения
Как вы знаете, в производстве файл app.php находится в yourapp/web является точкой входа вашего приложения. Чтобы создать мобильную запись для вашего приложения, скопируйте файл app.php и вставьте его в тот же каталог с новым именем. app_mobile.php, Теперь найдите следующую строку (вокруг 9-й строки):
$kernel = new AppKernel('prod', false);В этой строке указывается тип (изначально было 2 файла приложения). app.php а также app_dev.php) среда, которая должна использоваться для вашего приложения. Сейчас в скопированном файле (app_mobile.php) изменить среду из prod в mobile:
$kernel = new AppKernel('mobile', false);Сохраните изменения в файле и перейдите к следующему шагу.
3. Создайте новый файл конфигурации
Теперь создайте новый config_mobile.yml файл в yourapp/app/config папку и добавьте следующее содержимое:
imports:
- { resource: parameters.yml }
framework:
secret: "%secret%"
router:
resource: "%kernel.root_dir%/config/routing_mobile.yml"
mobile_detect:
redirect:
mobile:
is_enabled: false
tablet: ~
full:
is_enabled: true
host: http://site.com
switch_device_view: ~Что мы делаем, это создаем пользовательский файл конфигурации с самыми основными настройками, структурой и mobile_detect, в mobile_detect В этой области мы укажем, что если кто-то посещает мобильный веб-сайт с мобильного телефона, он должен быть перенаправлен на настольную версию (полную), и мобильная версия будет отключена при действии перенаправления.
4. Настройте свой мобильный домен на целевой файл app_mobile.php.
Последний шаг зависит от вас, и он будет зависеть от вашего сервера. Вы должны указать, что ваш мобильный домен (www.m.yourweb.com) ориентирован на app_mobile.php файл вместо app.php файл. После перезапуска вашего http-сервера все должно работать. Также не забудьте очистить кеш, если вы вносите изменения в конфиги, или вы можете потерять даром разочарование.
