Задать вопрос
@Sviaznoi
javascript

Как определить операционную систему из скрипта вложенного в html документ?

Здравствуйте. Ради тренировки попытался отработать определение операционной системы скриптом в html документе. Получилось вот что:
html разведчик
<!DOCTYPE html>
<html>
    <head>
        <link rel="icon" type="image/x-icon" href="/icons8-bubbles-100.ico">  
        <script src="/scripts/start.js"></script>
    </head>
</html>

Выше код html c прикреплённым скриптом. Этот файл получает браузер на стандартный, первый get запрос на сервер. В нём закреплен скрипт который должен определять настольная эта операционная система или мобильная. Вот он:
скрипт разведчик
"use strict"

async function getOS() {

            let loc = window.location.pathname,
                userAgent = window.navigator.userAgent,
                platform = window.navigator.platform,
                macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
                windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
                iosPlatforms = ['iPhone', 'iPad', 'iPod'],
                os = null,
                location;

            if (macosPlatforms.indexOf(platform) !== -1) {
                os = 'pc';
            } else if (iosPlatforms.indexOf(platform) !== -1) {
                os = 'mobile';
            } else if (windowsPlatforms.indexOf(platform) !== -1) {
                os = 'pc';
            } else if (/Android/.test(userAgent)) {
                os = 'mobile';
            } else if (!os && /Linux/.test(platform)) {
                os = 'pc';
            }

            switch(loc){
                case "/":
                    location = '';
                    break;
                default:
                    location = loc;    
            }
            
            let response = await fetch("https://localhost:3000"+location, {
                method: 'POST',
                headers: {                  
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ os: os }), 
            });  
                if (response.ok) {
                    
                const newDocument = await response.text();
                document.open();
                document.write(newDocument);
                document.close();
                
            } else {
                console.error('Ошибка при отправке запроса:', response.status);
            }

        }
        window.onload = getOS;

Определив ос он отправляет запрос на сервер, дабы получить в ответ соттветствующие html и css. Да вот незадача способ которым я определял операционную систему отлично работает на пк. Причём даже на эмуляции андроид смартфона в пкшном браузере он определял как браузер андроид и подтягивал нужные html и css. Но после проверки на боевом сервере оказалось что смартфон отказывается подгружать что либо. Из за чего не знаю как посмотреть. Вопрос в том есть ли альтернативы проверить какая операционная система установлена на устройстве помимо того что делал я и проверки разрешения?
  • Вопрос задан
  • 130 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Решения вопроса 1
@shushara4241
Для определения ОС (платформы), на которой запущен браузер используется специальный заголовок User-Agent. Он оправляется вместе с запросами автоматически. Маршрутизацию на основе платформы сделать можно, например, на сервере - при получении запроса по маршруту по умолчанию (например "/") проверять заголовок User-Agent и перенаправлять на специфичный для этой платформы маршрут (например "/pc")
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
veselov4nton
@veselov4nton
Системный администратор.
На смартфоне при подключении к https://localhost:3000/... из браузера, это означает запрос идёт на localhost самого смартфона, а не на твой сервер. На ПК всё работает, потому что локалхост — это твой сервер (если он локальный).

У тебя вот так:

fetch("https://localhost:3000"+location, { ... })
Это и ломает работу на реальном устройстве. Нужно подставлять текущий хост, например:

fetch(window.location.origin + location, { ... })
Сделай это изменение, протестируй и отпишись, работает ли теперь на телефоне.
Ответ написан
1 комментарий
1 комментарий
@rPman
попробуй готовые проекты, их много, первое попавшееся
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript веб-разработчик (Backend)
TurboProject
от 60 000 ₽
Middle javascript разработчик
Neat-Studio
от 100 000 до 120 000 ₽
Tech Lead/ Team Lead (JavaScript)
SteadyControl • Воронеж
До 200 000 ₽
Ещё вакансии