Web-Apps in WebView erstellen

WebView zum Bereitstellen einer Webanwendung verwenden oder eine Webseite als Teil einer Client-Anwendung. Die WebView-Klasse ist eine Erweiterung der View-Klasse von Android, mit der Sie Webseiten als Teil Ihres Aktivitätslayouts anzeigen können. Das Feld Funktionen eines vollständig entwickelten Webbrowsers, wie z. B. Navigationssteuerung oder eine Adressleiste. Standardmäßig zeigt WebView nur eine Webseite an.

WebView kann Ihnen dabei helfen, Informationen in Ihrer App anzugeben, die Sie möglicherweise aktualisieren müssen, z. B. eine Endnutzervereinbarung oder eine Bedienungsanleitung. In Ihrer Android-App können Sie einen Activity mit einem WebView erstellen und dann damit Ihr online gehostetes Dokument anzeigen.

WebView kann auch hilfreich sein, wenn deine App dem Nutzer Daten bereitstellt, für die eine Internetverbindung, um Daten wie E-Mails abzurufen. In diesem Fall ist es möglicherweise einfacher, in Ihrer Android-App eine WebView zu erstellen, die eine Webseite mit allen Nutzerdaten anzeigt, anstatt eine Netzwerkanfrage auszuführen, die Daten zu parsen und sie in einem Android-Layout zu rendern. Stattdessen können Sie für Android-Geräte zugeschnittene Webseite erstellen und WebView in Ihrer Android-App, die die Webseite lädt.

In diesem Dokument wird beschrieben, wie Sie mit WebView beginnen, JavaScript von Ihrer Webseite an clientseitigen Code in Ihrer Android-App binden, die Seitennavigation verwalten und Fenster bei der Verwendung von WebView verwalten.

WebView in älteren Android-Versionen verwenden

Damit du neuere WebView-Funktionen auf dem Gerät, auf dem du deine App nutzt, sicher nutzen kannst fügen Sie die AndroidX- WebKit-Bibliothek. Dies ist ein statisches Bibliothek, die Sie Ihrer Anwendung hinzufügen können, um android.webkit APIs zu verwenden, die nicht für frühere Plattformversionen verfügbar.

Fügen Sie sie Ihrer build.gradle-Datei folgendermaßen hinzu:

KotlinGroovy
dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}
 
dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

Weitere Informationen finden Sie im Beispiel für WebView auf GitHub.

WebView zur App hinzufügen

Um deiner App ein WebView hinzuzufügen, kannst du das <WebView>-Element in dein Aktivitätslayout oder das gesamte Activity-Fenster als WebView in onCreate()

WebView zum Aktivitätslayout hinzufügen

Wenn Sie Ihrer App im Layout ein WebView hinzufügen möchten, fügen Sie der Layout-XML-Datei Ihrer Aktivität den folgenden Code hinzu:

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

Um eine Webseite im WebView zu laden, verwenden Sie loadUrl(), wie Beispiel:

KotlinJava
val myWebView: WebView = findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")
 
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

WebView in onCreate() hinzufügen

Wenn Sie Ihrer App stattdessen in der onCreate()-Methode einer Aktivität eine WebView hinzufügen möchten, verwenden Sie Logik in etwa so:

KotlinJava
val myWebView = WebView(activityContext)
setContentView(myWebView)
 
WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

Laden Sie dann die Seite:

KotlinJava
myWebView.loadUrl("http://www.example.com")
 
myWebView.loadUrl("https://www.example.com");

Sie können die URL auch über einen HTML-String laden:

KotlinJava
// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
val unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING)
myWebView.loadData(encodedHtml, "text/html", "base64")
 
// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
String unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(),
        Base64.NO_PADDING);
myWebView.loadData(encodedHtml, "text/html", "base64");

Ihre App muss Zugriff auf das Internet haben. Fordere für den Internetzugriff das INTERNET-Berechtigung in Ihrem Manifest-Datei, wie im folgenden Beispiel gezeigt:

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

Sie haben folgende Möglichkeiten, Ihr WebView anzupassen:

  • Vollbildmodus mit WebChromeClient aktivieren Dieser Kurs wird auch aufgerufen, wenn ein WebView die Berechtigung zum Ändern der Benutzeroberfläche der Host-App benötigt. etwa um Fenster zu erstellen oder zu schließen oder JavaScript-Dialogfelder an die Nutzer. Weitere Informationen zur Fehlerbehebung in diesem Kontext finden Sie unter Fehlerbehebung im Web Apps.
  • Ereignisse verarbeiten, die sich auf das Rendern von Inhalten auswirken, z. B. Fehler in Formularen oder die Navigation durch WebViewClient Sie können auch um das Laden von URLs abzufangen.
  • Aktivieren von JavaScript durch Ändern WebSettings
  • JavaScript verwenden, um auf Android-Framework-Objekte zuzugreifen, die Sie in eine WebView eingefügt haben

JavaScript in WebView verwenden

Wenn die Webseite, die du in deinem WebView laden möchtest, JavaScript verwendet, musst du JavaScript für WebView aktivieren. Nachdem Sie JavaScript aktiviert haben, können Sie Schnittstellen zwischen Ihrem App-Code und Ihrem JavaScript-Code erstellen.

JavaScript aktivieren

JavaScript ist in einem WebView standardmäßig deaktiviert. Sie können die Funktion über die WebSettings aktivieren, die mit Ihrem WebView verknüpft ist. Rufen Sie WebSettings mit getSettings() ab und aktivieren Sie dann JavaScript mit setJavaScriptEnabled().

Sehen Sie sich folgendes Beispiel an:

KotlinJava
val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true
 
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Über WebSettings können Sie auf eine Vielzahl anderer Einstellungen zugreifen, die für Sie nützlich sein könnten. Wenn Sie beispielsweise eine Webanwendung entwickeln, die speziell für die WebView in Ihrer Android-App entwickelt wurde, können Sie einen benutzerdefinierten User-Agent-String mit setUserAgentString() definieren und dann den benutzerdefinierten User-Agent auf Ihrer Webseite abfragen, um zu prüfen, ob der Client, der Ihre Webseite anfordert, Ihre Android-App ist.

JavaScript-Code an Android-Code binden

Bei der Entwicklung einer Webanwendung, die speziell für WebView entwickelt wurde in Ihrer Android-App können Sie Schnittstellen zwischen Ihrem JavaScript-Code und clientseitigen Android-Codes. Ihr JavaScript-Code kann beispielsweise eine Methode in Ihrem Android-Code aufrufen, um ein Dialog anzuzeigen, anstatt die alert()-Funktion von JavaScript zu verwenden.

Wenn Sie eine neue Schnittstelle zwischen Ihrem JavaScript- und Android-Code verknüpfen möchten, rufen Sie addJavascriptInterface() auf und übergeben Sie eine Klasseninstanz, die mit Ihrem JavaScript verknüpft werden soll, und einen Schnittstellennamen, den Ihr JavaScript aufrufen kann, um auf die Klasse zuzugreifen.

Sie können beispielsweise die folgende Klasse in Ihre Android-App aufnehmen:

KotlinJava
/** Instantiate the interface and set the context.  */
class WebAppInterface(private val mContext: Context) {

    /** Show a toast from the web page.  */
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
    }
}
 
public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context. */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page. */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

In diesem Beispiel ermöglicht die Klasse WebAppInterface der Webseite, ein Toast-Nachricht über die showToast() .

Sie können diese Klasse an den JavaScript-Code binden, der in Ihrem WebView ausgeführt wird: addJavascriptInterface(), wie im folgenden Beispiel gezeigt:

KotlinJava
val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")
 
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

Dadurch wird eine Schnittstelle namens Android für JavaScript erstellt, die im WebView ausgeführt wird. Jetzt hat Ihre Webanwendung Zugriff auf die Klasse WebAppInterface. Im Folgenden finden Sie beispielsweise einige HTML- und JavaScript-Code-Snippets, mit denen eine Toast-Nachricht mit der neuen Benutzeroberfläche erstellt wird, wenn der Nutzer auf eine Schaltfläche tippt:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

Die Android-Schnittstelle muss nicht über JavaScript initialisiert werden. Die WebView macht es automatisch für deine Webseite verfügbar. Wenn ein Nutzer also auf die Schaltfläche tippt, ruft die showAndroidToast()-Funktion über die Android-Schnittstelle die WebAppInterface.showToast()-Methode auf.

Seitennavigation steuern

Wenn Nutzer in deinem WebView auf einen Link auf einer Webseite tippen, wird Android standardmäßig startet eine App, die URLs verarbeitet. Normalerweise wird der Standard-Webbrowser geöffnet und lädt die Ziel-URL. Sie können dieses Verhalten jedoch für Ihre WebView, damit Links in WebView geöffnet werden. Sie können den Nutzer dann durch den von Ihrer WebView verwalteten Webseitenverlauf vor- und zurückgehen lassen.

Um Links zu öffnen, auf die der Nutzer getippt hat, gib eine WebViewClient für dein WebView an mit setWebViewClient() Alle Links, auf die der Nutzer tippt, werden in Ihrem WebView geladen. Wenn Sie mehr Kontrolle über bei denen ein angeklickter Link geladen wird, eine eigene WebViewClient erstellen, die den shouldOverrideUrlLoading() . Im folgenden Beispiel wird davon ausgegangen, dass MyWebViewClient eine innere Klasse von Activity ist.

KotlinJava
private class MyWebViewClient : WebViewClient() {

    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
        if (Uri.parse(url).host == "www.example.com") {
            // This is your website, so don't override. Let your WebView load
            // the page.
            return false
        }
        // Otherwise, the link isn't for a page on your site, so launch another
        // Activity that handles URLs.
        Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
            startActivity(this)
        }
        return true
    }
}
 
private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if ("www.example.com".equals(request.getUrl().getHost())) {
      // This is your website, so don't override. Let your WebView load the
      // page.
      return false;
    }
    // Otherwise, the link isn't for a page on your site, so launch another
    // Activity that handles URLs.
    Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
    startActivity(intent);
    return true;
  }
}

Erstellen Sie dann eine Instanz dieser neuen WebViewClient für die WebView:

KotlinJava
val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()
 
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

Wenn der Nutzer jetzt auf einen Link tippt, ruft das System die Methode shouldOverrideUrlLoading() auf, die prüft, ob der URL-Host mit einer bestimmten Domain übereinstimmt, wie im vorherigen Beispiel definiert. Wenn die Übereinstimmung vorliegt, gibt die Methode „false“ zurück und überschreibt das Laden der URL nicht. Dadurch kann das WebView lädt die URL wie gewohnt. Wenn der URL-Host nicht übereinstimmt, wird eine Intent erstellt, um den StandardActivity für die Verarbeitung von URLs zu starten, der zum Standardwebbrowser des Nutzers führt.

Benutzerdefinierte URLs verarbeiten

WebView ergreift Einschränkungen beim Anfordern von Ressourcen und beim Auflösen von Links, die ein benutzerdefiniertes URL-Schema verwenden. Wenn Sie beispielsweise Callbacks wie die shouldOverrideUrlLoading() oder shouldInterceptRequest(), dann ruft WebView sie nur für gültige URLs auf.

Beispielsweise ruft WebView Ihre shouldOverrideUrlLoading()-Methode möglicherweise nicht für Links wie diese auf:

<a href="showProfile">Show Profile</a>

Ungültige URLs wie die im vorherigen Beispiel werden in WebView nicht einheitlich behandelt. Wir empfehlen daher, stattdessen eine korrekt formatierte URL zu verwenden. Sie können ein benutzerdefiniertes Schema oder eine HTTPS-URL für eine Domain verwenden, Steuerelementen.

Anstatt wie im vorherigen Beispiel eine einfache Zeichenfolge in einem Link zu verwenden, können Sie Verwenden Sie ein benutzerdefiniertes Schema wie das folgende:

<a href="example-app:showProfile">Show Profile</a>

Sie können diese URL dann in Ihrer shouldOverrideUrlLoading()-Methode wie folgt verarbeiten: dies:

KotlinJava
// The URL scheme must be non-hierarchical, meaning no trailing slashes.
const val APP_SCHEME = "example-app:"

override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
    return if (url?.startsWith(APP_SCHEME) == true) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8")
        respondToData(urlData)
        true
    } else {
        false
    }
}
 
// The URL scheme must be non-hierarchical, meaning no trailing slashes.
private static final String APP_SCHEME = "example-app:";

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith(APP_SCHEME)) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8");
        respondToData(urlData);
        return true;
    }
    return false;
}

Die shouldOverrideUrlLoading() API ist in erster Linie zum Starten von Intents vorgesehen für bestimmte URLs. Achten Sie bei der Implementierung darauf, für URLs false zurückzugeben. WebView-Ziehpunkte. Sie sind jedoch nicht auf das Starten von Intents beschränkt. Sie können die Startabsichten in den vorherigen Codebeispielen durch beliebiges benutzerdefiniertes Verhalten ersetzen.

Wenn Ihre WebView das Laden der URL überschreibt, wird automatisch ein Verlauf der besuchten Webseiten erstellt. Mit goBack() und goForward() können Sie rückwärts und vorwärts durch den Verlauf scrollen.

Im folgenden Beispiel wird beispielsweise gezeigt, wie Sie mit Activity die Rückwärtstaste des Geräts verwenden können, um zurückzugehen:

KotlinJava
override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    // Check whether the key event is the Back button and if there's history.
    if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) {
        myWebView.goBack()
        return true
    }
    // If it isn't the Back button or there isn't web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event)
}
 
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check whether the key event is the Back button and if there's history.
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it isn't the Back button or there's no web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event);
}

Wenn in Ihrer App AndroidX AppCompat 1.6.0 oder höher verwendet wird, können Sie das vorherige Snippet noch weiter vereinfachen:

KotlinJava
onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack()
    }
}
 
onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack();
    }
}

Die Methode canGoBack() gibt „wahr“ zurück, wenn es einen Webseitenverlauf für den Nutzer gibt, den er aufrufen kann. Ebenso können Sie mit canGoForward() prüfen, ob es einen Vorwärtsverlauf gibt. Wenn Sie diese Prüfung nicht durchführen, Nachdem der Nutzer das Ende des Verlaufs erreicht hat, tun goBack() und goForward() nichts.

Änderungen an der Gerätekonfiguration verarbeiten

Während der Laufzeit ändert sich der Aktivitätsstatus, wenn die Konfiguration eines Geräts Änderungen, z. B. wenn Nutzer das Gerät drehen oder einen Eingabemethodeneditor schließen (IME) Durch diese Änderungen wird die Aktivität eines WebView-Objekts gelöscht und eine neue Aktivität erstellt. Dadurch wird auch ein neues WebView-Objekt erstellt, das die URL des gelöschten Objekts lädt. Wenn Sie das Standardverhalten Ihrer Aktivität ändern möchten, können Sie festlegen, wie orientation-Änderungen in Ihrem Manifest behandelt werden. Weitere Informationen Informationen zum Umgang mit Konfigurationsänderungen während der Laufzeit finden Sie unter Konfiguration Änderungen.

Fenster verwalten

Anfragen zum Öffnen neuer Fenster werden standardmäßig ignoriert. Das gilt unabhängig davon, ob sie über JavaScript oder über das Zielattribut in einem Link geöffnet werden. Sie können anpassen WebChromeClient, um dein eigenes Verhalten zum Öffnen mehrerer Fenster.

Um die Sicherheit Ihrer App zu erhöhen, sollten Sie Pop-ups und neue Fenster wird geöffnet. Die sicherste Methode zur Implementierung dieses Verhaltens ist die Übergabe von "true" an setSupportMultipleWindows() aber nicht überschreiben, onCreateWindow() auf, von dem setSupportMultipleWindows() abhängig ist. Dadurch wird verhindert, dass Seiten geladen werden, in deren Links target="_blank" verwendet wird.