A package for integrating VK Mini Apps with official VK clients for iOS, Android and Web
License: MIT License
A package for integrating VK Mini Apps with official VK clients for iOS, Android and Web.
Welcome to our Contributing document.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Приветствую!
При вызове метода API в response приходит ещё один response, в котором уже лежит результат. Хотелось бы, чтобы в response уже лежал результат. Пример кода и результат ниже.
При получении события в connect.subscribe константы которые были определенны через useEffect отображаются со значением инициализации.
Суть проблемы можно посмотреть тут:
https://github.com/WinZip17/test-vk-app
При включении приложение получает данные пользователя в переменную fetchedUser.
Введенное в поле значение сохраняется в переменную message.
При нажатии на единственную кнопку вызывается метод (формальный, для теста, без требований) connect.send("VKWebAppGetClientVersion", {});
Попадая в connect.subscribe на строки 24-26 видно, что данные приходят правильно, но переменные message и fetchedUser имеют актуальное на момент инициализации значение (null и "") не смотря на то, что они уже менялись.
Вариант через промисы .then, к сожалению, работает не со всеми методами. (например через connect не сработал "method": "wall.get", но сработал устаревим методом @vkontakte/vk-connect-promise)
При вызове bridge.send("VKWebAppScroll", {"top": 0, "speed": 600}) скроллится до 0 пикселей, но без анимации, то есть скролл происходит мгновенно, игнорируя параметр speed.
I'm trying to import
import { Header } from '@vkontakte/vkui';
In Next.js (SSR)
Getting window is not defined
ReferenceError: window is not defined
at createVKConnect (/home/vvm/next-template/node_modules/@vkontakte/vk-connect/dist/index.js:1:2718)
at Object.<anonymous> (/home/vvm/next-template/node_modules/@vkontakte/vk-connect/dist/index.js:1:4681)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/home/vvm/next-template/node_modules/@vkontakte/vkui/dist/hooks/useInsets.js:16:41)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/home/vvm/next-template/node_modules/@vkontakte/vkui/dist/hoc/withInsets.js:14:41)
Результат VKWebAppShowWallPostBox иногда возвращает строку вместо числа.
Помимо того, что это хотелось бы исправить, нужно временно добавить типизацию для ошибочного ответа
https://github.com/VKCOM/vk-connect/blob/2cf4f3283acef956b3d8ff8b2d2a2bef9ccdbfc5/src/index.ts#L221
В этой строке используется метод Array.includes, судя по всему он остается в таком же виде в js-коде. Из-за чего получаем ошибку на старых андроидах.
События VKWebAppEnableSwipeBack/VKWebAppDisableSwipeBack нигде нормально не задокументированы и упомянаются только в примере кода https://vkcom.github.io/vkui-styleguide/#view
В продолжение тикета: VKCOM/VKUI#229
Возможно есть что то подобное для Android.
При вызове метода photos.saveWallPhoto с 1-2 фотографиями - всё в порядке. Но при вызове с 3-6 фотографиями с большой долей вероятности происходит ошибка POST запроса, которую никак нельзя поймать и отработать - ни кетчем у промиса, ни общим try/catch.
Нужно разрезолвить промисс на стороне библиотеки в случае ошибки соединения.
Скрин ошибки в консоли:
Пример вызова:
connect.send("VKWebAppCallAPIMethod", {
"method": "photos.saveWallPhoto",
"params": {
"photo": data.photo,
"server": data.server,
"hash": data.hash,
"group_id": group_id,
"v":"5.103",
"access_token":token
}
});
Предлагаю добавить третий параметр в send являющийся своего рода набором опций выполнения запроса. Изначально, проблема была в том, что при выполнении запроса некоторые из них могли выполняться долго, а какие-то из них, судя по всему, вообще бесконечно (возникали и такие случаи). Выполнение бесконечное, предположительно, из-за того что пропадает интернет, либо это баг определенных операционных систем. Вообще, выглядело так, будто через postMessage ответ от нативного приложения не приходил.
На текущем проекте нашлись тестировщики, которые этот кейс воспроизвели и приходится каждый запрос через бридж оборачивать враппером, который выполнял бы запрос с таймаутом. То есть вообще хотелось бы чтобы send был функцией вроде (method: string, params: {...}, options: { timeout?: number; }).
Если фича имеет место быть, могу кинуть PR.
По поводу того, что бесконечно выполняется запрос напишу отдельный репорт.
На данный момент внутри приложения нет возможности узнать корректный текущий статус подписки на уведомления пользователя. При запуске приложения статус подписки можно читать из параметров запуска - areNotificationsEnabled. Тем не менее при изменении этого параметра приложение никогда не узнает о том, что статус подписки изменился.
Было бы круто, если при его изменении, bridge слал уведомление, типа VKWebAppNotificationsStatusChanged
Нет возможности узнать, успешно прошла инициализация или нет. Это нужно для того, чтобы, например, не пытаться стучаться в API когда приложение открыто из Android приложения VK (в этом случае оно открывается просто в окне браузера).
Если вызываешь
vkConnect.send('VKWebAppInit', {})то в ответ не приходит никакое событие.
Если вызываеть через sendPromise, то, соответсвенно, промис повисает в состоянии pending.
По документации status должен быть cancel/success/fail https://vk.com/dev/vk_bridge_methods?f=3.1%20VKWebAppShowOrderBox
В types описан так же, как и в документации:
По факту приходит 'charged':
Приходится обрабатывать таким образом:
const result = await this._bridge.send("VKWebAppShowOrderBox", {type: "item", item: orderId)});
const success = <any>result.status === "charged";
При вызове события VKWebAppGetAuthToken есть три основных сценария развития событий
В третьем сценарии отсутствие триггеринга события об открытии модалки - это проблема.
Опишу юзер кейс:
Важный факт: Приложение имеет настроенную автовысоту (окно приложение подстраивается под высоту содержания в приложении, чтобы не было скролла).
Чтобы загрузить изображение через приложение, нужен токен пользователя. Мы стараемся получать разрешения по мере их необходимости. Поэтому запрашиваем токен только при взаимодействии с блоком загрузки изображений. При запросе токена - модальное окно появляется в самом верху документа, а так как приложение имеет автовысоту и форма внутри высотой в несколько экранов - то появившееся в момент взаимодействия модальное окно не видно (только затемнение) и нужно только догадаться проскроллить вверх, чтобы увидеть модалку.
Как решение - можно делать скроллинг вверх при каждом вызове токена, но тогда получается проблема со вторым сценарием. Если разрешения уже даны - то беспричинный скроллинг
вверх будет выглядеть странно.
Пока что будем решать через таймер: если в течении секунды нет события от второго сценария - значит было вызвано модальное окно и нужно скроллить вверх. Но это ужасное решение.
Возможные решения:
В полной версии сайта при вызове метода VKWebAppAddToCommunity отображается некорректный текст:
Пользователь будет в недоумении, зачем это приложению нужен доступ к его сообществам. Хотя на самом деле никакого доступа он не предоставляет. Во всяком случае как я понимаю.
В приложении на смартфонах же отображается корректный и понятный текст:
Надеюсь, что в скором времени такой же текст можно будет наблюдать в полной версии :)
Хотелось бы, чтобы был добавлен метод, который позволяет узнать height окна РОДИТЕЛЯ iframe'а приложения. То есть чтобы VK предал window.innerHeight приложению, так как это значение не совпадает у самого VK и у iframe приложения.
Это пригодилось бы для адаптирования высоты окна приложения через VKWebAppResizeWindow под размер экрана просмотра пользователя. Так как сейчас данную высоту никак не получить и приходится задавать статичное значение высоты iframe.
судя по документации scope не является обзяательным, в iOS и Android запрос на авторизацию проходит без него
в десктопе приходит ошибка, что отсутствует обязательный параметр scope.
Кажется, что нужно либо обновить документацию, либо пофиксить десктоп
Подключаю этот код из vkui-connect, но connect.send всё равно не работает на телефонах.
Где можно посмотреть код готового минимального приложения типа Hello World?
Например, через VKWebAppSetViewSettings.
Правда, есть ограничения, только с Android 5.0 (API 21).
Было бы очень удобно иметь возможность указывать параметры Smooth / TransitionDuration для метода VKWebAppResizeWindow - чтобы изменение высоты окна происходило плавно, а не мгновенно.
Если в приложении есть slideDown\slideUp анимация с плавным раскрытием, то мгновенное изменение высоты приложения выглядит не привлекательно.
Make PUBLISHING.md
В кастомный плагин для VKConnect, написанный на Typescript, попытался импортировать тип VKConnect. Typescript не увидел модуль package.json, а также расширение global.d.ts.
Примеры ошибок:
Добрый день.
Планируется ли добавление поддержки остальных методов работы со стеной?
В частности интересуют методы wall.post, wall.edit и wall.delete. В данный момент они недоступны, так как обычного пользовательского токена (даже с правами wall), похоже, недостаточно для доступа к этим методам, а требуется обязательно токен полученный через standalone app.
Если это ограничение не обусловлено реальной необходимостью, будем очень благодарны, если добавить в Bridge полноценную работу этих методов с обычным пользовательским токеном (или любое альтернативное решение, позволяющее использовать эти методы внутри mini apps).
Для wall.post есть отдельный метод VKWebAppShowWallPostBox - но он подходит только для публикации поста, но к примеру не подходит для одобрения предложенного поста (хотя эта возможность описана в документации метода wall.post, на которую ссылается VKWebAppShowWallPostBox).
UPD: если в VKWebAppShowWallPostBox передать post_id и message - то подтвердить предложенный пост таки можно, но такой в предпросмотре автор такого поста - DELETED.
А вот отклонить пост никак ((
vkBridge.send is not a function
если вывести в консоль объект vkBridge - показывается следующая картина:
-vkBridge
--applyMiddleware: ƒ e()
--default:
---send: ƒ (o,r)
---sendPromise: ƒ (o,r)
---subscribe: ƒ e(e)
---unsubscribe: ƒ (e)
---supports: ƒ (e)
---isWebView: ƒ ()
т.е. функция send и остальные находятся не в корне vkBridge, а в объекте default
При смене темы, пока сервис свернут, не приходит VKWebAppUpdateConfig. Предлагаю после VKWebAppViewRestore присылать VKWebAppUpdateConfig.
Здравствуйте!
Мы придерживаемся рекомендации "запрашивайте разрешения по мере необходимости, а не все сразу и впрок". Но это приводит к обнулению разрешения на оповещения.
Кейс:
При этом VK Bridge не поддерживает возможность получения токена с правами notify (его нет в списке доступных прав для приложений). То есть если добавить на втором шаге в запрос scope:"photos,notify" вместо "photos" - то мы получим ошибку.
Выходит, что сохранить ранее полученное разрешение на оповещения при получении нового токена - технически невозможно, что доставляет неудобства как для администраторов так и для пользователей.
В мобильной версии сайта отправка события:
bridge.send('VKWebAppShare', { link: 'https://vk.com/appXXX#hash' });
Приводит к отправке ссылки https://vk.com/appXXX без хэша.
В клиентах работает корректно.
Добрый день, можно ли получить базовую информацию о сообществе у приложения установленного в сообщество? Я имею в виду аналог метода VKWebAppGetUserInfo
В Direct Games по какой-то причине VK-connect не может подписаться и отправить инит, в мини аппс все работает норм.
Шаги для воспроизведения:
--zeit и деплоите на zeitВ now.json поменяйте version: 1 на version: 2, иначе билдер кинет ошибку
Создаете 2 приложения - Direct Games (встраиваемое приложение) и VK mini apps (встраиваемое приложение)
Добавляете урл приложения в вк мини апп и в директ геймс
Заходите в каждое.
Я уже сделал это за вас, можно посмотреть тут:
Mini App, все работает: https://vk.com/app7288017
Direct Games, вечный лоадинг: https://vk.com/app7287611
Нет значений bright_light и space_gray
Событие VKWebAppShowStoryBox, отправка объекта со стикерами, в которых есть кликабельные зоны с типом action_link.
{
action_type: 'link',
action: {
link: '...',
tooltip_text_key: 'Кастомный текст',
},
clickable_area: [...],
}Но в Истории по факту при нажатии на стикер отображается слово Перейти
vkBridge.send('VKWebAppSetViewSettings', { status_bar_style, action_bar_color });
vkBridge.send('VKWebAppShowWallPostBox', options);
На этом моменте цвет экшн-бара изменился в соответствии с темой ВКонтакте.
Ожидаемы результат: После закрытия бокса, вызванного событием VKWebAppShowWallPostBox, цвет экшн-бара восстанавливается.
В vk-connect-promise присутствовали события VKWebAppDisableSwipeBack и VKWebAppEnableSwipeBack, так как он сейчас Depricated было бы не лишним добавить их в эту библиотеку.
Здравствуйте!
При вызове события VKWebAppGetGeodata приходит available с некорректным типом. На iOS available приходит как Number (1|0), на Android – Boolean (true|false).
Пример запроса
Результат ответа на iOS
Результат ответа на Android
На мобильных устройствах у части пользователей запрос токена приводит к ошибке c пустым кодом и причиной.
{"error_type":"auth_error", "error_data": { "error":"", "error_description":"", "error_reason": "" }}
Уже есть 4 жалобы от разных пользователей. Причём началось это недавно. И условия воспроизведения непонятны - иногда всё-таки срабатывает и возвращает токен у тех, у кого проблемы.
Код вызова:
bridge.send("VKWebAppGetAuthToken", {
"app_id": vkAppId,
"scope": 'photos'
}).then(data => {
console.log(data)
}).catch(data => {
console.error(data)
});
Отчёт от тестера, где пытались выяснить условия (с видео):
https://vk.com/bug212236 (продукт - https://vk.com/bugs?act=product&id=578)
UPD: жалобы есть как от iOS так и от Андроид пользователей. При этом в m.vk.com и на десктопе - у них всё в порядке.
Всё уже сделано, просто обращаю внимание на существующий пул реквест.
PR: #54
В коммите 1a3ea87 заменили в документации connect.sendPromise(method[, params]) на connect.send(method[, params]), но примеры остались с sendPromise.
Запускаю приложение с VKPay в мобильной версии сайта, вызываю окно оплаты VKPay, вызвав bridge.send('VKWebAppOpenPayForm', params). Окно с формой подтверждения VKPay появляется в новом окне. Дальше, если, например, я отменяю платеж, то в окне с приложением я уже не получаю никаких событий и не могу узнать, что там произошло с формой VKPay.
bridge.supports('VKWebAppShowStoryBox') возвращает true в mvk, но при вызове этого метода возвращается ошибка
Здравствуйте!
Если попробовать вызвать любой метод из хука useEffect, событие не отправляется на мост. Но если вызвать событие вручную через window.AndroidBridge.VKWebAppGetUserInfo("{}") (из отладчика), обработчик, созданный из хука сработает. Пока детальным разбором бага не разбирался. Если будет нужно, предоставлю сниппет.
В библиотеке VK Connect отсутствует аналог метода scrollSubscribe из JavaScript SDK.
Это был полезный метод для использования в полной версии ВК. Если делать правильно и растягивать приложение на всю высоту (как сделан например VK Pay), то возникает проблема центрирования блоков по середине экрана пользователя (именно экрана, не страницы) по высоте. А этот метод отлично выручал в данной ситуации.
При вызове события VKWebAppOpenPayForm через sendPromise возвращается разные структуры результата на iOS и Android. На Android результат оборачивается ещё в объект result.
Argument of type '"VKWebAppUpdateConfig"' is not assignable to parameter of type '"VKWebAppInit" | "VKWebAppAddToCommunity" | "VKWebAppAllowMessagesFromGroup" | "VKWebAppAllowNotifications" | "VKWebAppCallAPIMethod" | "VKWebAppCopyText" | "VKWebAppGetAuthToken" | ... 52 more ... | "VKWebAppSubscribeStoryApp"'.
При помощи subscribe мы можем отслеживать события оканчивающиеся только на Result или Failed, но существуют, также, события именованные VKWebAppUpdateConfig и VKWebAppUpdateInsets. Их тоже следует добавить как "кастомные".
Вызов метода send('VKWebAppResizeWindow', {height: 1500}) из приложения, запусщенного из m.vk.com на мобильном браузере возвращает rejected promise с ошибкой:
{"error_type":"client_error","error_data":{"error_code":6,"error_reason":"Unsupported platform"}}
При этом supports('VKWebAppResizeWindow') возвращает true.
Использование VKWebAppDownloadFile не определено в библиотеке, поэтому его использование выдает ошибку Typescript
Класс URLSearchParams отсутствует на стареньких устройствах.
Как пример у нас отвалился пользователь iPad с safari < 10.
Возможно имеет смысл сделать проверку иначе?
Если передавать параметр request_id в событии VKWebAppCallAPIMethod, то возвращаемый Promise не ресолвится. При этом событие выстреливает.
Стоит убрать этот параметр, и все в порядке – возвращаемый из connect.send() промис ресолвится и далее по цепочке передаётся результат.
Версия vk-connect 1.8.7
Собственно, не хватает одного из типов виджета, а именно donation
Hey! I've created devtools for VK Mini Apps and noticed missing typings for method VKWebAppUpdateInsets. Additionally, according to docs there is no definition for method VKWebAppCopyText.
I can create PR on my own if you want me to.
В нативной и мобильной браузерной версиях приложения UpdateConfigData имеет разный интерфейс. Отследил событие VKWebAppUpdateConfig через subscribe.
Нативная версия:
mvk:
Необходимо написать второй вариант тайпингов для мобильной браузерной версии.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.