Teams desktop client sometimes caches my tab application and I can't clear it

Question

I've built a Microsoft Teams channel tab with SSO and I'm hosting the tab application which I've built with React via create-react-app.

The auth works well, and the app loads and runs.

But when I update my app on the web site, the Teams desktop client (Mac and PC) will sometimes cache the old app and will not pick up the changes. But then sometimes it will.

If I run the web client, it usually picks up the changes.

I've verified that I'm serving up new bundles with different names each time I update. But running the Teams desktop devtools I can see that Teams is asking for the old bundle, every time, so it's definitely caching the response from my app's URL.

I've read about the problems people have with the Teams desktop client has with caching Sharepoint content and not picking up content changes. I've tried the cache clearing techniques but they don't seem to work for this issue. And I can't reasonably have users do crazy cache clearing every time I make an update to the tab app.

What should I do? Some have suggested I need to update my version in the app manifest and redeploy to Teams -- that seems really brutal. Do I need to set some cache headers in a certain way to force the Teams client to pick up the new code?

Answer 1

Solution

Set a Cache-Control response header to no-cache (or must-revalidate) for your build/index.html.

Explanation

We had the exact same issue. Turns out it was because we cached our build/index.html.

According to the create-react-app doc, only the content of build/static/ can safely be cached, meaning build/index.html shouldn't be cached.

Why? Because files in build/static/ have a uniquely hashed name and are therefore cache busted on deployment. index.html is not.

What's happening is since Teams uses your old index.html, it tries to load the old /static/js/main.[hash].js defined in it, instead of your new JS bundle.

It works properly in the Teams web client because most browsers send a Cache-Control: max-age=0 request header when requesting your index.html, ignoring any cache set for the file. Teams desktop doesn't as of today.