⚠️ Please, avoid using vanilla JavaScript if possible on Telegram Mini Apps platform. It is better to use ES modules at least. Learn more.
Vanilla JavaScript SDK usage example.
This example is already deployed and can be viewed right in Telegram, just follow the link.
Install dependencies:
pnpm iServe index.html:
pnpm run serveRun tunnel to locally launched HTTP server:
pnpm run tunneltunnel command will return a URL which has to be used by @BotFather. Bind
it to your Mini App and open the application.
Some of the packages use other @tma.js packages as dependencies. In this case there are 2
ways of importing them:
- By inserting another
scripttag which loads the dependency. This way makes usage of package with a lot of dependencies almost unreal. - By inlining these packages. This way leads to code duplication between several packages using the same package as dependency.
As you can see, there is no optimal solution between both of them. As the additional problem
developer gets here, is bundler is unable to
use tree shaking,
making browser to load the code not used in the application. Imagine using the only 1 function from
some library like lodash, but fully load it.
The other problem developer can face is IIFE packages are built for the specific browser of specific version. So, the package author does not know which target he should choose as long as he doesn't know it when creating such package. That's why the the package target should be lowered to support most part of browsers, but this also make final bunlde bigger.
Unfortunately, developer is unable to avoid these problems when using IIFE format. This is the reason why it is recommended to use modern technologies along with ESM format.
First of all, it is required to load the package. Developer could use JSDelivr to do it:
<head>
<script src="https://cdn.jsdelivr.net/npm/@tma.js/sdk"></script>
</head>Loaded packages of @tma.js in IIFE format are accessible by path window.tmajs.*:
<head>
<script src="https://cdn.jsdelivr.net/npm/@tma.js/sdk"></script>
</head>
<body>
<script>
var sdk = window.tmajs.sdk;
console.log(sdk.retrieveLaunchData());
</script>
</body>
⚠️ In this example we did not specify the exact version of required package. In this case, JSDelivr CDN will return the latest version of the package which in some cases may lead to unexpected behavior. To prevent such case, specify the exact version.