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

[sanchezzzhak]

Надо ли говорить что определение типа устройства по ua это не точно.

Многие планшеты имеют мобильные ua.

Самый главный вопрос зачем тип устройства во frontend?

[GonnaMakeItBrah]

По ua не точно, но он покрывает большую часть устройств, хотя в любом правиле есть исключения это да, надо будет подумать над универсальным решением. Зачем во фронтенде эта штука? - чтобы адаптив настраивать и вертеть интерфейсом так, как хочется)

[carkatau01]

Chrome в скором времени начнёт урезать UA и информации в нем будет все меньше

Вместо UA нужно смотреть в сторону Client Hints

[deamondz]

три вопроса:

1. при чём тут vue?

2. зачем городить велосипеды? (ну если это только не формате обучения)

3. если вы предполагаете, что девайсом будут пользоваться мышкой, тачем, мышкой и тачем - зачем это может быть нужно детектировать, если придётся и так и так поддерживать все способы?

[GonnaMakeItBrah]

1. Я писал это для использования во vue компонентах, поэтому vue

2. А есть способы получше? Я с радостью посмотрю на них)

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

[Dimava]

Код выглядит как будто написан лет пять назад.

namespace и enum уже давно использовать не рекомендуется, вместо них пришли ES Module и Union types: export type InteractionType = 'unknown' | 'mouse' | 'touch' | 'both'

Vue Class Component уже давно deprecated, Vue 2 заканчивается в декабре 2023. Сейчас все потихоньку переезжают на Vue 3 и Composition API
У класса реактивности нету ("просто создать computed свойство" не сработает - сам инстанс не реактивный)
listener в addEventListener не обёрнуты, поэтому код даже не "не сработает" - а сработает, добавив interactionType в window

Вот хороший пример как надо - https://vueuse.org/core/useScreenOrientation (исходный код - https://github.com/vueuse/vueuse/blob/main/packages/core/useScreenOrientation/index.ts )

И последнее. У репозитория нету лицензии. А значит использовать данный код нельзя вообще.

[GonnaMakeItBrah]

О, а это хорошее предложение) Да вот проблемка, я работал в компании где была vue 2, поэтому немного привык к его синтаксису, спасибо за замечания! Насчет лицензии ничего не знаю, я больше в ознакомительных целях пишу статьи

[GonnaMakeItBrah]

Действительно, реактивности не было, теперь предусмотрел и реактивность! Компутеды снова начнут работать)

[GonnaMakeItBrah]

лицензию тоже прикрутил)

[supercat1337]

Раньше сталкивался с проблемой определения IPad, так как ua врал как мог. Решение на заметку:

/**  @returns {boolean} */
function isIPad() {
    let ua = window.navigator.userAgent.toLowerCase();
    return ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && navigator.maxTouchPoints && navigator.maxTouchPoints > 2
        && navigator.platform !== "iPhone";
}

[GonnaMakeItBrah]

Не тестил на айпаде, но в любом случае спасибо!)