search

Ajaxy / telegram-tt

Telegram Web A, GPL v3
https://web.telegram.org/a
GNU General Public License v3.0
2.2k stars 463 forks source link

[Mini Apps] Correct Mini App reload #282

Closed heyqbnk closed 9 months ago

heyqbnk commented 9 months ago

Problem description

Currently, it seems like clicking the Reload Page button not really refreshes appended Mini App iframe, but removes it and inserts it again. This makes call of window.performance.getEntriesByType('navigation') work incorrectly containing the item with invalid type navigate, but reload was expected.

Motivation to fix

I also would like to explain why this bug should be fixed.

Some time ago I released an update in some of the public packages used by community. The main idea of this update was to save Telegram Mini Apps components (BackButton, MainButton, etc.) between page refreshes. The update works as expected in mobile and desktop versions of Telegram, but not in the Web version (both A and K). The reason is sessionStorage data (where we save all states and Telegram SDK does too) is not being dropped as long as user is not leaving the browser tab. So, to make sure both my and Telegram packages work fine, we should solve this problem.

Possible solution

To solve this problem we would like to know if current code is executing due to iframe reload or its initial start. As I understand, we should call reload method on iframe, but not to remove it and insert again. At least, such type of behavior would be expected.

zubiden commented 9 months ago

The question is, how do you reload a cross-origin iframe? Regular location.reload() can't be called in that case

image

That's why web clients reset the src attribute (https://github.com/Ajaxy/telegram-tt/blob/master/src/components/modals/webApp/hooks/useWebAppFrame.ts#L62) or replace iframe (https://github.com/morethanwords/tweb/blob/c5624168791f4cf2dae2fbb95db9fc2819317434/src/components/popups/webApp.ts#L106)

One way to fix this may be adding an event, that triggers reload from the web app side. Then, the mini app could handle reloading like a regular page.

heyqbnk commented 9 months ago

Yeah, it looks like a problem for us.

Nevertheless, I probably found a solution for reload detection problem. I am not sure, but I could differ one launch from another just looking at init data. In case, current script launch contains the same init data as in the session storage, it means, current iframe was reloaded. Otherwise, its fresh launch.

heyqbnk commented 9 months ago

@zubiden I have just found out, that this is not going to work in case, application was launched via KeyboardButton as there is no guarantee, current launch params will contain init data.

Could we atleast append launch timestamp in application launch parameters? We could then differ one launch from another by this parameter. As I have just checked, when user presses the Reload Page button, Telegram app drops window location to the initial one, which is bad. But I assume, this behavior has the same nature as we discussed before.

I could create a separate issue to address the launch timestamp idea

zubiden commented 8 months ago

Sorry, this issue got out of my sight, as it is closed. Could you consider opening an issue in the Web K repository, to get feedback from another web client? If they approve it, feel free to open a separate issue here with more details (e.g. should timestamp always be appended, or only when there is no init data)