Tenga en cuenta que este proyecto está en desuso . La representación dinámica no es un enfoque recomendado y hay mejores enfoques para la representación en la web.
Rendertron no se mantendrá activamente en este momento.
Rendertron es una solución de representación cromada sin cabeza diseñada para representar y serializar páginas web sobre la marcha.
RenderTron está diseñado para habilitar su aplicación web Progressive (PWA) para servir el contenido correcto a cualquier bot que no represente o ejecute JavaScript. RenderTron se ejecuta como un servidor HTTP independiente. Rendertron renderiza páginas solicitadas con cromo sin cabeza, detectando automáticamente cuando su PWA ha completado la carga y esializa la respuesta a la solicitud original. Para usar RenderTron, su aplicación configura el middleware para determinar si proxy de una solicitud a RenderTron. RenderTron es compatible con todas las tecnologías del lado del cliente, incluidos los componentes web.
Una vez que tenga el servicio en funcionamiento, deberá implementar la capa de servicio diferencial. Esto verifica el agente de usuarios para determinar si se requiere el preendimiento.
Esta es una lista de middleware disponible para usar con el servicio RenderTron:
RenderTron también es compatible con Prerender.io Middleware. Nota: Las listas de agentes de usuario difieren allí.
GET /render/<url>
El punto final render representará su página y serializará su página. Las opciones se especifican como parámetros de consulta:
mobile predeterminado es false . Habilitar pasando ?mobile para solicitar la versión móvil de su sitio.refreshCache : pase refreshCache=true para ignorar los resultados de renderizado potencialmente en caché y tratar la solicitud como si aún no estuviera almacenado en caché. El nuevo resultado de renderizado se utiliza para reemplazar el resultado anterior. GET /screenshot/<url>
POST /screenshot/<url>
El punto final screenshot se puede usar para verificar que su página esté renderizado correctamente.
Ambos puntos finales admiten los siguientes parámetros de consulta:
width es predeterminado a 1000 : especifica el ancho de la vista.height predeterminada es 1000 : especifica la altura de la visión.mobile predeterminado es false . Habilitar pasando ?mobile para solicitar la versión móvil de su sitio.timezoneId : especifica la representación para la zona horaria. Las opciones adicionales están disponibles como una cadena JSON en el cuerpo POST . Consulte la documentación del titiritero para ver las opciones disponibles. No puede especificar el type (predeterminado a jpeg ) y los parámetros encoding (predeterminados a binary ).
GET /invalidate/<url>
El punto final invalidate eliminará la memoria caché enriquecida para <url> de la memoria caché configurada (en memoria, sistema de archivos o almacén de datos en la nube).
Al establecer los parámetros de consulta como parte de su URL, asegúrese de que estén codificados correctamente. En JS, esto sería encodeURIComponent(myURLWithParams) . Por ejemplo, para especificar page=home :
https://render-tron.appspot.com/render/http://my.domain/%3Fpage%3Dhome
El servicio intenta detectar cuándo se ha cargado una página mirando el evento de carga de la página, asegurando que no haya solicitudes de red pendientes y que la página haya tenido tiempo suficiente para renderizar.
Hay un límite difícil de 10 segundos para la representación. Asegúrese de no alcanzar este presupuesto asegurando que su aplicación se represente mucho antes de que expire el presupuesto.
Chrome sin cabeza admite componentes web, pero Shadow DOM es difícil de serializar de manera efectiva. Como tal, se requiere Shady DOM (una cuña liviana para Shadow DOM) para los componentes web.
Si está utilizando Web Components V0 (desaprobado), deberá habilitar a Shady DOM para que se represente correctamente. En Polymer 1.x, que utiliza los componentes web V0, Shady DOM está habilitado de forma predeterminada. Si está utilizando Shadow DOM, anule esto configurando el parámetro de consulta dom=shady al dirigir las solicitudes al servicio RenderTron.
Si está utilizando los componentes web V1 y webcomponents-lite.js o webcomponents-loader.js , configure el parámetro de consulta wc-inject-shadydom=true al dirigir las solicitudes al servicio RenderTron. Este servicio de renderizador forzará los polyultos necesarios a cargar y habilitar.
Se conservan los códigos de estado de la URL solicitada inicial. Si se trata de un 200 o 304, puede establecer el estado HTTP devuelto por el servicio de renderizado agregando una metaetiqueta.
< meta name =" render:status_code " content =" 404 " /> Para instalar RenderTron y ejecutarlo localmente, primero instale RenderTron:
npm install -g rendertronCon Chrome instalado en su máquina, ejecute RenderTron CLI:
rendertronDependencias de clon e instalación:
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run buildCon una instancia local de Chrome instalada, puede iniciar el servidor localmente:
npm run start gcloud app deploy app.yaml --project <your-project-id>
RenderTron ya no incluye un archivo Docker. En su lugar, consulte la documentación de Puppeteer sobre cómo implementar Ejecutar Chrome sin cabeza en Docker.
Al implementar el servicio, establezca variables de configuración incluyendo un config.json en la raíz. Opciones de configuración disponibles:
timeout predeterminado 10000 - Establezca el tiempo de espera utilizado para representar la página de destino.port predeterminado 3000 : configure el puerto para usar para ejecutar y escuchar el servicio RenderTron. Nota Si Process.env.port está configurado, se utilizará en su lugar.host Predeterminado 0.0.0.0 : configure el nombre de host para usar para ejecutar y escuchar el servicio RenderTron. Nota Si Process.env.host está configurado, se usará en su lugar.width predeterminado 1000 - Establezca el ancho (resolución) que se utilizará para representar la página.height predeterminada 1000 - Establezca la altura (resolución) que se utilizará para representar la página.reqHeaders predeterminado {} - Establezca los encabezados HTTP adicionales que se enviarán a la página de destino con cada solicitud.cache predeterminado null : Establezca en datastore para habilitar el almacenamiento en caché en Google Cloud usando DataStore solo use si se implementa en Google Cloud , memory para habilitar el almacenamiento en caché o filesystem para habilitar el almacenamiento en caché basado en el discocacheConfig : una matriz de objetos para especificar opciones de almacenamiento en cachérenderOnly : restringir el punto final a las solicitudes de servicio solo para ciertos dominios. Especificado como una matriz de cadenas. p.ej. ['http://render.only.this.domain'] . Esta es una coincidencia de prefijo estricta, así que asegúrese de especificar los protocolos exactos que se utilizarán (por ejemplo, http, https).closeBrowser predeterminado false : true obliga al navegador a cerrar y reabrir entre cada renderizado de cada página, algunos sitios pueden necesitar esto para evitar que las URL pasen la primera que se retiran las respuestas nulas que regresan.restrictedUrlPattern predeterminado null - Establezca restringidos para restringir las solicitudes que coinciden con el patrón regex. cacheDurationMinutes predeterminado 1440 - Establezca un tiempo de caducidad en minuos, predeterminados a 24 horas. Establecer en -1 para deshabilitar la expiración de cachécacheMaxEntries predeterminado 100 - Establezca el número máximo de entradas almacenadas en el método de caché seleccionado. Establecer en -1 para permitir el almacenamiento en caché ilimitado. Si usa el método de almacenamiento en caché del almacén de datos, establecer este valor en más de 1000 puede conducir a un rendimiento degradado ya que la consulta para determinar el tamaño del caché puede ser demasiado lento. Si desea permitir una memoria caché más grande en datastore , considere configurar esto en -1 y administrar el tamaño de su almacén de datos utilizando un método como esta eliminación de entradas a granelsnapshotDir predeterminado <your os's default tmp dir>/renderton sistema operativo Syse System SOLO SOLO EL DIRECTORIO Los archivos de caché RenderTron se almacenarán en Un archivo de configuración de ejemplo que especifica un caché de memoria, con una expiración de 2 horas y un máximo de 50 entradas
{
"cache" : "memory" ,
"cacheConfig" : {
"cacheDurationMinutes" : 120 ,
"cacheMaxEntries" : 50
}
}Si tiene problemas para que el cromo sin cabeza se ejecute en su entorno, consulte la guía de solución de problemas para titiriteros.