Сервис для обнаружения типа устройства пользователя на typescript и vue

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

• обнаруживать какой тип взаимодействия с веб приложением у пользователя: touchscreen, мышка, либо же и то, и другое одновременно

• обнаруживать какая ориентация на данный момент у пользователя

• обнаруживать какой тип устройства имеет пользователь: desktop, tab, phone

  Звучит, конечно, не сложно, но для этого нужно собирать своего трансформера с разных форумов, я же предлагаю свое решение в готовом и компактном виде :)

Перейдем к главному: логика и код

В общем и целом, мне нужен был такой функционал, который бы при первом заходе пользователя показывает touch это или нет. А далее уже можно подхватить и разные другие события. Делается это все для реактивной адаптивности, т.к. на css сделать это просто невозможно.

Перейдем к коду. Создадим для начала все нужные перечисления (enum) для дальнейшего взаимодействия:

• InteractionType.ts - enum, отвечающий за тип взаимодействия - мышка, тач, либо оба сразу

export namespace InteractionType
{
    export enum State {
        Unknown = 'Unknown',
        Mouse = 'Mouse',
        Touch = 'Touch',
        Both =  'Both'
    }
}

• OrientationType.ts - enum, отвечающий за тип ориентации - вертикаль, горизонталь, в рамках css это портрет и лэндскейп

export namespace OrientationType
{
    export enum State {
        Unknown = 'Unknown',
        Portrait = 'Portrait',
        Landscape = 'Landscape',
    }
}

• DeviceType.ts - enum, отвечающий за тип устройства - планшет, телефон, либо ПК

export namespace DeviceType
{
    export enum State {
        Unknown = 'Unknown',
        Desktop = 'Desktop',
        Phone = 'Phone',
        Tab = 'Tab'
    }
}

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

public interactionType: InteractionType.State;
public orientationType: OrientationType.State;
public deviceType: DeviceType.State;

constructor () {
    this.interactionType = InteractionType.State.Unknown;
    this.orientationType = OrientationType.State.Unknown;
    this.deviceType = DeviceType.State.Unknown;

    window.addEventListener('touchstart', this.activeTouchState, { once: true });
    window.addEventListener('mousemove',  this.activeDeskState, { once: true });
}

Далее, в моем случае, мне нужно было отследить не только при первом действии, но и при заходе на сайт, поэтому я добавил такую функцию для первоначального определения тачскрина:

    public defineTouchscreen (): void {
        if (window.PointerEvent && ('maxTouchPoints' in navigator)) {
            // if Pointer Events are supported, just check maxTouchPoints
            if (navigator.maxTouchPoints > 0) {
                this.activeTouchState();
            }
        } else {
            // no Pointer Events...
            if (window.matchMedia && window.matchMedia("(any-pointer:coarse)").matches) {
                // check for any-pointer:coarse which mostly means touchscreen
                this.activeTouchState();
            } else if (window.TouchEvent || ('ontouchstart' in window)) {
                // last resort - check for exposed touch events API / event handler
                this.activeTouchState();
            }
        }
    }

Теперь добавим функции обработчики для eventListener'ов:

    private activeTouchState (): void {
        if (this.interactionType === InteractionType.State.Mouse) {
            this.interactionType = InteractionType.State.Both;
        } else {
            this.interactionType = InteractionType.State.Touch;
        }
    }

    private activeDeskState (): void {
        if (this.interactionType === InteractionType.State.Touch) {
            this.interactionType = InteractionType.State.Both;
        } else {
            this.interactionType = InteractionType.State.Mouse;
        }
    }

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

Теперь функция для ориентации устройства:

    public defineDeviceType (): void {
        const ua = navigator.userAgent;
        if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
            this.deviceType = DeviceType.State.Tab;
            return;
        }
        if (
            /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
                ua
            )
        ) {
            this.deviceType = DeviceType.State.Phone;
            return;
        }
        this.deviceType = DeviceType.State.Desktop;
    };

Единственное, что тут нужно знать, так это то, что navigator.userAgent возвращает строку вида:

userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version

А дальше мы уже можем проводить столько проверок, сколько захотим.
Ну и осталась функция для определения ориентации устройства:

    public defineOrientationType (): void {
        if (window.matchMedia("(orientation: portrait)").matches) {
            this.orientationType = OrientationType.State.Portrait;
        } else if (window.matchMedia("(orientation: landscape)").matches) {
            this.orientationType = OrientationType.State.Landscape;
        }
    }

На этом код готов) Использовать можно следующим образом:

• Импортнуть класс и enum'ы

• Просто создать computed свойство для поля объекта класса и отслеживать его изменения

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

С остальными функциями примерно то же самое - вешаем computed и наслаждаемся реактивностью изменения всех этих данных :)

Полный код как обычно на моем гитхабе

На этом желаю всем удачи! До встречи!