feat(*): add server logic for detect webview

src/index.ts

@@ -1,2 +1,2 @@
-export { BridgeToNative } from './bridge-to-native';
-export { NativeParams, Theme, Environment, NativeFeatureKey, PdfType } from './types';
+export { BridgeToNative } from './client/bridge-to-native';
+export { NativeParams, Theme, Environment, NativeFeatureKey, PdfType } from './client/types';

src/server/check-is-webview.ts

@@ -0,0 +1,36 @@
+import {
+    extractAppVersion,
+    extractUserAgent,
+    isAkeyWebview,
+    extractNativeParamsFromCookies
+} from './utils';
+import { RequestHeaderType } from './types';
+import { versionPattern, webviewUaIOSPattern } from './reg-exp-patterns';
+
+export const isWebviewByUserAgent = (
+    userAgent: string,
+    appVersion: string | undefined,
+) => {
+    if (userAgent && isAkeyWebview(userAgent)) {
+        return false;
+    }
+
+    return (
+        (appVersion && versionPattern.test(appVersion)) || !!userAgent?.match(webviewUaIOSPattern)
+    );
+};
+
+export const isWebviewByCookies = (nativeParamsFromCookies: Record<string, any> | null) => {
+    return !!(nativeParamsFromCookies && nativeParamsFromCookies.isWebview)
+}
+export const checkIsWebview = (
+    request: RequestHeaderType,
+): boolean => {
+    const userAgent = extractUserAgent(request);
+
+    // `app-version` в заголовках – индикатор вебвью. В iOS есть только в первом запросе от webview
+    const appVersion = extractAppVersion(request);
+    const nativeParamsFromCookies = extractNativeParamsFromCookies(request);
+
+    return isWebviewByCookies(nativeParamsFromCookies) || isWebviewByUserAgent(userAgent, appVersion);
+};

src/server/constants.ts

@@ -0,0 +1,13 @@
+export const THEME_QUERY = 'theme';
+export const TITLE = 'title';
+
+export const WEBVIEW_IOS_APP_ID_QUERY = 'applicationId';
+export const WEBVIEW_IOS_APP_VERSION_QUERY = 'device_app_version';
+export const WEBVIEW_WITHOUT_LAYOUT_QUERY = 'without_layout';
+export const WEBVIEW_NEXT_PAGE_ID_QUERY = 'nextPageId';
+
+export const CAPSULE_UA_SUBSTR = 'Capsule';
+export const AKEY_UA_SUBSTR = 'AKEY';
+export const VOSKHOD_UA_SUBSTR = 'VOSKHOD';
+
+export const NATIVE_PARAMS_COOKIE_NAME = 'app_native_params';

src/server/detect-and-extract-native-params.ts

@@ -0,0 +1,92 @@
+import {
+    THEME_QUERY,
+    TITLE,
+    WEBVIEW_IOS_APP_ID_QUERY,
+    WEBVIEW_IOS_APP_VERSION_QUERY,
+    WEBVIEW_NEXT_PAGE_ID_QUERY,
+    WEBVIEW_WITHOUT_LAYOUT_QUERY,
+    NATIVE_PARAMS_COOKIE_NAME
+} from './constants';
+
+import { extractAppVersion } from './utils';
+
+import { extractAndJoinOriginalWebviewParams } from './extract-and-join-original-webview-params';
+import { checkIsWebview } from './check-is-webview';
+import { iosAppIdPattern, versionPattern } from './reg-exp-patterns';
+import { EmptyNativeParams, NativeParams, RequestHeaderType } from "./types";
+
+/**
+ * Вытаскивает из query и headers все детали для вебвью.
+ *
+ * @returns Примечание по `appVersion`: В вебвью окружении версия всегда имеет формат `x.x.x`.
+ */
+
+export const detectAndExtractNativeParams = (
+    request: RequestHeaderType,
+    addCookie?: (cookieKey: string, cookieValue: string) => void
+): EmptyNativeParams | NativeParams => {
+    const isWebview = checkIsWebview(request);
+
+    if (!isWebview) {
+        return { isWebview } as EmptyNativeParams;
+    }
+
+    const {
+        [THEME_QUERY]: themeQuery,
+        // При желании через диплинк на вебвью можно передать желаемый заголовок,
+        // который АО установит в верхней АМ панели при загрузке АО.
+        // По умолчанию нужна именно пустая строка.
+        [TITLE]: title = '',
+        // Говорят, этого может и не быть в урле. Формат `com.xxxxxxxxx.app`.
+        [WEBVIEW_IOS_APP_ID_QUERY]: iosAppIdQuery,
+        [WEBVIEW_IOS_APP_VERSION_QUERY]: iosAppVersionQuery,
+        [WEBVIEW_WITHOUT_LAYOUT_QUERY]: withoutLayoutQuery,
+        [WEBVIEW_NEXT_PAGE_ID_QUERY]: nextPageId,
+    } = request.query as Record<string, string>;
+
+    const originalWebviewParams = extractAndJoinOriginalWebviewParams(
+        request.query as Record<string, string>,
+    );
+
+    // Пробуем вытащить схему iOS приложения из query, если есть.
+    let iosAppId;
+
+    if (iosAppIdPattern.test(iosAppIdQuery)) {
+        const [, appIdSubsting] = iosAppIdQuery.match(iosAppIdPattern) as string[];
+
+        iosAppId = appIdSubsting;
+    }
+
+    // Определяем версию АМ из query или заголовка.
+    let appVersion = '0.0.0';
+
+    const appVersionFromHeaders = extractAppVersion(request);
+
+    if (typeof iosAppVersionQuery === 'string' && versionPattern.test(iosAppVersionQuery)) {
+        appVersion = iosAppVersionQuery;
+    } else if (
+        typeof appVersionFromHeaders === 'string' &&
+        versionPattern.test(appVersionFromHeaders)
+    ) {
+        const [, versionSubstring] = appVersionFromHeaders.match(versionPattern) || [];
+
+        appVersion = versionSubstring;
+    }
+
+    const nativeParams = {
+        appVersion,
+        iosAppId,
+        isWebview,
+        theme: themeQuery === 'dark' ? 'dark' : 'light',
+        title,
+        withoutLayout: withoutLayoutQuery === 'true',
+        originalWebviewParams,
+        nextPageId: nextPageId ? Number(nextPageId) : null,
+    } as NativeParams;
+
+    if(addCookie) {
+        addCookie(NATIVE_PARAMS_COOKIE_NAME, encodeURIComponent(JSON.stringify(nativeParams)));
+    }
+
+    return nativeParams;
+};

src/server/extract-and-join-original-webview-params.ts

@@ -0,0 +1,42 @@
+// Словарь всех известных на данный момент сервисных query параметров в webview
+const webviewInitParamsDictionary = [
+    'device_app_version',
+    'device_os_version',
+    'device_boot_time',
+    'device_timezone',
+    'applicationId',
+    'device_app_id',
+    'device_locale',
+    'paySupported',
+    'device_model',
+    'device_uuid',
+    'device_name',
+    'device_id',
+    'client_id',
+    'theme',
+    'scope',
+];
+
+/**
+ * Данная утилита извлекает из Fastify.Query все известные
+ * сервисные query параметры которые добавляются к url внутри
+ * webview при первой инициализации и собирает их в query строку.
+ *
+ * @param query - Fastify.Query в формате объекта
+ * @return строка query параметров в формате: "title=Title&theme=dark..."
+ * */
+export const extractAndJoinOriginalWebviewParams = (
+    query: Record<string, string>,
+): string => {
+    const params = new URLSearchParams();
+
+    webviewInitParamsDictionary.forEach((key) => {
+        const value = query[key];
+
+        if (value) {
+            params.set(key, value);
+        }
+    });
+
+    return params.toString();
+};

src/server/index.ts

@@ -0,0 +1,5 @@
+export * from './detect-and-extract-native-params';
+export * from './check-is-webview';
+export * from './types';
+export * from './reg-exp-patterns';
+export * from './extract-and-join-original-webview-params';

src/server/reg-exp-patterns.ts

@@ -0,0 +1,9 @@
+export const iosAppIdPattern = /^com\.([a-z]+)\.app$/;
+
+// Android приписывает после версии тип билда, например `feature`. Нам эта инфа не нужна.
+export const versionPattern = /^(\d+\.\d+\.\d+)(\s.+)?$/;
+
+export const webviewUaIOSPattern = new RegExp(
+    ['WebView', '(iPhone|iPod|iPad)(?!.*Safari)'].join('|'),
+    'ig',
+);

src/server/types.ts

@@ -0,0 +1,16 @@
+export type RequestHeaderType = Record<string, any>;
+
+export type EmptyNativeParams = {
+    isWebview: false;
+};
+
+export type NativeParams = {
+    appVersion: string;
+    iosAppId?: string;
+    isWebview: true;
+    theme: 'dark' | 'light';
+    title: string;
+    withoutLayout: boolean;
+    originalWebviewParams: string;
+    nextPageId: number | null;
+};

src/server/utils.ts

@@ -0,0 +1,59 @@
+import {
+    CAPSULE_UA_SUBSTR,
+    AKEY_UA_SUBSTR,
+    VOSKHOD_UA_SUBSTR,
+    NATIVE_PARAMS_COOKIE_NAME
+} from './constants';
+import { RequestHeaderType } from './types';
+
+/**
+ * Заголовок с версией приложения, который посылает вебвью из AM Android
+ */
+const AppVersion = 'app-version';
+
+/**
+ * Возвращает `app-version` из заголовков запроса
+ */
+export function extractAppVersion(request: RequestHeaderType): string | undefined {
+    return request.headers[AppVersion];
+}
+
+/**
+ * Возвращает `User-agent` из заголовков запроса
+ */
+export function extractUserAgent(request: RequestHeaderType): string {
+    return request.headers['user-agent'];
+}
+
+/**
+ * Возвращает объект с `webview-параметрами` из cookies
+ */
+export function extractNativeParamsFromCookies(request: RequestHeaderType): Record<string, string> | null {
+    const cookieHeader = request.headers['cookie'];
+
+    if (!cookieHeader) {
+        return {};
+    }
+
+    const cookiesArray = cookieHeader.split('; ');
+    const cookieString = cookiesArray.find((cookie: string) => cookie.startsWith(`${NATIVE_PARAMS_COOKIE_NAME}=`));
+
+    if (!cookieString) return null;
+
+    const [, value] = cookieString.split('=');
+
+    try {
+        return JSON.parse(decodeURIComponent(value));
+    } catch {
+        return null;
+    }
+}
+
+
+/**
+ * Проверка по юзерагенту на сервере
+ */
+export const isAkeyWebview = (userAgent: string) =>
+    userAgent.includes(CAPSULE_UA_SUBSTR) ||
+    userAgent.includes(AKEY_UA_SUBSTR) ||
+    userAgent.includes(VOSKHOD_UA_SUBSTR);

test/constants.test.ts → test/client/constants.test.ts

@@ -1,4 +1,4 @@
-import { nativeFeaturesFromVersion, versionToIosAppId } from '../src/constants';
+import { nativeFeaturesFromVersion, versionToIosAppId } from '../../src/client/constants';
 
 const versionPattern = /^\d+.\d+.\d+$/;
 

test/index.test.ts → test/client/index.test.ts

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/dot-notation -- отключено, чтобы можно было обращаться к приватным полям для их тестирования */
 
-import { BridgeToNative } from '../src';
+import { BridgeToNative } from '../../src';
 import {
     CLOSE_WEBVIEW_SEARCH_KEY,
     CLOSE_WEBVIEW_SEARCH_VALUE,
     PREVIOUS_B2N_STATE_STORAGE_KEY,
     START_VERSION_ANDROID_ALLOW_OPEN_NEW_WEBVIEW,
-} from '../src/constants';
+} from '../../src/client/constants';
 import { mockSessionStorage } from './mock/mock-session-storage';
-import { WebViewWindow } from '../src/types';
+import { WebViewWindow } from '../../src/client/types';
 
 const mockedNativeFallbacksInstance = {};
 const mockedNativeNavigationAndTitleInstance = {
@@ -18,14 +18,14 @@ const MockedNativeNavigationAndTitleConstructor = jest.fn(
     () => mockedNativeNavigationAndTitleInstance,
 );
 
-jest.mock('../src/native-fallbacks', () => ({
+jest.mock('../../src/client/native-fallbacks', () => ({
     __esModule: true,
     NativeFallbacks: function MockedNativeFallbacksConstructor() {
         return mockedNativeFallbacksInstance;
     },
 }));
 
-jest.mock('../src/native-navigation-and-title', () => ({
+jest.mock('../../src/client/native-navigation-and-title', () => ({
     __esModule: true,
     get NativeNavigationAndTitle() {
         return MockedNativeNavigationAndTitleConstructor;

test/integration.test.ts → test/client/integration.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/dot-notation -- отключено, чтобы можно было обращаться к приватным полям для их тестирования */
 
-import { BridgeToNative } from '../src/bridge-to-native';
+import { BridgeToNative } from '../../src/client/bridge-to-native';
 
 describe('BridgeToNative integration testing', () => {
     const defaultAmParams = {

test/native-fallbacks.test.ts → test/client/native-fallbacks.test.ts

@@ -1,7 +1,7 @@
-import type { BridgeToNative } from '../src/bridge-to-native';
-import { nativeFeaturesFromVersion } from '../src/constants';
-import { NativeFallbacks } from '../src/native-fallbacks';
-import { PdfType } from '../src/types';
+import type { BridgeToNative } from '../../src/client/bridge-to-native';
+import { nativeFeaturesFromVersion } from '../../src/client/constants';
+import { NativeFallbacks } from '../../src/client/native-fallbacks';
+import { PdfType } from '../../src/client/types';
 
 let androidEnvFlag = false;
 let iosAppId: string | undefined;
@@ -32,7 +32,7 @@ const mockedBridgeToAmInstance = {
     },
 } as unknown as BridgeToNative;
 
-jest.mock('../src/bridge-to-native', () => ({
+jest.mock('../../src/client/bridge-to-native', () => ({
     __esModule: true,
     BridgeToNative: function MockedBridgeToAmConstructor() {
         return mockedBridgeToAmInstance;

test/native-navigation-and-title.test.ts → test/client/native-navigation-and-title.test.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/dot-notation -- отключено, чтобы можно было обращаться к приватным полям для их тестирования */
 
-import type { BridgeToNative } from '../src';
+import type { BridgeToNative } from '../../src';
 
-import { PREVIOUS_NATIVE_NAVIGATION_AND_TITLE_STATE_STORAGE_KEY } from '../src/constants';
+import { PREVIOUS_NATIVE_NAVIGATION_AND_TITLE_STATE_STORAGE_KEY } from '../../src/client/constants';
 import { mockSessionStorage } from './mock/mock-session-storage';
-import { NativeNavigationAndTitle } from '../src/native-navigation-and-title';
+import { NativeNavigationAndTitle } from '../../src/client/native-navigation-and-title';
 
 let androidEnvFlag = false;
 let mockedSetPageSettings: unknown;
@@ -37,7 +37,7 @@ Object.defineProperty(global, 'handleRedirect', {
     configurable: true,
 });
 
-jest.mock('../src/bridge-to-native', () => ({
+jest.mock('../../src/client/bridge-to-native', () => ({
     __esModule: true,
     BridgeToNative: function MockedBridgeToAmConstructor() {
         return mockedBridgeToNativeInstance;

test/utils.test.ts → test/client/utils.test.ts

@@ -3,8 +3,8 @@ import {
     getAppId,
     getUrlInstance,
     isValidVersionFormat,
-} from '../src/utils';
-import { ANDROID_APP_ID } from '../src/constants';
+} from '../../src/client/utils';
+import { ANDROID_APP_ID } from '../../src/client/constants';
 
 describe('extractAppNameRouteAndQuery', () => {
     it('should extract app-name without path and query', () => {