Best practices for Teams mobile apps

Mobile devices have limited processing power, network connectivity, and battery compared to desktops and laptops. If you want to increase the adoption of your Teams tab app on mobile devices, you must ensure a fast and responsive web experience on the Teams Android and iOS clients. This article outlines the best practices to optimize your Teams tab's webpages for the Teams mobile client.

Use service workers to cache static assets

• Cache static assets such as HTML, CSS, JavaScript, and images to reduce network dependency.
• Use the stale-while-revalidate strategy to serve cached content quickly while fetching updated data in the background. You can also use this strategy to cache API responses that don't change frequently, such as configuration data.
• Avoid caching large assets to prevent unnecessary storage consumption on mobile devices.

Sample app

Check out this sample app that makes use of a service worker to cache data and provide offline functionality.

Minimize webpage size

In areas with weak signal strength, mobile data network can be slow and unstable, resulting in high latency. Hence, reducing the overall app package size and optimizing data transfers is critical. To reduce the page size, gather key performance metrics by running a performance audit using the Performance tab in dev tools. The performance audit helps identify bottlenecks and areas for improvement in your app.

Performance audit

To run a performance audit, follow these steps:

1. Enable dev tools.

2. Open dev tools and select inspect under your app. A new window opens.

3. Select the Performance tab. You can see a performance marker indicating the time it takes for your app from Teams JavaScript SDK initialization to the notifySuccess call. You can use this marker to examine the network or local operations performed between init() and notifySuccess.

   In the following example, the Timings section shows that the app takes 2.20 seconds from Teams JavaScript SDK initialization to notifySuccess, makes two calls to get an authorization token, and makes a third API call that takes 1.5 seconds.

   

4. Select the Lighthouse tab. This tab provides insights into the app size and performance metrics.

   1. Under Device, ensure that you select Mobile.

   2. Select Analyze page load.

      

      The report shows various diagnostics for your app's webpage and a set of actionable insights to decrease page load. Ensure that you take the required steps to reduce the latencies flagged in this report.

5. Select the Coverage tab. Your webpage might contain unused resources that don't provide any value to the functionality of the app. This tab allows you to see actual size and usage percentage of the resources on the webpage.

   1. If you can't find it in the home page of dev tools, go to More tools > Coverage.

      

   2. You can use the report to remove unused code or resources.

      

See also

• Build tabs for Teams
• Create a tab