Разделение на мобильную и десктопную версию в laravel

5 Октября 2017

Существует несколько подходов, которые позволяют адаптировать сайт к разным форматам отображения. Наиболее популярный и самый простой способ - это адптивная версия, где в одном css-файле будут храниться стили для разных разрешений экрана, и за счет media queries мобильная версия будет соответствующим образом отображаться на смартфоне. У данного подхода есть несомненные плюсы:

  • Удобство
  • Привычный подход для большинства разработчиков
  • Само разделение осуществляется посредством css-файлов( больше ничего не требуется)

Но не стоит забывать и о том, что у данного метода имеется обратная стороная медали: скажем, на вашем сайте имеются блоки, которые вы не желаете отображать на мобильной версии. Что в этом случае приходится делать? Прописывать условие при котором данный блок для определенных разрешений не должен отображаться на экране в принципе. Так и происходит, но при этом  вся лишняя информация с сервера ( пусть даже статическая) все равно подгружается, и выходит так, что в каком-то смысле ваш сайт на мобильном устройстве расходует лишний трафик. 

Также не стоит забывать и о том, что чисто адаптивный подход сковывает дизайнера, и не дает ему возможности реализовать все свои замысли для создания макетов под мобильную версию.

В качестве альтернативного варианта можно рассмотреть следующий вариант: полное разделение тем дизайна в зависимости от типа устройства, на котором отображается ваш сайт.

Итак, поехали.

У нас имеется сайт на Laravel 5.2( хотя, по идее сам подход, о котором я расскажу подойдет к любой версии данного фреймворка). 

В первую очередь нам необходимо создать новый класс посредника(Middleware). Сделать это можно посредством встроенной консольной команды

php artisan make:middleware Theme

В данном классе мы как раз и будем определять текущую тему дизайна, которую использует посетитель сайта.

Регистрируем наш middleware в Kernel.php:

protected $middlewareGroups = [
'web' => [
    \App\Http\Middleware\EncryptCookies::class,
    \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
    \Illuminate\Session\Middleware\StartSession::class,
    \Illuminate\View\Middleware\ShareErrorsFromSession::class,
    \App\Http\Middleware\VerifyCsrfToken::class,
    \App\Http\Middleware\Theme::class,// для определения темы
],

Помимо этого, нам потребуется пакет, для определения типа устройства (Agent).

Устанавливаем пакет, и переходим к следующему шагу. Требуется добавить новый параметр в конфигурационный файл app.php:

<?php
return [

...

'theme' => 'desktop',// по дефолту используем десктопную тему.

...

];

Далее необходимо модифицировать метод handle в нашем Middleware. Собственно, тут же встает вопрос о том, как действовать дальше: в каждом запросе определять тип устройства и в зависимости от этого менять тему, или же дополнительно хранить значение темы дизайна, к примеру, в cookies? На самом деле первый вариант, на несколько строчек кода проще, но при этом всегда существует гипотетическая вероятность того, что пользователь зайдет с того устройства, которое не будет определять как мобильное, и тогда вместо соответсвующей верстки человек увидит нечто весьма неэстетичное. Поэтому я склоняюсь к тому, чтобы у человека всегда была возможность при случае переключиться с одной темы дизайна на другую.

public function handle($request, Closure $next)
{
    $theme = $this->getViewTheme($request);// получаем тему дизайна

    config(['app.theme' => $theme]);// динамически меняем тему в кофиге

    return $next($request);
}

Далее рассмотрим, как же собственно, можно получить тему дизайна, для текущего проекта. 

private function getViewTheme(\Illuminate\Http\Request $request)
{
    if ($request->cookie('theme') == 'mobile') {
        return 'mobile';
    }

    if (!$request->hasCookie('theme')) {
        return (!\Agent::isDesktop() && !\Agent::isTablet()) ? 'mobile' : 'desktop';
    }

    return 'desktop';
}

Поясню данный код. У нас есть две темы дизайна: мобильная и десктопная. Если в cookies уже есть значение нужной темы, то тогда пользователь вне зависимости от типа устройства получает возможность увидеть верстку соответсвующей темы. Если же значения для cookies отстуствуют, тогда пользуемся пакетом Agent, который вычисляет тип устройства. 


Дальше необходимо дать возможность пользователю менять тему дизайна( опять-таки, если это необходимо). Это можно делать, как через javascript(в этом случае нужно воспользоватья инструкцией, так как в laravel по-умолчанию все cookies шифруются), так и через обычную ссылку, в обработчике которой достаточно установить значение cookie:

\Cookie::queue('theme', 'mobile', 2880, '/');

Ну и самое главное: после того, как осуществлена настройка непосредственного определения темы дизайна, стоит подумать о том, как разделять темы шаблонов. Собственно, рецепт прост: в папке resources/views создаем нужные нам темы дизайна. Для того, чтобы получить текущее значение в контроллере достаточно обратиться к конфигурационному файлу:

    private $theme;

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->theme = config('app.theme');
    }

Ну и в конце хочется сказать следующее: во-первых, основной минус данного подохода в том, что у вас даже после внесения небольших правок в шаблоны придется это делать как минимум в двух местах. Тоже самое касается файлов стилей.  С другой стороны, появляется отличная возможность оптимизировать свою мобильную версию сайта.

0
Комментарии

комментариев еще нету

Для того, чтобы выразить экспертное мнение, нужно авторизироваться