Teams モバイル アプリのベスト プラクティス

モバイル デバイスには、デスクトップやノート PC と比較して処理能力、ネットワーク接続、バッテリーが限られています。 モバイル デバイスでの Teams タブ アプリの導入を増やす場合は、Teams Android および iOS クライアントで高速かつ応答性の高い Web エクスペリエンスを確保する必要があります。 この記事では、Teams モバイル クライアント用に Teams タブの Web ページを最適化するためのベスト プラクティスについて説明します。

サービス ワーカーを使用して静的資産をキャッシュする

• HTML、CSS、JavaScript、イメージなどの静的資産をキャッシュして、ネットワークの依存関係を減らします。
• 古い一方の再検証戦略を使用して、バックグラウンドで更新されたデータをフェッチしながら、キャッシュされたコンテンツをすばやく提供します。 この方法を使用して、構成データなど、頻繁に変更されない API 応答をキャッシュすることもできます。
• モバイル デバイスでの不要なストレージ消費を防ぐために、大きな資産をキャッシュしないようにします。

サンプル アプリ

サービス ワーカーを使用してデータをキャッシュし、オフライン機能を提供するこの サンプル アプリ を確認してください。

Web ページのサイズを最小限に抑える

信号強度が弱い領域では、モバイル データ ネットワークが低速で不安定になり、待機時間が長くなる可能性があります。 そのため、アプリ パッケージ全体のサイズを小さくし、データ転送を最適化することが重要です。 ページ サイズを小さくするには、開発ツールの [パフォーマンス] タブを使用してパフォーマンス監査を実行して、主要な パフォーマンス メトリックを収集します。 パフォーマンス監査は、アプリの改善のためのボトルネックと領域を特定するのに役立ちます。

パフォーマンス監査

パフォーマンス監査を実行するには、次の手順に従います。

1. 開発ツールを有効にします。

2. 開発ツールを開き、アプリの下にある [検査 ] を選択します。 新しいウィンドウが開きます。

3. [ パフォーマンス ] タブを選択します。Teams JavaScript SDK の初期化から notifySuccess 呼び出しまでのアプリにかかる時間を示すパフォーマンス マーカーが表示されます。 このマーカーを使用して、 init() と notifySuccessの間で実行されるネットワークまたはローカル操作を調べることができます。

   次の例では、[ タイミング ] セクションは、アプリが Teams JavaScript SDK の初期化から notifySuccessまで 2.20 秒かかり、承認トークンを取得するために 2 回の呼び出しを行い、1.5 秒かかる 3 番目の API 呼び出しを行っていることを示しています。

   

4. [ Lighthouse]\(ライトハウス \) タブを選択します。このタブでは、アプリのサイズとパフォーマンスのメトリックに関する分析情報を提供します。

   1. [ デバイス] で、[ モバイル] を選択していることを確認します。

   2. [ ページ読み込みの分析] を選択します。

      

      レポートには、アプリの Web ページのさまざまな診断と、ページの読み込みを減らすために実用的な分析情報のセットが表示されます。 このレポートでフラグが設定されている待機時間を短縮するために必要な手順を実行してください。

5. [ カバレッジ ] タブを選択します。Web ページには、アプリの機能に価値を提供しない未使用のリソースが含まれている場合があります。 このタブでは、Web ページ上のリソースの実際のサイズと使用量の割合を表示できます。

   1. 開発ツールのホーム ページで見つからない場合は、 その他のツール>Coverage に移動します。

      

   2. レポートを使用して、未使用のコードまたはリソースを削除できます。

      

関連項目

• Teams の [ビルド] タブ
• タブを作成する