[vk-bridge-react] useAdaptivity возвращает initialState на vk.com

[nikitakoschelenko]

Если открыть мини-приложение с сайта vk.com, то при вызове хука useAdaptivity он возвращает initialState:

import { useAdaptivity } from '@vkontakte/vk-bridge-react'

const App = () => {
  const adaptivity = useAdaptivity()
  console.log(adaptivity) // выводит { "type": null, "viewportWidth": 0, "viewportHeight": 0 }

  // ...
}

Подебажив код библиотеки в этом месте выяснил, что в data отсутствует поле adaptivity. Вот пример data, т. е. приходящего события VKWebAppUpdateConfig:

Итого вопрос: ожидаемое ли это поведение? Если да, то как корректно переписать функцию transformVKBridgeAdaptivity из документации, чтобы на vk.com размеры были десктопные? В данный момент viewWidth равно ViewWidth.SMALL_TABLET (VKUI автоматически так определяет), хотя должно быть ViewWidth.DESKTOP.

Возможно, я не прав или чего-то не понимаю, но в документации явно не сказано о таком моменте 🙁

[inomdzhon]

Привет,

Узнал, что vk.com бридж не отдаёт параметр adaptivity, его отдают только Android/iOS :(

Вообще, для десктоп, лучше оставить автоопределение адаптивности. Но если хочется перебить, то тогда предлагаю в transformVKBridgeAdaptivity передать желаемые значения по умолчанию, вот так:

export const transformVKBridgeAdaptivity = ({
  type,
  viewportWidth,
  viewportHeight,
}: UseAdaptivity): AdaptivityProps => {
  switch (type) {
    case 'adaptive':
      return {
        viewWidth: getViewWidthByViewportWidth(viewportWidth),
        viewHeight: getViewHeightByViewportHeight(viewportHeight),
      };
    case 'force_mobile':
    case 'force_mobile_compact':
      return {
        viewWidth: ViewWidth.MOBILE,
        sizeX: SizeType.COMPACT,
        sizeY: type === 'force_mobile_compact' ? SizeType.COMPACT : SizeType.REGULAR,
      };
    default:
      return {
        viewWidth: ViewWidth.DESKTOP, // указываем значения по умолчанию
      };
  }
};

[nikitakoschelenko]

Узнал, что vk.com бридж не отдаёт параметр adaptivity, его отдают только Android/iOS :(

Сейчас проверил, не отдает в том числе и m.vk.com

Вообще, для десктоп, лучше оставить автоопределение адаптивности

VKUI определяет десктоп только при ширине экрана >1024px, а максимальный размер фрейма, который возможно установить в настройках приложения, равен 1000px 🤷‍♂️ При этом событие VKWebAppUpdateConfig, как видно на скрине выше, отдает почему-то 1086px, благодаря чему все-таки десктоп должен включаться.

    default:
      return {
        viewWidth: ViewWidth.DESKTOP, // указываем значения по умолчанию
      };

Звучит плохо, при открытии приложения вне фрейма, а так же в m.vk.com, всегда будет десктоп. Пока сделал вот так:

    default:
      return {
        viewWidth: getViewWidthByViewportWidth(window.innerWidth + 86),
        viewHeight: getViewHeightByViewportHeight(window.innerHeight)
      }

Выглядит чуть лучше, чем force десктоп в непонятных ситуациях.

Надеюсь, что когда-нибудь этот момент починят (например, добавив всё-таки параметр adaptivity в бридж на vk.com, либо разрешив делать размер фрейма больше, либо установив значения в 1000px для автоматического десктопного режима в VKUI). Спасибо!

[inomdzhon]

Надеюсь, что когда-нибудь этот момент починят (например, добавив всё-таки параметр adaptivity в бридж на vk.com

Написал ребятам про дорабку, жду ответа.

---

Уберу проверку на !(data in adaptivity), чтобы появился доступ хотя бы к viewport_width и viewport_height

[inomdzhon]

Выпустил версию @vkonktate/vk-bridge-react@1.0.1, где убрана проверка на !(data in adaptivity).

Это позволит делать так:

    default:
      return {
        viewWidth: getViewWidthByViewportWidth(viewportWidth + 86), // про 86px не знаю нужен ли всё ещё будет
        viewHeight: getViewHeightByViewportHeight(ViewportHeight)
      }

Надеюсь, что когда-нибудь этот момент починят (например, добавив всё-таки параметр adaptivity в бридж на vk.com

Параметр adaptivity добавят в доку. Но в vk.com и в mvk.com пока определяться параметр не будет 😔 adaptivity нужен в первую очередь для WebView в нативных приложениях Android/iOS.