feat: add viewport configuration and update prerender service to use it

Author: LabEG

README.md

@@ -3,6 +3,7 @@
 Web pages that are rendered on the browser side and made without SSR are not seen by bots. Because bots can't render pages. This microservice allows all bots to see the already rendered page.
 
 Features:
+
 - Allows bots to see content on web pages without SSR
 - Works on any framework, ex: JQuery, Angular 1, StencilJS and others
 - Works on any technologies, ex: WebComponents, Microfrontends, Dynamic Content and others
@@ -59,6 +60,9 @@ The server will return a response with the specified status code.
 - `-e BOTVIEW_WAIT_UNTIL=networkidle` - [When to consider waiting succeeds. Given an array of event strings, waiting is considered to be successful after all events have been fired](https://playwright.dev/docs/api/class-page#page-goto),
     default networkidle.
 
+- `-e BOTVIEW_VIEWPORT="360x640"` - Set the screen resolution (viewport) for the browser context, format is WIDTHxHEIGHT (e.g. `1280x720`). Default is `360x640`.
+  Example: `-e BOTVIEW_VIEWPORT="1280x720"`
+
 - `-e BOTVIEW_BLOCK_IMAGES=true` - Block loading of images to improve performance, default true.
 
 - `-e BOTVIEW_BLOCK_STYLESHEETS=true` - Block loading of stylesheets to improve performance, default true.

src/LogLevels.ts

@@ -1,9 +1,8 @@
-
 export enum LogLevels {
     FATAL = 60,
     ERROR = 50,
     WARN = 40,
     INFO = 30,
     DEBUG = 20,
-    TRACE = 10
+    TRACE = 10,
 }

src/config.ts

@@ -12,6 +12,7 @@ process.env.BOTVIEW_BLOCK_FONTS ||= "true"; // true to block fonts
 process.env.BOTVIEW_BLOCK_MEDIA ||= "true"; // true to block media
 process.env.BOTVIEW_BLOCK_URLS ||= "https://an.yandex.ru, https://mc.yandex.ru"; // comma or space separated list of urls to block (URL-encoding is optional)
 process.env.BOTVIEW_BLOCK_URLS_REGEX ||= ""; // comma or space separated list of regexes to block (URL-encoding is optional)
+process.env.BOTVIEW_VIEWPORT ||= "360x640"; // screen viewport, format: WIDTHxHEIGHT (e.g. 360x640)
 process.env.BOTVIEW_LOG_LEVEL ||= LogLevels.INFO.toString(); // log level: trace, debug, info, warn, error, fatal
 
 function getLogLevelChecked(logLevel: string): number {
@@ -29,6 +30,12 @@ function getLogLevelChecked(logLevel: string): number {
     throw new Error(`Unknown BOTVIEW_LOG_LEVEL: ${logLevel}`);
 }
 
+function parseViewport(str: string): { width: number; height: number } {
+    const match = /^([0-9]+)x([0-9]+)$/i.exec(str);
+    if (!match) return { width: 360, height: 640 };
+    return { width: Number(match[1]), height: Number(match[2]) };
+}
+
 export const config = {
     basicAuth: process.env.BOTVIEW_BASIC_AUTHS,
     basicAuthParsed: process.env.BOTVIEW_BASIC_AUTHS
@@ -55,4 +62,5 @@ export const config = {
               .filter(Boolean)
         : [],
     logLevel: getLogLevelChecked(process.env.BOTVIEW_LOG_LEVEL),
+    viewport: parseViewport(process.env.BOTVIEW_VIEWPORT),
 };

src/services/prerender.service.ts

@@ -1,10 +1,9 @@
 import { JsonLogger } from "./json-logger.service";
-import {LogLevels} from "../LogLevels";
+import { LogLevels } from "../LogLevels";
 import { config } from "../config";
 import { Injectable } from "@nestjs/common";
 import {
     chromium,
-    devices,
     Browser,
     Page,
     ConsoleMessage,
@@ -29,7 +28,7 @@ export class PrerenderService {
 
         const authHeaders = this.setAuth(url);
         const context = await browser.newContext({
-            ...devices["Galaxy S8"],
+            viewport: config.viewport,
             ...authHeaders,
         });
 
@@ -93,7 +92,11 @@ export class PrerenderService {
     ): Pick<BrowserContextOptions, "httpCredentials"> {
         if (config.basicAuthParsed.length > 0) {
             // eslint-disable-next-line prettier/prettier
-            for (const [authUrl, username, password] of config.basicAuthParsed) {
+            for (const [
+                authUrl,
+                username,
+                password,
+            ] of config.basicAuthParsed) {
                 if (url.startsWith(authUrl)) {
                     return {
                         httpCredentials: {