[Feature]: Telegram 8.0 support

[imaai]

Is your feature request related to a problem? Please describe.

No response

Describe the solution you'd like

Yesterday telegram 8.0 has been released with a bunch of changes for WebApps. Would be nice to extend sdk with new classes, methods and events.

https://core.telegram.org/bots/webapps#november-17-2024

Describe alternatives you've considered

No response

Additional context

No response

[4matic]

This is really needed. Full Screen mode already implemented in #555

[Malith-Rukshan]

Waiting for requestEmojiStatusAccess method.

[heyqbnk]

Fullscreen implemented in v2.7.0. Docs

[xbank-xiexueni]

how about "addToHomeScreen"?

[lebedev42]

Would be nice to add listener on Mini App close

[heyqbnk]

Safe area insets and content safe area insets implemented in v2.8.0. Docs

[heyqbnk]

Emoji status-related functionality implemented in v2.9.0. Docs

Add to home screen and Mini App activation functionality is on the way

[imaai]

@heyqbnk could we get shareMessage and related events?

---

[nixoid]

LocationManager would be nice to have too

[heyqbnk]

Active and inactive states implemented in v2.10.0. Docs

Working at the add to home screen feature

[heyqbnk]

Add to home screen functionality implemented in v2.11.0. Docs

Working at location manager

[aliml92]

Add to home screen functionality implemented in v2.11.0. Docs

Working at location manager

Will location manager be added to the next release?

[heyqbnk]

Add to home screen functionality implemented in v2.11.0. Docs

Working at location manager

Will location manager be added to the next release?

Yes it will. Sorry, was at my vacation

[Selithrarion]

yea waiting for shareMessage and lockOrientation, thanks!

[ozodjonasadullaev]

Are there any news on shareMessage and lockOrientation feateures?
Please give some updates (release dates or something)?

[heyqbnk]

While the development is in progress, you can use the share message and orientation lock features via postEvent:

import { postEvent } from '@telegram-apps/sdk';

postEvent('web_app_send_prepared_message', { id: 'message id' });
postEvent('web_app_toggle_orientation_lock', { locked: true });

[kimdanielarthur-cowlabs]

Thanks for a great library!

with latest 3.0.2 trying to trigger the web_app_toggle_orientation_lock causes MethodUnsupportedError: Method "web_app_toggle_orientation_lock" is unsupported in Mini Apps version 8.0 whereas in version 2.x it worked. Is there some extra strict checking of the events allowed in postEvent now maybe?

[heyqbnk]

Thanks for a great library!

with latest 3.0.2 trying to trigger the web_app_toggle_orientation_lock causes MethodUnsupportedError: Method "web_app_toggle_orientation_lock" is unsupported in Mini Apps version 8.0 whereas in version 2.x it worked. Is there some extra strict checking of the events allowed in postEvent now maybe?

By default, when calling the init function (which calls the configure function, setting all global package dependencies), the SDK configures the package's postEvent function making it work in strict mode, so all unknown methods will be rejected.

To prevent such a behavior you can specify the postEvent function yourself:

import { postEvent } from '@telegram-apps/bridge';
import { init } from '@telegram-apps/sdk;

init({ postEvent });

This will make the SDK use a standard, non-protected version of postEvent.

You can also mix a strict and non-strict versions to allow only specific methods, but apply checks for others. It should be something like that:

import { postEvent, createPostEvent } from '@telegram-apps/bridge';
import { init, retrieveLaunchParams } from '@telegram-apps/sdk';

const launchParams = retrieveLaunchParams();
const postEventStrict = createPostEvent(launchParams.tgWebAppVersion);
init({
  launchParams,
  postEvent(...args) {
    if (args[0] === 'web_app_toggle_orientation_lock') {
      return postEvent(...args);
    }
    return postEventStrict(...args);
  },
});

[kimdanielarthur-cowlabs]

Ah fantastic thanks! Did not see that bridge postEvent option before

[heyqbnk]

All v8 methods and events have been added to @telegram-apps/bridge. Note that it doesn't mean that something appeared in @telegram-apps/sdk.

It means that now you:

1. Can learn more about these methods and events in Events and Methods documentation sections.
2. Have proper typings when using postEvent and on.
3. Have a valid result when calling supports with new Mini Apps methods.
4. Have more appropriate createPostEvent workflow. It should now properly check allowance of the web_app_toggle_orientation_lock method, for example (сс @kimdanielarthur-cowlabs)

[kimdanielarthur-cowlabs]

2. Have proper typings when using postEvent and on.

✅ typing for web_app_toggle_orientation_lock is OK
✅ typing for web_app_request_fullscreen is OK

4. Have more appropriate createPostEvent workflow. It should now properly check allowance of the web_app_toggle_orientation_lock method, for example (сс @kimdanielarthur-cowlabs)

✅ I imported postEvent from @telegram-apps/bridge and was able to send the web_app_toggle_orientation_lock event OK without warning.
✅ Overriding postEvent in init through createPostEvent also works.

[heyqbnk]

shareMessage and location manager were implemented in @telegram-apps/[email protected]

[EvgeniyBudaev]

The location is not requested from the user.

In the mobile version I get:

locationChecked: {
  available: true,
  access_requested: false
}
locationData: undefined

In the desktop version I get:

locationChecked: undefined
locationData: undefined

How to correctly request permission to share a user's geolocation and receive data?

import { request } from '@telegram-apps/bridge';
import { useEffect, useState } from "react";

export const useTelegram = () => {
  const [locationData, setLocationData] = useState();
  const [locationChecked, setLocationChecked] = useState();

  useEffect(() => {
    const fetchLocation = async () => {
      const locationChecked = await request('web_app_check_location', 'location_checked');
      setLocationChecked(locationChecked);
      if (!locationChecked.available || !locationChecked.access_granted) {
        return;
      }
      const location = await request('web_app_request_location', 'location_requested');
      setLocationData(location);
    }
    fetchLocation();
  });
  
  return { locationData, locationChecked };
}