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 Android-Klasse View, mit der werden Webseiten als Teil Ihres Aktivitätslayouts angezeigt. Das Feld Funktionen eines vollständig entwickelten Webbrowsers, wie z. B. Navigationssteuerung oder eine Adressleiste. WebView zeigt standardmäßig nur eine Webseite an.

WebView kann dir dabei helfen, in deiner App Informationen bereitzustellen, die du möglicherweise benötigst etwa in einer Endnutzervereinbarung oder in einem Nutzerhandbuch. In Ihrer Android-App können Sie ein Activity erstellen, das eine WebView, und verwenden Sie sie dann, um Ihr online gehostetes Dokument aufzurufen.

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 könnten Sie haben wir festgestellt, dass es einfacher ist, eine WebView in deiner Android-App zu erstellen, mit der eine Web-App mit allen Nutzerdaten zu sehen, anstatt eine Netzwerkanfrage zu senden, die Daten geparst und in einem Android-Layout gerendert. 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 werden die ersten Schritte mit WebView sowie die Bindung von Ihrer Webseite in clientseitigen Code in Ihrer Android-App übertragen. wie die Seitennavigation gehandhabt wird und wie Fenster bei der Verwendung von WebView verwaltet werden.

WebView in älteren Android-Versionen verwenden

Damit du neuere WebView-Funktionen auf dem Gerät, auf dem du deine App nutzt, sicher nutzen kannst auf, 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 ihn so zu Ihrer build.gradle-Datei hinzu:

Kotlin

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

Cool

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

Entdecken Sie die WebView Beispiel 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

Um Ihrer App im Layout ein WebView hinzuzufügen, fügen Sie folgenden Code zu Ihrem die Layout-XML-Datei der Aktivität:

<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:

Kotlin

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

Java

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:

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

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

Laden Sie dann die Seite:

Kotlin

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

Java

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

Oder laden Sie die URL aus einem HTML-String:

Kotlin

// 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")

Java

// 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:

  • Vollbildunterstützung aktivieren mit WebChromeClient 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
  • Mit JavaScript auf eingeschleuste Android-Framework-Objekte zugreifen in WebView.

JavaScript in WebView verwenden

Wenn die Webseite, die du in deinem WebView laden möchtest, JavaScript verwendet, musst du JavaScript für WebView aktivieren. Nach der Aktivierung von JavaScript 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 sie über die WebSettings wurde an WebView angehängt. WebSettings abrufen mit getSettings() und aktivieren Sie dann JavaScript mit setJavaScriptEnabled()

Hier ein Beispiel:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings bietet Zugriff auf eine Reihe weiterer Einstellungen, die Ihnen möglicherweise nützlich sind. Wenn Sie beispielsweise eine Webanwendung entwickeln, speziell für WebView in Ihrer Android-App, dann können Sie ein benutzerdefiniertes User-Agent-String mit setUserAgentString(), Fragen Sie dann den benutzerdefinierten User-Agent auf Ihrer Webseite ab, um zu überprüfen, ob der Client Ihre Webseite 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 Ihren Android-Code zum Anzeigen eines Dialog, statt die alert()-Funktion von JavaScript zu verwenden.

Um eine neue Schnittstelle zwischen Ihrem JavaScript- und Android-Code zu binden, rufen Sie addJavascriptInterface(), Sie übergeben eine Klasseninstanz, um sie an Ihr JavaScript zu binden, sowie einen Schnittstellennamen. das Ihr JavaScript aufrufen kann, um auf die Klasse zuzugreifen.

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

Kotlin

/** 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()
    }
}

Java

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:

Kotlin

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

Java

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

Dadurch wird eine Schnittstelle mit dem Namen Android für JavaScript erstellt, das in der WebView. Jetzt hat Ihre Webanwendung Zugriff auf die Klasse WebAppInterface. Hier sehen Sie als Beispiel HTML- und JavaScript-Code, erstellt eine Toast-Nachricht über die neue Benutzeroberfläche, 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 also Nutzende tippt auf die Schaltfläche, die showAndroidToast()-Funktion verwendet die Android-Oberfläche um die Methode WebAppInterface.showToast() aufzurufen.

Seitennavigation verwalten

Wenn der Nutzer in deinem WebView auf einen Link auf einer Webseite tippt, 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 dem Nutzer dann erlauben, vorwärts und rückwärts durch den Verlauf ihrer Webseiten, von deinem WebView.

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 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 ist. von Activity.

Kotlin

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
    }
}

Java

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 WebView:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

Wenn der Nutzer jetzt auf einen Link tippt, ruft das System die shouldOverrideUrlLoading()-Methode, die prüft, ob der URL-Host übereinstimmt einer bestimmten Domain, wie im vorherigen Beispiel definiert. Stimmen sie überein, 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 ein Intent wird erstellt, um die Standardeinstellung zu starten Activity für die Verarbeitung von URLs, die zum Standardwebbrowser des Nutzers aufgelöst werden.

Benutzerdefinierte URLs verarbeiten

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

Beispiel: WebView ruft die Methode shouldOverrideUrlLoading() möglicherweise nicht auf. für Links wie diesen:

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

Ungültige URLs wie im Beispiel oben werden inkonsistent in WebView, daher empfehlen wir, 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:

Kotlin

// 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
    }
}

Java

// 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 Start-Intents durch benutzerdefiniertes Verhalten im vorherigen Code ersetzen Proben.

Wenn WebView das Laden von URLs überschreibt, wird automatisch ein der besuchten Webseiten. Sie können vorwärts und rückwärts durch die Verlauf mit goBack() und goForward()

Das folgende Beispiel zeigt, wie Activity das Gerät verwenden kann „Zurück“ um zurückzugehen:

Kotlin

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)
}

Java

@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 deine App AndroidX AppCompat 1.6.0 oder höher verwendet, kannst du die vorherige Version vereinfachen. noch mehr einfügen:

Kotlin

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

Java

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

Methode canGoBack() gibt "true" zurück, wenn ein Webseitenverlauf für den Nutzer vorhanden ist. Ebenso können Sie können canGoForward() für Folgendes verwenden: prüfen, ob es einen Weiterleitungsverlauf 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) Diese Änderungen führen dazu, dass die Aktivität eines WebView-Objekts gelöscht und ein Neue Aktivität, die auch ein neues WebView-Objekt erstellt, das geladen wird URL des zerstörten Objekts. Um das Standardverhalten Ihrer Aktivität zu ändern, haben Sie folgende Möglichkeiten: die Verarbeitung von orientation-Änderungen in deinem Manifest ändern. 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. Dies gilt unabhängig davon, durch JavaScript oder das Zielattribut in einem Link geöffnet werden. Sie können anpassen WebChromeClient, um dein eigenes Verhalten beim Ö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. Diese Logik verhindert, dass Seite, die target="_blank" in ihren Links verwendet, wird nicht geladen.