Best Practices für Web-Apps

Die Entwicklung von Webseiten und Anwendungen für Mobilgeräte stellt andere Herausforderungen dar als die Entwicklung von Webseiten für Desktop-Webbrowser. Die folgenden Praktiken können Ihnen dabei helfen, die effektivste Webanwendung für Android und andere Mobilgeräte zu entwickeln.

  1. Mobilgeräte auf eine spezielle mobile Version Ihrer Website weiterleiten: Es gibt mehrere Möglichkeiten, dies mithilfe serverseitiger Weiterleitungen zu tun. Eine gängige Methode ist das „Sniffing“ des User-Agent-Strings, der vom Webbrowser bereitgestellt wird. Wenn Sie feststellen möchten, ob eine mobile Version Ihrer Website bereitgestellt werden soll, suchen Sie im User-Agent nach dem String „mobile“.
  2. HTML5 für Mobilgeräte verwenden: HTML5 ist die am häufigsten verwendete Auszeichnungssprache für mobile Websites. Dieser Standard fördert die Mobile-First-Entwicklung, damit Websites auf einer Vielzahl von Geräten funktionieren. Im Gegensatz zu früheren Websprachen verwendet HTML5 einfachere <DOCTYPE>- und charset-Deklarationen: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Metadaten für den Darstellungsbereich verwenden, um die Größe Ihrer Webseite richtig anzupassen Geben Sie in Ihrem Dokument <head> Metadaten an, die festlegen, wie der Darstellungsbereich des Browsers Ihre Webseite rendern soll. In den Darstellungsbereich-Metadaten können Sie beispielsweise die Höhe und Breite des Darstellungsbereichs des Browsers, die anfängliche Seitenskalierung und die Zielbildschirmdichte angeben.

    Im folgenden Beispiel wird gezeigt, wie Viewport-Metadaten festgelegt werden:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Weitere Informationen zur Verwendung von Darstellungsbereich-Metadaten für Android-Geräte finden Sie unter Verschiedene Bildschirme in Web-Apps unterstützen.

  4. Verwenden Sie ein vertikales lineares Layout. Vermeiden Sie, dass Nutzer beim Navigieren auf Ihrer Seite nach links und rechts scrollen müssen. Das Auf- und Abscrollen ist für den Nutzer einfacher und Ihre Seite wird übersichtlicher.
  5. Legen Sie die Höhe und Breite des Layouts auf match_parent fest. Wenn Sie die Höhe und Breite des WebView-Objekts auf match_parent festlegen, werden die Ansichten Ihrer App richtig dimensioniert. Wir raten davon ab, die Höhe auf wrap_content festzulegen, da dies zu einer falschen Größe führt. Ebenso wird das Festlegen der Layoutbreite auf wrap_content nicht unterstützt. In diesem Fall wird für WebView stattdessen die Breite des übergeordneten Elements verwendet. Aus diesem Grund ist es auch wichtig, dass die Höhe und Breite der übergeordneten Layoutobjekte Ihres WebView-Objekts nicht auf wrap_content festgelegt sind.
  6. Mehrere Dateianfragen vermeiden: Da Mobilgeräte in der Regel eine geringere Verbindungsgeschwindigkeit als Desktopcomputer haben, sollte Ihr Seitenaufbau so schnell wie möglich sein. Eine Möglichkeit, die Geschwindigkeit zu erhöhen, besteht darin, das Laden zusätzlicher Dateien wie Stylesheets und Skriptdateien in der <head> zu vermeiden. Sie können auch mit PageSpeed Insights von Google eine mobile Analyse durchführen, um detaillierte Optimierungsvorschläge speziell für Ihre App zu erhalten.
  7. Automatische Favicon-Downloads deaktivieren, wenn Sie sie nicht benötigen Standardmäßig lädt WebView automatisch ein Favicon herunter, wenn eine Website beim Navigieren besucht wird. WebView speichert zwei Kopien jedes heruntergeladenen Favicons (eine in Java und eine im nativen Arbeitsspeicher). Wenn Sie das Herunterladen von Favicons deaktivieren, sparen Sie Arbeitsspeicher (ca. 8 KB pro WebView-Instanz) und reduzieren den Bandbreitenverbrauch. Wenn Ihre App keine Favicons verwendet oder anzeigt, können Sie automatische Downloads mit WebSettingsCompat.setDownloadFaviconsEnabled() aus der Jetpack Webkit-Bibliothek deaktivieren:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. Gespeicherten Status verwalten und Transaktionslimits vermeiden: Wenn Sie den WebView-Status während des Lebenszyklus mit saveState(Bundle) speichern, erzwingen Sie die Nutzlastgrößenbeschränkungen mit WebViewCompat.saveState(), um das savedInstanceState-Limit von 1 MB von Android nicht zu überschreiten. Weitere Informationen finden Sie unter WebView-Status effizient verwalten.
  9. Netzwerkverbindungen und Seitenladezeiten mit spekulativen Lade-APIs optimieren: Um die Navigationslatenz zu verringern, können Sie mit den Jetpack Webkit APIs Netzwerkverbindungen und Inhalte im Voraus vorbereiten. Rufen Sie Profile.addQuicHints auf, um die Unterstützung von HTTP/3 über QUIC vorab zu konfigurieren, damit WebView QUIC sofort bei der ersten Verbindung verwenden kann. Verwenden Sie Profile.preconnect, um Netzwerksockets vorab zu initialisieren. Wenn Ziel-URLs bekannt oder wahrscheinlich sind, verwenden Sie Profile.prefetchUrlAsync oder WebViewCompat.prerenderUrlAsync, um Seiten im Hintergrund abzurufen oder zu rendern. Weitere Informationen finden Sie unter Spekulatives Laden in WebView.
  10. Automatische Favicon-Downloads deaktivieren, wenn Sie sie nicht benötigen Standardmäßig lädt WebView automatisch ein Favicon herunter, wenn eine Website beim Navigieren besucht wird. WebView speichert zwei Kopien jedes heruntergeladenen Favicons (eine in Java und eine im nativen Arbeitsspeicher). Wenn Sie das Herunterladen von Favicons deaktivieren, sparen Sie Arbeitsspeicher (ca. 8 KB pro WebView-Instanz) und reduzieren den Bandbreitenverbrauch. Wenn Ihre App keine Favicons verwendet oder anzeigt, können Sie automatische Downloads mit WebSettingsCompat.setDownloadFaviconsEnabled() aus der Jetpack Webkit-Bibliothek deaktivieren:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. Gespeicherten Status verwalten und Transaktionslimits vermeiden: Wenn Sie den WebView-Status während des Lebenszyklus mit saveState(Bundle) speichern, erzwingen Sie die Nutzlastgrößenbeschränkungen mit WebViewCompat.saveState(), um das savedInstanceState-Limit von 1 MB von Android nicht zu überschreiten. Weitere Informationen finden Sie unter WebView-Status effizient verwalten.

Zusätzliche Ressourcen