From 277e4d0fde2664c3b339313b5805467a232baf98 Mon Sep 17 00:00:00 2001 From: Vladislav Kibenko Date: Mon, 10 Jun 2024 12:25:17 +0300 Subject: [PATCH] docs(guides): add Sticky App guide --- apps/docs/.vitepress/platform.ts | 3 +- apps/docs/platform/sticky-app.md | 75 ++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 apps/docs/platform/sticky-app.md diff --git a/apps/docs/.vitepress/platform.ts b/apps/docs/.vitepress/platform.ts index e6cbacd37..43a321263 100644 --- a/apps/docs/.vitepress/platform.ts +++ b/apps/docs/.vitepress/platform.ts @@ -41,9 +41,10 @@ export const platformSidebar = { 'Viewport': 'viewport', }), section('Guides', { + 'Authorizing User': 'authorizing-user', 'Creating New App': 'creating-new-app', 'Getting App Link': 'getting-app-link', - 'Authorizing User': 'authorizing-user', + 'Sticky App': 'sticky-app', }), ], }; \ No newline at end of file diff --git a/apps/docs/platform/sticky-app.md b/apps/docs/platform/sticky-app.md new file mode 100644 index 000000000..757913134 --- /dev/null +++ b/apps/docs/platform/sticky-app.md @@ -0,0 +1,75 @@ +# Sticky App + +Developers often seek ways to make their applications "sticky." In this context, "sticky" refers to +preventing the application from being closed accidentally, such as by a swipe-down gesture. + +Before implementing measures to prevent accidental closure, it's essential to understand why this +behavior exists in the first place. + +Telegram Mini Apps allow developers to manipulate the visibility of the Close button, sometimes +replacing it with a Back button. Because of this, Telegram developers want to ensure users can still +exit an app even if the Close button is not visible. This is why the swipe-down mechanism exists. + +Consider a scenario where the application displays the Back button but becomes unresponsive. In such +cases, rather than closing the entire Telegram app, users can simply swipe down to close the mini +application. Therefore, before you disable this mechanism, ensure that your application does not +become unresponsive and trap users. + +Finally, check if the [closing confirmation](./closing-behavior.md) suits your needs. + +## Making the App Sticky + +To make your app sticky, you can use specific CSS styles that prevent the WebView from passing the +swipe event to the Telegram application. + +Here is the HTML and CSS you can use: + +```html + + + + + + + My Mini App + + + +
+
+ My application goes here. +
+
+ + +``` + +Using this HTML and CSS will prevent most accidental swipe-down closures. While this method covers +most scenarios, there are rare cases where it may not be effective, but these are uncommon in +real-world usage. + +[Open in Telegram](https://t.me/tmajsbot/sticky_app) \ No newline at end of file