Teams 移动应用的最佳做法

与台式机和笔记本电脑相比，移动设备的处理能力、网络连接和电池有限。 若要在移动设备上提高 Teams 选项卡应用的采用率，必须确保 Teams Android 和 iOS 客户端上的快速响应 Web 体验。 本文概述了优化 Teams 移动客户端的 Teams 选项卡网页的最佳做法。

使用服务辅助角色缓存静态资产

• 缓存静态资产（如 HTML、CSS、JavaScript 和图像），以减少网络依赖关系。
• 在后台提取更新的数据时，使用过时的重新验证策略快速提供缓存内容。 还可以使用此策略来缓存不经常更改的 API 响应，例如配置数据。
• 避免缓存大型资产，以防止移动设备上不必要的存储消耗。

示例应用

查看此示例应用，该 应用 使用服务辅助角色来缓存数据并提供脱机功能。

最小化网页大小

在信号强度较弱的地区，移动数据网络可能速度缓慢且不稳定，从而导致高延迟。 因此，减小整体应用包大小并优化数据传输至关重要。 若要减小页面大小，请使用开发工具中的“性能”选项卡运行性能审核来收集关键 性能 指标。 性能审核有助于识别应用中的瓶颈和需要改进的领域。

性能审核

若要运行性能审核，请执行以下步骤：

1. 启用开发工具。

2. 打开开发工具，然后在应用下选择“ 检查 ”。 此时会打开一个新窗口。

3. 选择“ 性能 ”选项卡。可以看到一个性能标记，指示应用从 Teams JavaScript SDK 初始化到调用所 notifySuccess 花费的时间。 可以使用此标记检查 在 和 notifySuccess之间init()执行的网络或本地作。

   在以下示例中， “计时 ”部分显示，应用从 Teams JavaScript SDK 初始化 notifySuccess到 需要 2.20 秒，进行两次调用以获取授权令牌，并执行第三次 API 调用，该调用需要 1.5 秒。

   

4. 选择“ Lighthouse ”选项卡。此选项卡提供有关应用大小和性能指标的见解。

   1. 在 “设备”下，选择“ 移动”。

   2. 选择 “分析页面加载”。

      

      报表显示应用网页的各种诊断，以及一组可作的见解，以降低页面负载。 执行所需的步骤以减少此报表中标记的延迟。

5. 选择“ 覆盖范围 ”选项卡。你的网页可能包含未使用的资源，这些资源不会为应用的功能提供任何价值。 通过此选项卡，可以查看网页上资源的实际大小和使用情况百分比。

   1. 如果在开发工具的主页中找不到它，请转到 “更多工具>”“覆盖范围”。

      

   2. 使用报表删除未使用的代码或资源。

      

计算应用的性能指标

使用自助服务的轻型 性能报告工具 (或 Perf 工具) 评估移动版 Web 和选项卡应用的效率。 此工具在 Android 和 iOS 上无缝运行，并提供根据行业基准映射的实时性能指标，确保卓越的用户体验。 它还使你能够直接从移动设备在应用中实现特定于 Teams 的最佳做法。

所涉及的步骤包括：

1. 生成性能指标报告
2. 访问性能指标报表
3. 分析性能指标报表

生成性能指标报告

若要使用性能报告工具为移动应用生成 性能指标报表，请执行以下步骤：

1. 在 Teams 移动应用上，转到“关于>开发人员预览的设置”>，并切换开关以启用开发人员预览版。

   

2. 转到 “应用” 部分。

3. 打开要审核的应用，等待其加载。

4. 生成报表

   • 在 Android 应用上：

     1. 选择烤肉串 菜单。

     2. 选择“ 生成性能报告”。

        

   • 在 iOS 应用中，选择标题栏上显示的审核应用性能 图标。

   为 Android 和 iOS 生成报表时，将显示一个临时页面。

5. 生成报表后，请从随 html 性能报告一起显示的底部工作表访问它。

访问性能指标报表

报表使用 JavaScript SDK 和 WebView API 以及特定于 Teams 的性能标记提供见解。

可以从底部工作表上的以下选项访问报表：

• 打开报表：在新浏览器窗口中打开报表。

• 共享报表：打开设备的选项，以便在 Android 上的 Teams 外部共享。 在 iOS 上，此选项将打开设备的共享菜单。

• 在 Teams 中转发：打开设备的共享菜单，以便在 Teams 中共享。 此选项仅在 Android 上可用。

• 下载：将报告下载到设备的本地存储中。

  

分析性能指标报表

性能指标报表包含以下指标。

跃点数	Description	需要系统响应/作
延迟	此指标衡量 Teams 移动应用加载 (大约) 时间。	如果应用使用 notifySuccess()：在本部分中，将计算应用延迟并将其显示在顶部。 时间线随后会在应用加载期间显示每个 API 调用的结束时间。 如果你的应用不使用 notifySuccess()：无法计算延迟。 使用显示的消息中的链接为应用实现 notifySuccess()API。
缓存 (服务辅助角色)	此指标显示 服务辅助角色 是否作为本地缓存机制实现。 服务辅助角色仅在 Android 上可用。	如果实现了服务辅助角色， 则“可用” 显示为绿色，否则 “不可用” 显示为红色。 当服务辅助角色 不可用时，请使用 “了解详细信息” 链接继续实现。
应用包	此指标指示平台应用的 JavaScript 文件包占用的总大小。	理想的包大小最大为 1 MB。 如果包大小超过理想大小，则大小以红色显示。 选择“ 检查捆绑包文件 ”以获取影响捆绑包大小的文件的详细列表。 影响捆绑包大小的文件按文件大小的降序显示。 使用 服务辅助角色 和其他 最佳做法 来优化应用的性能。
内容绘制指标	此指标指示移动应用 (所有相关内容绘制指标及其值) 。	内容绘制指标显示应用页面加载时视觉元素的显示速度。 使用此数据来识别和修复视觉内容呈现中的延迟。
磁盘大小	指示移动设备上的应用大小。	理想限制为 20 MB。 如果应用大于理想限制，则指标将以红色显示，以绿色显示。 如果无法计算应用的磁盘大小，将显示一条错误消息。

另请参阅

• Teams 的生成选项卡
• 创建表格