diff --git a/msteams-platform/TOC.yml b/msteams-platform/TOC.yml index ceb5cfbdc9b..4f9197aaef6 100644 --- a/msteams-platform/TOC.yml +++ b/msteams-platform/TOC.yml @@ -1174,6 +1174,9 @@ - name: Cookies and local storage href: resources/samesite-cookie-update.md displayName: Cookies, third-party cookies, SameSite, Lax, Strict, None, Secure, SameSite=None, SameSite=Lax, SameSite=Strict + - name: Best practices for Teams mobile app + href: resources/teams-mobile-best-practices.md + displayName: Teams mobile app, best practices, service worker, lighthouse, performance audit - name: Contribute to Teams documentation href: resources/teams-contributor-reference.md - name: Troubleshoot your Microsoft Teams app diff --git a/msteams-platform/assets/images/tabs/coverage-tool-report.png b/msteams-platform/assets/images/tabs/coverage-tool-report.png new file mode 100644 index 00000000000..83120bd399e Binary files /dev/null and b/msteams-platform/assets/images/tabs/coverage-tool-report.png differ diff --git a/msteams-platform/assets/images/tabs/dev-tools-lighthouse.png b/msteams-platform/assets/images/tabs/dev-tools-lighthouse.png new file mode 100644 index 00000000000..a928f284c35 Binary files /dev/null and b/msteams-platform/assets/images/tabs/dev-tools-lighthouse.png differ diff --git a/msteams-platform/assets/images/tabs/dev-tools-performance-full.png b/msteams-platform/assets/images/tabs/dev-tools-performance-full.png new file mode 100644 index 00000000000..27841418d7a Binary files /dev/null and b/msteams-platform/assets/images/tabs/dev-tools-performance-full.png differ diff --git a/msteams-platform/assets/images/tabs/dev-tools-performance.png b/msteams-platform/assets/images/tabs/dev-tools-performance.png new file mode 100644 index 00000000000..fe60a6adf05 Binary files /dev/null and b/msteams-platform/assets/images/tabs/dev-tools-performance.png differ diff --git a/msteams-platform/assets/images/tabs/enable-coverage-tools.png b/msteams-platform/assets/images/tabs/enable-coverage-tools.png new file mode 100644 index 00000000000..8b485176d66 Binary files /dev/null and b/msteams-platform/assets/images/tabs/enable-coverage-tools.png differ diff --git a/msteams-platform/mstdd-landing.yml b/msteams-platform/mstdd-landing.yml index e5f6e0c1d5a..bf9c4220972 100644 --- a/msteams-platform/mstdd-landing.yml +++ b/msteams-platform/mstdd-landing.yml @@ -46,6 +46,8 @@ landingContent: linkLists: - linkListType: whats-new links: + - text: Best practices to optimize tab performance in Teams mobile + url: resources/teams-mobile-best-practices.md - text: Advanced step-by-step guide to build custom engine agent url: sbs-Teams-AI.yml - text: AI label, citations, feedback buttons, and sensitivity labels for bot messages diff --git a/msteams-platform/resources/teams-mobile-best-practices.md b/msteams-platform/resources/teams-mobile-best-practices.md new file mode 100644 index 00000000000..9c1247e62c7 --- /dev/null +++ b/msteams-platform/resources/teams-mobile-best-practices.md @@ -0,0 +1,66 @@ +--- +title: Teams Mobile Apps Best Practices +author: surbhigupta +ms.author: surbhigupta +description: Learn how to optimize your tab app performance on Teams mobile with best practices such as using service workers and performance audits. +ms.localizationpriority: high +ms.topic: conceptual +ms.date: 03/27/2025 +--- + +# 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](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/tab-support-offline/nodejs) 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](../tabs/how-to/developer-tools.md#access-devtools-from-teams-android-client). + +1. Open dev tools and select **inspect** under your app. A new window opens. + +1. 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. + + :::image type="content" source="../assets/images/tabs/dev-tools-performance.png" alt-text="Screenshot shows the performance tab in dev tools." lightbox="../assets/images/tabs/dev-tools-performance-full.png"::: + +1. Select the **Lighthouse** tab. This tab provides insights into the app size and performance metrics. + + 1. Under **Device**, ensure that you select **Mobile**. + + 1. Select **Analyze page load**. + + :::image type="content" source="../assets/images/tabs/dev-tools-lighthouse.png" alt-text="Screenshot shows the lighthouse tab under dev tools." lightbox="../assets/images/tabs/dev-tools-lighthouse.png"::: + + 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. + +1. 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**. + + :::image type="content" source="../assets/images/tabs/enable-coverage-tools.png" alt-text="Screenshot shows how to enable coverage tools in dev tools." lightbox="../assets/images/tabs/enable-coverage-tools.png"::: + + 1. You can use the report to remove unused code or resources. + + :::image type="content" source="../assets/images/tabs/coverage-tool-report.png" alt-text="Screenshot shows the report generated by the coverage tool." lightbox="../assets/images/tabs/coverage-tool-report.png"::: + +## See also + +* [Build tabs for Teams](../tabs/what-are-tabs.md) +* [Create a tab](../tabs/how-to/create-personal-tab.md) diff --git a/msteams-platform/tabs/how-to/create-personal-tab.md b/msteams-platform/tabs/how-to/create-personal-tab.md index 92648aeec21..04961230d4d 100644 --- a/msteams-platform/tabs/how-to/create-personal-tab.md +++ b/msteams-platform/tabs/how-to/create-personal-tab.md @@ -1170,6 +1170,10 @@ Congratulations! You've successfully created a Teams tab with offline functional > [!div class="nextstepaction"] > [I ran into an issue](https://github.com/MicrosoftDocs/msteams-docs/issues/new?template=Doc-Feedback.yaml&title=%5BI+ran+into+an+issue%5D+Build+an+offline+tab&author=%40laujan&pageUrl=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Ftabs%2Fhow-to%2Fcreate-personal-tab%3Fbranch%3Dpr-en-us-12027%26tabs%3Dvs%26pivots%3Dnode-java-script%23build-an-offline-tab&contentSourceUrl=https%3A%2F%2Fgithub.com%2FMicrosoftDocs%2Fmsteams-docs%2Fblob%2Fmain%2Fmsteams-platform%2Ftabs%2Fhow-to%2Fcreate-personal-tab.md%23build-an-offline-tab&documentVersionIndependentId=6d43a761-19e0-541e-ba06-170099411ac1&metadata=*+ID%3A+61f5ca59-ab3e-b7ef-d3bc-55a88a362abf+%0A*+Service%3A+**msteams**) +## Best practices for tabs in Teams mobile + +To learn how to optimize your tab's performance in the Teams Android and iOS clients, see [best practices for Teams mobile](../../resources/teams-mobile-best-practices.md). + ## Code sample | Sample name | Description | .NET |Node.js|Manifest| diff --git a/msteams-platform/teams-faq.md b/msteams-platform/teams-faq.md index 81cabad0cdc..87ebb9bac13 100644 --- a/msteams-platform/teams-faq.md +++ b/msteams-platform/teams-faq.md @@ -1124,6 +1124,14 @@ If you have both configurable tab and static tab defined in your app manifest fo Pre-existing pinned configurable tab instances of your app continue to work the same. You don't have the option to pin new instances of these configurable tabs. When you select to pin your tab, then Teams pins the static tab of your app.
+  + +
+How do I optimize my tab webpages to perform better on mobile devices? + +To optimize your tab app performance on Teams mobile, use service workers to cache static assets and minimize web page size. You can also conduct performance audits using dev tools to identify bottlenecks. For more information, see [best practices for Teams mobile apps](resources/teams-mobile-best-practices.md). +
diff --git a/msteams-platform/whats-new.md b/msteams-platform/whats-new.md index bc26aa34f5b..16313b0d363 100644 --- a/msteams-platform/whats-new.md +++ b/msteams-platform/whats-new.md @@ -33,7 +33,9 @@ Teams platform features that are available to all app developers. **2025 March** -* ***March 07, 2025***: [Introducing app manifest v1.20 with elementRelationshipSet, requirementSet, and intuneInfo properties.](resources/schema/manifest-schema.md) +* ***March 27, 2025***: [Learn about the best practices to optimize tab app performance in Teams Android and iOS clients](resources/teams-mobile-best-practices.md). + +* ***March 07, 2025***: [Introducing app manifest v1.20 with elementRelationshipSet, requirementSet, and intuneInfo properties](resources/schema/manifest-schema.md). * ***March 07, 2025***: [Specify runtime requirements in app manifest to tailor your app's behavior in Microsoft 365 hosts](m365-apps/specify-runtime-requirements.md).