SOLVED

Pop out sideloaded app takes long time to load

Copper Contributor

I have a sideloaded app that load pretty quick (less than 2 seconds) in new Teams.

But when i chose to pop out, open in new window, it takes 20-30 seconds to load the same app.

This works very quick in classic Teams.

 

If i switch to the about tab and then pop it out and then back to my app tab it loads quickly.

 

What happens when you pop out the app?

What is taking such a long time?

10 Replies

@ChristopherEdling - When the app is popped out, it goes through the initialization process again. This process involves loading dependencies, fetching data, and setting up the app's UI. If the app's initialization process is complex or time-consuming, it can contribute to the delay. 

 

We are mainly responsible for Microsoft Teams app development related issues. 

For Microsoft Teams product issues/failures your tenant Admin can reach out to Microsoft 365 Product Support. 

For general questions about Microsoft Teams please post your question on Microsoft Teams Community. 

 

 

Thanks, 

Prasad Das

Thanks for your reply.

The app (that I have developed) loads quick when opened in Teams or if i open the about tab and the pops out and switches back to the app tab in the popped out window.
So this must be some problem with Teams.

I will reach out to the other forums and see if I can get an answer there.
I created a new minimal manifest file that loads another simple website and I still get the same behavior with very long loading times.
I still have not solved this. Can I get any help on this?

@ChristopherEdling - As we are unable to repro this issue at our end, could you please share any deployed app, so that we can test at our end and raise bug for this?

@Prasad_Das-MSFT 

I have a small test manifest you can use. All it does is loading a Swedish newspaper (dn.se) in the app.

It loads quick in Teams but if you click the "..." and then "Open app in new window" it opens a new window and it takes long time to load.

@ChristopherEdling - Thanks for sharing the manifest. It was super helpful. We are able to repro this issue. We have raised a bug for the same. We will inform you once we get any further update from engineering team.

 

Thanks!

best response confirmed by ChristopherEdling (Copper Contributor)
Solution

@ChristopherEdling , we got update from engineering team stating that, this is happening because the app never initializes the App SDK (i.e. teams-js). While Teams apps are built on the same web technologies as standard web sites, there are some requirements that they need to meet as documented here:
https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements

This is one of the prerequisites which this app has not implemented:
Within your content page, add a reference to Microsoft Teams JavaScript client library using script tags. After your page loads, make a call to app.initialize(), or else your page isn't displayed.
 
Just wrapping an existing website in an app manifest does not produce a well-functioning Teams Apps. You need to do some additional work to make your websites integrate well with Teams.
 
 

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate. 

Thanks for the quick feesdback.
I will review our app and see if I can fix this and get back to you about the result.

Thanks,
Christopher Edling
Hi again
I have made some changes to our app and made sure app.initialize() is called in a different place and it seem like the app is functioning better.
I went form about 25 seconds loading time to 1! 🙂

Thanks for the help,
Christopher Edling
1 best response

Accepted Solutions
best response confirmed by ChristopherEdling (Copper Contributor)
Solution

@ChristopherEdling , we got update from engineering team stating that, this is happening because the app never initializes the App SDK (i.e. teams-js). While Teams apps are built on the same web technologies as standard web sites, there are some requirements that they need to meet as documented here:
https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements

This is one of the prerequisites which this app has not implemented:
Within your content page, add a reference to Microsoft Teams JavaScript client library using script tags. After your page loads, make a call to app.initialize(), or else your page isn't displayed.
 
Just wrapping an existing website in an app manifest does not produce a well-functioning Teams Apps. You need to do some additional work to make your websites integrate well with Teams.
 
 

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate. 

View solution in original post