Com generar canals RSS per a llocs web basats en JavaScript

Creació de canals RSS per a llocs web dinàmics basats en JavaScript

Els canals RSS són una eina vital per als consumidors que volen estar al dia de la nova informació dels seus llocs web preferits. Tot i que molts llocs web estàtics poden incorporar fàcilment fonts RSS, el desenvolupament d'un per a llocs basats en JavaScript comporta diferents obstacles. Aquests llocs web sovint es basen en contingut dinàmic carregat després de crear la pàgina, fent que les tecnologies RSS típiques siguin ineficaces.

Les eines habituals, com ara PolitePol o RSS.app, funcionen bé amb els llocs estàtics, però pateixen amb els llocs web pesats en JavaScript. Això dificulta que els desenvolupadors proporcionin un canal RSS per a pàgines que no mostren tot el seu contingut immediatament després de carregar-se.

Per solucionar aquest problema, els desenvolupadors sovint han de buscar solucions més complicades. Aquests inclouen la creació de scripts a mida o l'ús de tècniques de raspat web que tinguin en compte com JavaScript produeix contingut dinàmicament en una pàgina. Entendre aquests mètodes és fonamental per habilitar fonts RSS a llocs web com el que es mostra a l'exemple.

La part del comunicat de premsa del lloc web de Grameenphone, que carrega dades de forma dinàmica, és un excel·lent exemple d'aquestes estratègies. En aquest article, veurem com generar un canal RSS per a aquests llocs web utilitzant JavaScript i tècniques de raspat web contemporànies.

Comprendre com funcionen els scripts de fonts RSS de JavaScript

El primer script utilitza mòduls Node.js, Cheerio i RSS per treure contingut d'un lloc web amb molt de JavaScript. El principal problema aquí és que molts llocs web moderns carreguen material de manera dinàmica mitjançant JavaScript, cosa que dificulta que els mètodes de raspat estàndard agafin-ho tot. Per recuperar l'HTML en brut del lloc web de destinació, l'script primer envia una sol·licitud HTTP a través d'Axios. Després d'obtenir l'HTML, Cheerio s'utilitza per analitzar-lo i manipular-lo d'una manera similar a jQuery. Això ens permet accedir i recuperar seccions especificades de la pàgina, com ara notes de premsa, que són necessàries per a la creació d'un canal RSS.

Un cop esborrat el contingut, es converteix en un format compatible amb canals RSS. La funció Cheerio $('.element-comunicat-de-premsa').each() és especialment útil perquè repassa cada comunicat de premsa i extreu detalls crucials com el títol i l'URL. A continuació, les dades retallades s'afegeixen al canal RSS mitjançant l' feed.item() mètode de la biblioteca RSS. El pas final d'aquest script és generar l'XML RSS complet mitjançant l'execució feed.xml(). Aquest XML és el que els subscriptors poden utilitzar per estar informats sobre noves notes de premsa. Aquesta estratègia funciona bé per als llocs web quan el contingut es carrega dinàmicament però l'estructura és estable i previsible.

El segon enfocament utilitza Puppeteer, un navegador sense cap que s'especialitza a interaccionar amb pàgines web pesades en JavaScript. Puppeteer permet que l'script imiti una sessió de navegador real, el que significa que espera que JavaScript es carregui completament abans d'extreure el contingut. Això és especialment crucial per a pàgines com l'àrea de comunicats de premsa de Grameenphone, on el material es genera dinàmicament després de la càrrega de la primera pàgina HTML. L'script obre inicialment una instància del navegador Puppeteer i navega a l'URL de destinació mitjançant l' page.goto() mètode. Després que la pàgina estigui completament carregada, l'script l'avalua i extreu material pertinent mitjançant mètodes de manipulació DOM comuns com ara querySelectorAll.

Puppeteer supera les eines bàsiques de raspat com Cheerio en la gestió de pàgines web més complicades i dinàmiques. Després d'esborrar les dades rellevants, passa per un procés similar al primer script, formatant la sortida en un canal RSS. Aquest mètode és més adequat per a llocs web que carreguen material de manera asíncrona o utilitzen marcs JavaScript més avançats, cosa que li ofereix una alternativa versàtil per crear fonts RSS des de llocs web moderns. Ambdues opcions, tant si utilitzen Cheerio com Puppeteer, garanteixen que el contingut carregat dinàmicament es transformi a un format RSS adequat per al consum dels usuaris.

const axios = require('axios');
const cheerio = require('cheerio');
const RSS = require('rss');

async function fetchPressReleases() {
  try {
    const { data } = await axios.get('https://www.grameenphone.com/about/media-center/press-release');
    const $ = cheerio.load(data);
    let releases = [];

    $('.press-release-item').each((i, el) => {
      const title = $(el).find('h3').text();
      const url = $(el).find('a').attr('href');
      releases.push({ title, url });
    });

    return releases;
  } catch (error) {
    console.error('Error fetching press releases:', error);
  }
}

async function generateRSS() {
  const feed = new RSS({ title: 'Press Releases', site_url: 'https://www.grameenphone.com' });
  const releases = await fetchPressReleases();

  releases.forEach(release => {
    feed.item({ title: release.title, url: release.url });
  });

  console.log(feed.xml());
}

generateRSS();

const puppeteer = require('puppeteer');
const RSS = require('rss');

async function fetchDynamicContent() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.grameenphone.com/about/media-center/press-release');

  const releases = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.press-release-item')).map(el => ({
      title: el.querySelector('h3').innerText,
      url: el.querySelector('a').href
    }));
  });

  await browser.close();
  return releases;
}

async function generateRSS() {
  const feed = new RSS({ title: 'Dynamic Press Releases', site_url: 'https://www.grameenphone.com' });
  const releases = await fetchDynamicContent();

  releases.forEach(release => {
    feed.item({ title: release.title, url: release.url });
  });

  console.log(feed.xml());
}

generateRSS();

Creació de canals RSS dinàmics per a llocs web pesats en JavaScript

La captura de contingut que es mostra dinàmicament per a un canal RSS és una dificultat de vegades ignorada quan es treballa amb llocs web basats en JavaScript. A diferència de les pàgines estàtiques, els llocs web basats en JavaScript carreguen porcions del material després de la sol·licitud inicial de la pàgina, cosa que fa que els enfocaments típics de raspat no tinguin valor. A mesura que els llocs web creixen més interactius amb marcs més nous com React, Angular i Vue.js, els desenvolupadors volen noves solucions per gestionar la producció de contingut dinàmic.

Per produir un feed RSS per a aquests llocs, els desenvolupadors poden experimentar amb solucions com ara la navegació sense cap amb Puppeteer, que simula una veritable experiència d'usuari. Una altra manera és utilitzar les API subministrades pel mateix lloc web, si estan disponibles. Molts llocs web actuals exposen API JSON o RESTful que retornen les dades que es mostren a la portada. Amb aquestes API, podeu accedir immediatament a les dades estructurades sense preocupar-vos de com es veu la pàgina. Les API també tenen l'avantatge de ser més estables que el web scraping, que es pot trencar quan un lloc web canvia d'estructura.

A més, combinar l'ús de l'API amb la representació del costat del servidor (SSR) podria ser un mètode de generació RSS eficaç. Els marcs SSR, com ara Next.js, poden prerenderitzar pàgines al servidor, cosa que us permet capturar HTML completament completat, inclosos els elements carregats dinàmicament. A continuació, aquest HTML es pot convertir en un canal RSS. Aquestes solucions ofereixen als desenvolupadors flexibilitat i escalabilitat quan treballen amb marcs JavaScript en constant canvi i algorismes de càrrega de contingut dinàmic.