CoderCastrov logo
CoderCastrov
JavaScript

Парсинг веб-страниц: Проблема с динамическими приложениями

Парсинг веб-страниц: Проблема с динамическими приложениями
просмотров
2 мин чтение
#JavaScript
Table Of Content

    Из моего опыта, библиотека Beautiful Soup на Python - это инструмент, который обычно используется для парсинга веб-страниц. Он эффективен и интуитивно понятен для веб-разработчиков. Однако в последнее время я изучаю и создаю приложения с использованием фреймворка React-Native. Я мог бы выбрать Django в качестве бэкэнда и использовать Beautiful Soup, но это добавило бы еще одну кривую обучения, поэтому я решил придерживаться привычного для меня бэкэнда на Node.js.

    Проблема: Cheerio.js + динамическое веб-приложение == неопределенные результаты Я разработал всю логику своего мобильного приложения и был уверен в своих способностях для его выполнения, и не предвидел никаких явных проблем с функциональностью... пока не понял, что GET-запросы не ожидают загрузки динамического контента. Прежде чем прибегнуть к более сложному API, такому как PhantomJS, я провел исследование.

    Решение: Имитация веб-сканера Чтобы Cheerio получил DOM, я использую пакет Node.js под названием request. Есть и другие пакеты, но мне больше всего нравится request. Request получает параметр options, который включает URL и заголовки. Он выглядит так:

    var options = {
      url: 'https://api.github.com/repos/request/request',
      headers: {
        'User-Agent': 'request'
      }
    };
    request(options, callback);

    Ключ url понятен - это адрес веб-страницы, которую вы запрашиваете; однако заголовки были для меня новыми, особенно User-Agent. Заголовки - это строки, которые позволяют сети определить тип приложения, операционную систему и другие функции.

    Это крайне полезно для нашей ситуации, потому что мы можем установить заголовок в любое значение, которое нам нужно. Таким образом, чтобы получить полностью отрендеренный DOM, мы можем установить User-Agent в значение веб-сканера, а иногда - мобильного устройства (в зависимости от сайта). Веб-сканеры используют DOM для улучшения SEO, а мобильные сайты часто используют полностью отрендеренный DOM для улучшения производительности. В моем случае я использовал User-Agent мобильного устройства. Он выглядит так:

    let options = {
      headers: {
        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4'
      }
    };

    Это решило проблему! Надеюсь, это поможет и вам.

    Я приветствую любую обратную связь - длина статьи, предоставленная информация и т. д. Спасибо за чтение!

    Jarrod