docs(guides): actualize sticky-app code

Telegram-Mini-Apps · Jun 10, 2024 · 2595aea · 2595aea
1 parent 277e4d0
commit 2595aea
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/apps/docs/platform/sticky-app.md b/apps/docs/platform/sticky-app.md
@@ -36,12 +36,12 @@ Here is the HTML and CSS you can use:
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>My Mini App</title>
   <style>
-    body {
+    .mobile-body {
       overflow: hidden;
       height: 100vh;
     }
 
-    .wrap {
+    .mobile-wrap {
       position: absolute;
       left: 0;
       top: 0;
@@ -52,18 +52,37 @@ Here is the HTML and CSS you can use:
       background: red;
     }
 
-    .content {
+    .mobile-content {
       height: calc(100% + 1px);
       background: green;
     }
   </style>
 </head>
 <body>
-  <div class="wrap">
-    <div class="content">
+  <div id="wrap">
+    <div id="content">
       My application goes here.
     </div>
   </div>
+  <script src="https://unpkg.com/@tma.js/[email protected]/dist/index.iife.js"></script>
+  <script>
+    (function() {
+      var { retrieveLaunchParams, postEvent } = window.tmajs.sdk;
+      var lp = retrieveLaunchParams();
+
+      // Some versions of Telegram don't need the classes above.
+      if (['macos', 'tdesktop', 'weba', 'web', 'webk'].includes(lp.platform)) {
+        return;
+      }
+
+      // Expand the application.
+      postEvent('web_app_expand');
+
+      document.body.classList.add('mobile-body');
+      document.getElementById('wrap').classList.add('mobile-wrap');
+      document.getElementById('content').classList.add('mobile-content');
+    })();
+  </script>
 </body>
 </html>
 ```
@@ -72,4 +91,4 @@ Using this HTML and CSS will prevent most accidental swipe-down closures. While
 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)
+[Open in Telegram](https://t.me/tmajsbot/sticky_app) ([Source code](https://github.com/Telegram-Mini-Apps/sticky-app/blob/master/dist/index.html))