Bewährte Methoden für mobile Teams-Apps

Mobile Geräte verfügen im Vergleich zu Desktops und Laptops über eingeschränkte Rechenleistung, Netzwerkkonnektivität und Akku. Um die Akzeptanz Ihrer Teams-Registerkarten-App auf mobilen Geräten zu erhöhen, müssen Sie eine schnelle und reaktionsfähige Weberfahrung auf den Teams Android- und iOS-Clients sicherstellen. In diesem Artikel werden die bewährten Methoden zum Optimieren der Webseiten Ihrer Teams-Registerkarte für den mobilen Teams-Client beschrieben.

Verwenden von Service Workern zum Zwischenspeichern statischer Ressourcen

• Zwischenspeichern statischer Ressourcen wie HTML, CSS, JavaScript und Bilder, um die Netzwerkabhängigkeit zu reduzieren.
• Verwenden Sie die Strategie stale-while-revalidate, um zwischengespeicherte Inhalte schnell zu verarbeiten, während aktualisierte Daten im Hintergrund abgerufen werden. Sie können diese Strategie auch verwenden, um API-Antworten zwischenzuspeichern, die sich nicht häufig ändern, z. B. Konfigurationsdaten.
• Vermeiden Sie das Zwischenspeichern großer Ressourcen, um unnötigen Speicherverbrauch auf mobilen Geräten zu vermeiden.

Beispiel-App

Sehen Sie sich diese Beispiel-App an, die einen Service Worker verwendet, um Daten zwischenzuspeichern und Offlinefunktionen bereitzustellen.

Minimieren der Webseitengröße

In Bereichen mit schwacher Signalstärke kann das mobile Datennetz langsam und instabil sein, was zu einer hohen Latenz führt. Daher ist es wichtig, die Gesamtgröße des App-Pakets zu reduzieren und die Datenübertragung zu optimieren. Um die Seitengröße zu reduzieren, erfassen Sie wichtige Leistungsmetriken, indem Sie eine Leistungsüberwachung mithilfe der Registerkarte Leistung in Entwicklungstools ausführen. Die Leistungsüberwachung hilft bei der Identifizierung von Engpässen und Verbesserungsmöglichkeiten in Ihrer App.

Leistungsüberwachung

Führen Sie die folgenden Schritte aus, um eine Leistungsüberwachung auszuführen:

1. Aktivieren Sie Entwicklungstools.

2. Öffnen Sie Entwicklungstools, und wählen Sie unter Ihrer App untersuchen aus. Ein neues Fenster wird geöffnet.

3. Wählen Sie die Registerkarte Leistung aus. Sie können einen Leistungsmarker sehen, der angibt, wie lange ihre App von der Microsoft Teams JavaScript SDK-Initialisierung bis zum notifySuccess Aufruf benötigt wird. Sie können diesen Marker verwenden, um die Netzwerk- oder lokalen Vorgänge zu untersuchen, die zwischen init() und notifySuccessausgeführt werden.

   Im folgenden Beispiel zeigt der Abschnitt Timings, dass die App 2,20 Sekunden von der Microsoft Teams JavaScript SDK-Initialisierung an notifySuccessbenötigt, zwei Aufrufe zum Abrufen eines Autorisierungstokens ausführt und einen dritten API-Aufruf durchführt, der 1,5 Sekunden dauert.

   

4. Wählen Sie die Registerkarte Lighthouse aus. Diese Registerkarte bietet Einblicke in die Größen- und Leistungsmetriken der App.

   1. Wählen Sie unter Gerät die Option Mobil aus.

   2. Wählen Sie Seitenladevorgang analysieren aus.

      

      Der Bericht zeigt verschiedene Diagnose für die Webseite Ihrer App und eine Reihe von umsetzbaren Erkenntnissen, um die Seitenlast zu verringern. Führen Sie die erforderlichen Schritte aus, um die in diesem Bericht gekennzeichneten Wartezeiten zu reduzieren.

5. Wählen Sie die Registerkarte Abdeckung aus. Ihre Webseite enthält möglicherweise nicht verwendete Ressourcen, die keinen Wert für die Funktionalität der App bieten. Auf dieser Registerkarte können Sie die tatsächliche Größe und den Nutzungsprozentsatz der Ressourcen auf der Webseite anzeigen.

   1. Wenn Sie sie auf der Startseite der Entwicklungstools nicht finden können, wechseln Sie zu Weitere Tools>Abdeckung.

      

   2. Verwenden Sie den Bericht, um nicht verwendeten Code oder Ressourcen zu entfernen.

      

Berechnen von Leistungsmetriken für Apps

Verwenden Sie das einfache Self-Service-Leistungsberichtstool (oder Perf-Tool), um die Effizienz Ihrer Web- und Registerkarten-Apps auf Mobilgeräten zu bewerten. Dieses Tool wird sowohl unter Android als auch unter iOS nahtlos ausgeführt und bietet Echtzeitleistungsmetriken, die branchenspezifischen Benchmarks zugeordnet sind, um eine bessere Benutzererfahrung zu gewährleisten. Außerdem können Sie Teams-spezifische bewährte Methoden direkt von Ihrem mobilen Gerät aus in Ihre App implementieren.

Folgende Schritte sind erforderlich:

1. Bericht zu Leistungsmetriken generieren
2. Zugriff auf den Bericht zu Leistungsmetriken
3. Analysieren des Berichts zu Leistungsmetriken

Bericht zu Leistungsmetriken generieren

Führen Sie die folgenden Schritte aus, um einen Bericht zu Leistungsmetriken für Ihre mobile App mit dem Leistungsberichtstool zu generieren:

1. Wechseln Sie in Ihrer mobilen Teams-App zu Einstellungen>Informationen zur>Entwicklervorschau , und schalten Sie den Schalter um, um die Entwicklervorschau zu aktivieren.

   

2. Wechseln Sie zum Abschnitt Apps .

3. Öffnen Sie die App, die Sie überwachen möchten, und warten Sie, bis sie geladen wurde.

4. So generieren Sie den Bericht

   • Unter Android-App:

     1. Wählen Sie das Kebab-Menü aus.

     2. Wählen Sie Leistungsbericht generieren aus.

        

   • Wählen Sie in der iOS-App das Symbol für die Leistung der Überwachungs-App aus, das auf der Titelleiste angezeigt wird.

   Eine Zwischenseite wird angezeigt, während der Bericht sowohl für Android als auch für iOS generiert wird.

5. Nachdem der Bericht generiert wurde, greifen Sie auf dem unteren Blatt zu, das mit dem HTML-Leistungsbericht angezeigt wird.

Zugriff auf den Bericht zu Leistungsmetriken

Der Bericht bietet Erkenntnisse über das JavaScript SDK und WebView-APIs sowie Teams-spezifische Leistungsmarker.

Sie können über die folgenden Optionen auf dem unteren Blatt auf den Bericht zugreifen:

• Bericht öffnen: Öffnet den Bericht in einem neuen Browserfenster.

• Bericht freigeben: Öffnet die Optionen des Geräts für die Freigabe außerhalb von Teams unter Android. Unter iOS wird mit dieser Option das Freigabemenü des Geräts geöffnet.

• In Teams weiterleiten: Öffnet das Freigabemenü des Geräts für die Freigabe in Teams. Diese Option ist nur unter Android verfügbar.

• Download: Lädt den Bericht in den lokalen Speicher des Geräts herunter.

  

Analysieren des Berichts zu Leistungsmetriken

Der Bericht zu Leistungsmetriken enthält die folgenden Metriken.

Metrik	Beschreibung	Systemantwort/-aktion erforderlich
Latenz	Diese Metrik misst die (ungefähre) Ladezeit Ihrer mobilen Teams-App.	Wenn Ihre App verwendet notifySuccess(): In diesem Abschnitt wird die App-Latenz berechnet und oben angezeigt. Eine Zeitleiste zeigt anschließend die Endzeit für jeden API-Aufruf während des Ladens der App an. Wenn Ihre App nicht verwendet notifySuccess(): Latenz kann nicht berechnet werden. Verwenden Sie den Link in der Meldung, die angezeigt wird, um die API für Ihre App zu implementieren notifySuccess().
Zwischenspeichern (Service Worker)	Diese Metrik zeigt an, ob service worker als lokaler Cachemechanismus implementiert ist. Service Worker ist nur unter Android verfügbar.	Wenn Service Worker implementiert ist, wird Verfügbar grün angezeigt, andernfalls wird Nicht verfügbar rot angezeigt. Wenn Service Worker nicht verfügbar ist, verwenden Sie den Link Weitere Informationen , um mit der Implementierung fortzufahren.
App-Paket	Diese Metrik gibt die Gesamtgröße an, die vom JavaScript-Dateipaket der Plattform-App belegt wird.	Die ideale Paketgröße beträgt bis zu 1 MB. Wenn die Paketgröße die ideale Größe überschreitet, wird die Größe rot angezeigt. Wählen Sie Bündeldateien überprüfen aus, um eine detaillierte Liste der Dateien zu erhalten, die sich auf die Bündelgröße auswirken. Die Dateien, die sich auf die Paketgröße auswirken, werden in absteigender Reihenfolge der Dateigröße angezeigt. Verwenden Sie Service Worker und andere bewährte Methoden , um die Leistung Ihrer App zu optimieren.
Inhalts-Paint-Metriken	Diese Metrik gibt alle relevanten Inhalts paint-Metriken (und deren Werte) für Ihre mobile App an.	Metriken zum Zeichnen von Inhalten zeigen, wie schnell visuelle Elemente angezeigt werden, während die App-Seite geladen wird. Verwenden Sie diese Daten, um Verzögerungen beim Rendern visueller Inhalte zu identifizieren und zu beheben.
Datenträgergröße	Gibt die App-Größe auf Ihrem mobilen Gerät an.	Der ideale Grenzwert beträgt 20 MB. Wenn eine App den idealen Grenzwert überschreitet, wird die Metrik rot oder grün angezeigt. Wenn die Datenträgergröße Ihrer App nicht berechnet werden kann, wird eine Fehlermeldung angezeigt.

Siehe auch

• Erstellen von Registerkarten für Teams
• Erstellen einer Registerkarte