Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vkontakte/vk-bridge

Package Overview
Dependencies
Maintainers
5
Versions
81
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vkontakte/vk-bridge

Connects a Mini App with VK client

  • 2.2.3
  • Source
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

VK Bridge NPM

A package for integrating VK Mini Apps with official VK clients for iOS, Android and Web.

Usage

import bridge from '@vkontakte/vk-bridge';

// Sends event to client
bridge.send('VKWebAppInit');

// Subscribes to event, sended by client
bridge.subscribe(e => console.log(e));

For use in a browser, include the file dist/browser.min.js and use as follows

<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>

<script>
  // Sends event to client
  vkBridge.send('VKWebAppInit');
</script>

API Reference

bridge.send(method[, params])

Sends a message to native client and returns the Promise object with response data

Parameters

  • method required The VK Bridge method
  • params optional Message data object

Example

// Sending event to client
bridge
  .send('VKWebAppGetEmail')
  .then(data => {
    // Handling received data
    console.log(data.email);
  })
  .catch(error => {
    // Handling an error
  });

You can also use imperative way

try {
  const data = await bridge.send('VKWebAppGetEmail');

  // Handling received data
  console.log(data.email);
} catch (error) {
  // Handling an error
}

bridge.subscribe(fn)

Subscribes a function to events listening

Parameters

  • fn required Function to be subscribed to events

Example

// Subscribing to receiving events
bridge.subscribe(event => {
  if (!event.detail) {
    return;
  }

  const { type, data } = event.detail;

  if (type === 'VKWebAppOpenCodeReaderResult') {
    // Reading result of the Code Reader
    console.log(data.code_data);
  }

  if (type === 'VKWebAppOpenCodeReaderFailed') {
    // Catching the error
    console.log(data.error_type, data.error_data);
  }
});

// Sending method
bridge.send('VKWebAppOpenCodeReader', {});

bridge.unsubscribe(fn)

Unsubscribes a function from events listening

Parameters

  • fn required Event subscribed function

Example

const fn = event => {
  // ...
};

// Subscribing
bridge.subscribe(fn);

// Unsubscribing
bridge.unsubscribe(fn);

bridge.supports(method)

Checks if an event is available on the current device

Parameters

  • method required The VK Bridge method

bridge.isWebView()

Returns true if VK Bridge is running in mobile app, or false if not

Middleware API

Middlewares are pieces of code that intercept and process data between sending and receiving. Thus, by creating middlewares, you can easily log data, modify data before sending it, talking to an asynchronous API, etc. If you've used Redux, you were also probably already familiar with the concept—a similar is used here.

applyMiddleware(middleware1, ..., middlewareN)

Creates the VK Bridge enhancer that applies middleware to the send method. This is handy for a variety of task such as logging every sent event. Returns the VK Bridge enhancer applying the middleware.

Parameters

  • middlewareN A middleware to be applied

Example

import bridge, { applyMiddleware } from '@vkontakte/vk-bridge';

// Logs the result of each sent event
const logger = ({ send, subscribe }) => next => async (method, props) => {
  const result = await next(method, props);
  console.log(result);
  return result;
};

const enhancedBridge = applyMiddleware(logger)(bridge);

FAQs

Package last updated on 06 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc