VK Mini Apps — Getting Started
    1. App Registration
    2. Quick Start
    3. VK UI Package
    4. VK Connect
  4.1 VK Connect Package
  4.2 VK Connect Promise
        4.3 VK Connect Errors Handling
    5. Notifications Sending
    6. Launch Parameters

VK Bridge Events
    1. VK Bridge Initializing
    2. Obtaining Profile Data
    3. Obtaining Phone Number
    4. Obtaining E-Mail
    5. Obtaining Location
    6. User Authorization
    7. API Methods Calling
    8. Share Dialog
    9. Publication on Wall
    10. Obtaining Client Version
    11. VK Pay Payment
    12. Enabling Notifications
    13. Disabling Notifications
    14. Hash Setting
    15. Community Messages Subscribing
    16. Community Joining
    17. QR Scanning
    18. App Opening
    19. Changing Client External Appearance
    20. App Window Scrolling
    21. Changing App Window Size

VK Mini Apps is VK platform for mobile services. It allows to create apps looking excellent and working quickly.

VK Mini Apps Starter Set includes 3 React packages:

• https://www.npmjs.com/package/@vkontakte/vkui — VK UI, interface components;
• https://www.npmjs.com/package/@vkontakte/icons — VK Icons, SVG icons for any case;
• https://www.npmjs.com/package/@vkontakte/vk-bridge — VK Bridge, package for communicating with VK official client.

If you have never used React before, we recommend to start with this manual.

Create an app: https://vk.com/apps?act=manage.

Choose "Embedded application", type "VK App", set the title and submit your action.

You will need "Application ID" field value in a further work (API_ID, app_id or client_id in the documentation).

Use this command to create VK Mini Apps template:

npx @vkontakte/create-vk-app <folder name>

It has everything you need to start working on your first application. VK UI, VK Connect and VK Icons packages are connected and prepared for using.

With VK UI one can create attractive mobile service interface.

Manual: https://vkcom.github.io/vkui-styleguide/
NPM: https://www.npmjs.com/package/@vkontakte/vkui

Create new application:

npx create-react-app my-app

Install VK UI:

npm install @vkontakte/vkui || yarn add @vkontakte/vkui

Run your application:

npm start

You can work with VK UI components now.

Note that most of the screen space is available for your application. For the correct navigation you need:

• use PanelHeader component on each scrren of your app. It should contain app title and "Back" icon on screens where it is needed.
• don't occupy right upper corner of PanelHeader. This area is reserved for the native bar with "Menu" and "Close" buttons which is shown all the time.
• use platform-depending "Back" icon. VK Icons package components should be used:
  • Android — Icon24Back (@vkontakte/icons/dist/24/back);
  • iOS — Icon28ChevronBack (@vkontakte/icons/dist/28/chevron_back).
    
    

On the Android devices "Back" button tap triggers history.back event in webview (see documentation). By the tap on this button official client returns on previous page of your app or closes it if it's impossible to return.

For the correct workflow of your app use following viewport attributes:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">

Ïîäðîáíåå î viewport.

Full list of VK Connect events can be found here.
If you have not worked with VK API before, we recommend to read this manual firstly.
VK Connect is a package for sending and receiving events in your application. Vk Connect allows to use VK API and user device's APIs.

NPM: https://www.npmjs.com/package/@vkontakte/vkui-connect

Install the package:

npm install @vkontakte/vkui-connect || yarn add @vkontakte/vkui-connect

Initialize VK Connect in index.js:

import * as connect from '@vkontakte/vkui-connect';

Then you work with connect object methods:

// send event to official client
connect.send("VKWebAppInit", {});
 // subscribe for events from official client
connect.subscribe((e) => console.log(e));
// check event's availability

Full list of VK Connect events can be found here.
VK Connect Promise is a package for sending and receiving events on promises in your application. Vk Connect Promise allows to use VK API and user device's APIs.

NPM: https://www.npmjs.com/package/@vkontakte/vkui-connect-promise

Install the package:

npm install @vkontakte/vkui-connect-promise || yarn add @vkontakte/vkui-connect-promise

Initialize VK Connect in index.js:

import * as connect from '@vkontakte/vkui-connect-promise';

Then you work with connect object methods:

// send event to official client
connect.send('VKWebAppInit', {})
  .then(data => handleResponse(data))
  .catch(error => handleError(error));

Errors can be returned while you are working with VK Connect. data object will contain two fields:

{
  "type": "EventNameFailed",
  "data": {
    "error_type": String
    "error_data": {}
  }
}

data object structure

error_type string	error type. Possible values: client_error — client errors; api_error — API errors; auth_error — authorization errors.
error_data object	additional data, depends on error_type. See description below.

These are errors caused by incorrect syntax in VK Connect events.

error_data object structure

error_code integer	error code. See possible values list in the table below.
error_reason string	error description.
error_description string	detailed description (optional).

Error codes for error_type = "client_error"

error_code	error_reason
1	Unknown error
2	Missing required params
3	Connection lost
4	User denied
5	Invalid params

These are errors listed on this page or in the API method's description.

error_data object structrure

error_code integer	error code.
error_msg string	error description.
request_params array	API call params.

These are errors to be returned while proceeding authorization.

error_data object structure

error integer	error code.
error_reason string	error description.
error_description array	detailed description (optional).

VK Mini Apps can send notifications about any events. User will receive push and in-app notification.

Use notifications.sendMessage method with service access_token to send notifications.

Note that you cannot send more than 2 notifications per hour (10 per day). Your app should be installed by user.

Before sending you should check if it is available. Use apps.isNotificationsAllowed method with a service access token.

To enable or disable notifications from the app use VK Connect events VKWebAppAllowNotifications and VKWebAppDenyNotifications. A user can manage notifications from the settings in official app so it's crucial to check availability even if the user didn't disable notifications from you app directly.

Next