[Doc Improvement][Best practices for mobile tabs][4347376]

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

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

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)

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|

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.
 <br>
+&nbsp;
+</details>
+<details>
+<summary>How do I optimize my tab webpages to perform better on mobile devices?</summary>
+
+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).
+<br>
+&nbsp;
 </details>
 </details>
 

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).