3

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?

Glenn Scott
  • 405
  • 4
  • 13

2 Answers2

2

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.

Alex Nault
  • 613
  • 7
  • 23
1

This seems like an issue with the way your app is managing the default browser caching logic. Are service workers enabled for your app? What cache control headers is your web server returning?

There are some great articles that describe all the cache controls available to you; for example: https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c

Have you tried doing something like this to prevent caching of your page (do note that long term you might want to use something like ETags which is a more performant option): https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#preventing_caching

P.S. You can also follow the instructions here to open the dev tools in the Desktop Client to debug all this: (How) can I open the dev tools in the Microsoft Teams desktop client?

And even force clear any cached data/resources for your app: enter image description here

Yuri Dogandjiev
  • 178
  • 1
  • 8
  • The context here is Microsoft Teams Apps - in which you build a html app that is wrapped inside Teams through an app manifest. In Teams desktop app you don't control any caching policy yourself – atlmag Jan 21 '22 at 10:50
  • 1
    The Teams Desktop App is built on top of Electron which in turn is built on top of Chromium, which is the same browser engine powering Chrome and Edge. The same cache controls that work for websites in one of these browsers should also work for your page when it’s hosted inside of the Teams Desktop App. If you are seeing something different then please share a minimal repro app demonstrating the issues you’re seeing. – Yuri Dogandjiev Jan 22 '22 at 17:13
  • It is indeed Electron, I just remember Microsoft writing about it - sounding like they controlled the cache. Now I can't find any documentation about Teams apps and cache, so it could be you are right and I have just dreamt something. – atlmag Jan 23 '22 at 21:13