Bagikan melalui


Xamarin.Forms Webview

WebView adalah tampilan untuk menampilkan konten web dan HTML di aplikasi Anda:

Di Browser Aplikasi

Konten

WebView mendukung jenis konten berikut:

  • Situs web HTML & CSS - WebView memiliki dukungan penuh untuk situs web yang ditulis menggunakan HTML & CSS, termasuk dukungan JavaScript.
  • Dokumen – Karena WebView diimplementasikan menggunakan komponen asli di setiap platform, WebView mampu menampilkan dokumen dalam format yang didukung oleh platform yang mendasar.
  • String HTML – WebView dapat menampilkan string HTML dari memori.
  • File Lokal – WebView dapat menyajikan salah satu jenis konten di atas yang disematkan di aplikasi.

Catatan

WebView pada Windows tidak mendukung kontrol Silverlight, Flash, atau ActiveX apa pun, meskipun didukung oleh Internet Explorer pada platform tersebut.

Situs Web

Untuk menampilkan situs web dari internet, atur WebViewproperti 's Source ke URL string:

var browser = new WebView
{
  Source = "https://dotnet.microsoft.com/apps/xamarin"
};

Catatan

URL harus sepenuhnya dibentuk dengan protokol yang ditentukan (yaitu harus memiliki "http://" atau "https://" yang sebelumnya).

iOS dan ATS

Sejak versi 9, iOS hanya akan memungkinkan aplikasi Anda berkomunikasi dengan server yang menerapkan keamanan praktik terbaik secara default. Nilai harus diatur Info.plist untuk mengaktifkan komunikasi dengan server yang tidak aman.

Catatan

Jika aplikasi Anda memerlukan koneksi ke situs web yang tidak aman, Anda harus selalu memasukkan domain sebagai pengecualian menggunakan NSExceptionDomains alih-alih menonaktifkan ATS sepenuhnya menggunakan NSAllowsArbitraryLoads. NSAllowsArbitraryLoads hanya boleh digunakan dalam situasi darurat ekstrem.

Berikut ini menunjukkan cara mengaktifkan domain tertentu (dalam hal ini xamarin.com) untuk melewati persyaratan ATS:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>xamarin.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.1</string>
            </dict>
        </dict>
    </dict>
    ...
</key>

Praktik terbaik adalah hanya mengaktifkan beberapa domain untuk melewati ATS, memungkinkan Anda menggunakan situs tepercaya sambil mendapat manfaat dari keamanan tambahan pada domain yang tidak tepercaya. Berikut ini menunjukkan metode yang kurang aman untuk menonaktifkan ATS untuk aplikasi:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads </key>
        <true/>
    </dict>
    ...
</key>

Lihat Keamanan Transportasi Aplikasi untuk informasi selengkapnya tentang fitur baru ini di iOS 9.

String HTML

Jika Anda ingin menyajikan string HTML yang ditentukan secara dinamis dalam kode, Anda harus membuat instans :HtmlWebViewSource

var browser = new WebView();
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><body>
  <h1>Xamarin.Forms</h1>
  <p>Welcome to WebView.</p>
  </body></html>";
browser.Source = htmlSource;

WebView Menampilkan String HTML

Dalam kode di atas, @ digunakan untuk menandai HTML sebagai string verbatim literal, yang berarti sebagian besar karakter escape diabaikan.

Catatan

Mungkin perlu untuk mengatur WidthRequest properti dan HeightRequest untuk WebView melihat konten HTML, tergantung pada tata letak WebView yang merupakan anak. Misalnya, ini diperlukan dalam StackLayout.

Isi HTML Lokal

WebView dapat menampilkan konten dari HTML, CSS, dan JavaScript yang disematkan dalam aplikasi. Contohnya:

<html>
  <head>
    <title>Xamarin Forms</title>
  </head>
  <body>
    <h1>Xamarin.Forms</h1>
    <p>This is an iOS web page.</p>
    <img src="XamarinLogo.png" />
  </body>
</html>

CSS:

html,body {
  margin:0;
  padding:10;
}
body,p,h1 {
  font-family: Chalkduster;
}

Perhatikan bahwa font yang ditentukan dalam CSS di atas perlu disesuaikan untuk setiap platform, karena tidak setiap platform memiliki font yang sama.

Untuk menampilkan konten lokal menggunakan WebView, Anda harus membuka file HTML seperti yang lain, lalu memuat konten sebagai string ke Html properti .HtmlWebViewSource Untuk informasi selengkapnya tentang membuka file, lihat Bekerja dengan File.

Cuplikan layar berikut menunjukkan hasil menampilkan konten lokal di setiap platform:

WebView Menampilkan Konten Lokal

Meskipun halaman pertama telah dimuat, WebView tidak memiliki pengetahuan tentang dari mana HTML berasal. Itu adalah masalah saat berhadapan dengan halaman yang mereferensikan sumber daya lokal. Contoh kapan itu mungkin terjadi termasuk ketika halaman lokal saling menautkan, halaman menggunakan file JavaScript terpisah, atau tautan halaman ke lembar gaya CSS.

Untuk mengatasinya, Anda perlu memberi tahu tempat WebView menemukan file di sistem file. Lakukan dengan mengatur BaseUrl properti pada yang HtmlWebViewSource digunakan oleh WebView.

Karena sistem file pada setiap sistem operasi berbeda, Anda perlu menentukan URL tersebut di setiap platform. Xamarin.Forms memaparkan DependencyService untuk menyelesaikan dependensi saat runtime pada setiap platform.

Untuk menggunakan , pertama-tama DependencyServicetentukan antarmuka yang dapat diimplementasikan pada setiap platform:

public interface IBaseUrl { string Get(); }

Perhatikan bahwa sampai antarmuka diimplementasikan pada setiap platform, aplikasi tidak akan berjalan. Dalam proyek umum, pastikan Anda ingat untuk mengatur BaseUrl menggunakan DependencyService:

var source = new HtmlWebViewSource();
source.BaseUrl = DependencyService.Get<IBaseUrl>().Get();

Implementasi antarmuka untuk setiap platform kemudian harus disediakan.

iOS

Di iOS, konten web harus terletak di direktori akar proyek atau direktori Sumber Daya dengan tindakan build BundleResource, seperti yang ditunjukkan di bawah ini:

BaseUrl harus diatur ke jalur bundel utama:

[assembly: Dependency (typeof (BaseUrl_iOS))]
namespace WorkingWithWebview.iOS
{
  public class BaseUrl_iOS : IBaseUrl
  {
    public string Get()
    {
      return NSBundle.MainBundle.BundlePath;
    }
  }
}

Android

Di Android, tempatkan HTML, CSS, dan gambar di folder Aset dengan tindakan build AndroidAsset seperti yang ditunjukkan di bawah ini:

Di Android, BaseUrl harus diatur ke "file:///android_asset/":

[assembly: Dependency (typeof(BaseUrl_Android))]
namespace WorkingWithWebview.Android
{
  public class BaseUrl_Android : IBaseUrl
  {
    public string Get()
    {
      return "file:///android_asset/";
    }
  }
}

Di Android, file di folder Aset juga dapat diakses melalui konteks Android saat ini, yang diekspos oleh MainActivity.Instance properti :

var assetManager = MainActivity.Instance.Assets;
using (var streamReader = new StreamReader (assetManager.Open ("local.html")))
{
  var html = streamReader.ReadToEnd ();
}

Platform Windows Universal

Pada proyek Platform Windows Universal (UWP), tempatkan HTML, CSS, dan gambar di akar proyek dengan tindakan build diatur ke Konten.

BaseUrl harus diatur ke "ms-appx-web:///":

[assembly: Dependency(typeof(BaseUrl))]
namespace WorkingWithWebview.UWP
{
    public class BaseUrl : IBaseUrl
    {
        public string Get()
        {
            return "ms-appx-web:///";
        }
    }
}

WebView mendukung navigasi melalui beberapa metode dan properti yang disediakannya:

  • GoForward() – jika CanGoForward benar, panggilan akan GoForward diteruskan ke halaman yang dikunjungi berikutnya.
  • GoBack() – jika CanGoBack benar, panggilan GoBack akan menavigasi ke halaman terakhir yang dikunjungi.
  • CanGoBacktrue jika ada halaman yang akan dinavigasi kembali, false jika browser berada di URL awal.
  • CanGoForwardtrue jika pengguna telah menavigasi mundur dan dapat melanjutkan ke halaman yang sudah dikunjungi.

Dalam halaman, WebView tidak mendukung gerakan multi-sentuh. Penting untuk memastikan bahwa konten dioptimalkan untuk seluler dan muncul tanpa perlu memperbesar tampilan.

Adalah umum bagi aplikasi untuk menampilkan tautan dalam WebView, bukan browser perangkat. Dalam situasi tersebut, berguna untuk memungkinkan navigasi normal, tetapi ketika pengguna menekan kembali saat mereka berada di tautan awal, aplikasi harus kembali ke tampilan aplikasi normal.

Gunakan metode navigasi bawaan dan properti untuk mengaktifkan skenario ini.

Mulailah dengan membuat halaman untuk tampilan browser:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebViewSample.InAppBrowserXaml"
             Title="Browser">
    <StackLayout Margin="20">
        <StackLayout Orientation="Horizontal">
            <Button Text="Back" HorizontalOptions="StartAndExpand" Clicked="OnBackButtonClicked" />
            <Button Text="Forward" HorizontalOptions="EndAndExpand" Clicked="OnForwardButtonClicked" />
        </StackLayout>
        <!-- WebView needs to be given height and width request within layouts to render. -->
        <WebView x:Name="webView" WidthRequest="1000" HeightRequest="1000" />
    </StackLayout>
</ContentPage>

Di kode belakang:

public partial class InAppBrowserXaml : ContentPage
{
    public InAppBrowserXaml(string URL)
    {
        InitializeComponent();
        webView.Source = URL;
    }

    async void OnBackButtonClicked(object sender, EventArgs e)
    {
        if (webView.CanGoBack)
        {
            webView.GoBack();
        }
        else
        {
            await Navigation.PopAsync();
        }
    }

    void OnForwardButtonClicked(object sender, EventArgs e)
    {
        if (webView.CanGoForward)
        {
            webView.GoForward();
        }
    }
}

Itu saja!

Tombol Navigasi WebView

Acara

WebView memunculkan peristiwa berikut untuk membantu Anda merespons perubahan status:

  • Navigating – peristiwa dinaikkan ketika WebView mulai memuat halaman baru.
  • Navigated – peristiwa dinaikkan ketika halaman dimuat dan navigasi telah berhenti.
  • ReloadRequested – peristiwa dinaikkan ketika permintaan dibuat untuk memuat ulang konten saat ini.

Objek WebNavigatingEventArgs yang menyertai Navigating peristiwa memiliki empat properti:

  • Cancel – menunjukkan apakah akan membatalkan navigasi atau tidak.
  • NavigationEvent – peristiwa navigasi yang dimunculkan.
  • Source – elemen yang melakukan navigasi.
  • Url – tujuan navigasi.

Objek WebNavigatedEventArgs yang menyertai Navigated peristiwa memiliki empat properti:

  • NavigationEvent – peristiwa navigasi yang dimunculkan.
  • Result – menjelaskan hasil navigasi, menggunakan WebNavigationResult anggota enumerasi. Nilai yang valid adalah: Cancel, Failure, Success, dan Timeout.
  • Source – elemen yang melakukan navigasi.
  • Url – tujuan navigasi.

Jika Anda mengantisipasi penggunaan halaman web yang membutuhkan waktu lama untuk dimuat, pertimbangkan untuk menggunakan Navigating peristiwa dan Navigated untuk menerapkan indikator status. Contohnya:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebViewSample.LoadingLabelXaml"
             Title="Loading Demo">
    <StackLayout>
        <!--Loading label should not render by default.-->
        <Label x:Name="labelLoading" Text="Loading..." IsVisible="false" />
        <WebView HeightRequest="1000" WidthRequest="1000" Source="https://dotnet.microsoft.com/apps/xamarin" Navigated="webviewNavigated" Navigating="webviewNavigating" />
    </StackLayout>
</ContentPage>

Dua penanganan aktivitas:

void webviewNavigating(object sender, WebNavigatingEventArgs e)
{
    labelLoading.IsVisible = true;
}

void webviewNavigated(object sender, WebNavigatedEventArgs e)
{
    labelLoading.IsVisible = false;
}

Ini menghasilkan output berikut (pemuatan):

Cuplikan layar memperlihatkan Peristiwa Navigasi WebView saat memuat.

Selesai Memuat:

Cuplikan layar memperlihatkan Peristiwa Navigasi WebView setelah dimuat.

Memuat ulang konten

WebView memiliki Reload metode yang dapat digunakan untuk memuat ulang konten saat ini:

var webView = new WebView();
...
webView.Reload();

Reload Ketika metode dipanggilReloadRequested, peristiwa diaktifkan, menunjukkan bahwa permintaan telah dibuat untuk memuat ulang konten saat ini.

Performa

Browser web populer mengadopsi teknologi seperti penyajian yang dipercepat perangkat keras dan kompilasi JavaScript. Xamarin.Forms Sebelum 4.4, Xamarin.FormsWebView diimplementasikan pada iOS oleh UIWebView kelas . Namun, banyak dari teknologi ini tidak tersedia dalam implementasi ini. Oleh karena itu, sejak Xamarin.Forms 4.4, Xamarin.FormsWebView diimplementasikan pada iOS oleh WkWebView kelas , yang mendukung penjelajahan yang lebih cepat.

Catatan

Di iOS, WkWebViewRenderer memiliki kelebihan beban konstruktor yang menerima WkWebViewConfiguration argumen. Ini memungkinkan perender dikonfigurasi pada pembuatan.

Aplikasi dapat kembali menggunakan kelas iOS UIWebView untuk mengimplementasikan Xamarin.FormsWebView, karena alasan kompatibilitas. Ini dapat dicapai dengan menambahkan kode berikut ke file AssemblyInfo.cs dalam proyek platform iOS untuk aplikasi:

// Opt-in to using UIWebView instead of WkWebView.
[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(Xamarin.Forms.Platform.iOS.WebViewRenderer))]

Catatan

Dalam Xamarin.Forms 5.0, WebViewRenderer kelas telah dihapus. Oleh karena itu, Xamarin.Forms 5.0 tidak berisi referensi ke UIWebView kontrol.

WebView di Android secara default adalah tentang secepat browser bawaan.

WebView UWP menggunakan mesin penyajian Microsoft Edge. Perangkat desktop dan tablet akan melihat performa yang sama seperti menggunakan browser Edge itu sendiri.

Izin

Agar WebView berfungsi, Anda harus memastikan bahwa izin ditetapkan untuk setiap platform. Perhatikan bahwa pada beberapa platform, WebView akan berfungsi dalam mode debug, tetapi tidak saat dibuat untuk rilis. Itu karena beberapa izin, seperti izin untuk akses internet di Android, diatur secara default oleh Visual Studio untuk Mac saat dalam mode debug.

  • UWP – memerlukan kemampuan Internet (Klien & Server) saat menampilkan konten jaringan.
  • Android – hanya memerlukan INTERNET saat menampilkan konten dari jaringan. Konten lokal tidak memerlukan izin khusus.
  • iOS – tidak memerlukan izin khusus.

Tata letak

Tidak seperti kebanyakan tampilan lainnya Xamarin.Forms , WebView mengharuskan dan HeightRequestWidthRequest ditentukan saat terkandung dalam StackLayout atau RelativeLayout. Jika Anda gagal menentukan properti tersebut WebView , properti tidak akan dirender.

Contoh berikut menunjukkan tata letak yang menghasilkan pekerjaan, penyajian WebView:

StackLayout dengan WidthRequest & HeightRequest:

<StackLayout>
    <Label Text="test" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin"
        HeightRequest="1000"
        WidthRequest="1000" />
</StackLayout>

RelativeLayout dengan WidthRequest & HeightRequest:

<RelativeLayout>
    <Label Text="test"
        RelativeLayout.XConstraint= "{ConstraintExpression
                                      Type=Constant, Constant=10}"
        RelativeLayout.YConstraint= "{ConstraintExpression
                                      Type=Constant, Constant=20}" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin"
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,
                                     Constant=10}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,
                                     Constant=50}"
        WidthRequest="1000" HeightRequest="1000" />
</RelativeLayout>

AbsoluteLayout tanpa WidthRequest & HeightRequest:

<AbsoluteLayout>
    <Label Text="test" AbsoluteLayout.LayoutBounds="0,0,100,100" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin"
      AbsoluteLayout.LayoutBounds="0,150,500,500" />
</AbsoluteLayout>

Kisi tanpa WidthRequest & HeightRequest. Kisi adalah salah satu dari beberapa tata letak yang tidak memerlukan penentuan tinggi dan lebar yang diminta.:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Text="test" Grid.Row="0" />
    <WebView Source="https://dotnet.microsoft.com/apps/xamarin" Grid.Row="1" />
</Grid>

Memanggil JavaScript

WebView termasuk kemampuan untuk memanggil fungsi JavaScript dari C#, dan mengembalikan hasil apa pun ke kode C# panggilan. Hal ini dicapai dengan metode WebView.EvaluateJavaScriptAsync:

var numberEntry = new Entry { Text = "5" };
var resultLabel = new Label();
var webView = new WebView();
...

int number = int.Parse(numberEntry.Text);
string result = await webView.EvaluateJavaScriptAsync($"factorial({number})");
resultLabel.Text = $"Factorial of {number} is {result}.";

Metode WebView.EvaluateJavaScriptAsync mengevaluasi JavaScript yang ditentukan sebagai argumen, dan mengembalikan hasil apa pun sebagai string. Dalam contoh ini, factorial fungsi JavaScript dipanggil, yang mengembalikan faktorial number sebagai hasilnya. Fungsi JavaScript ini didefinisikan dalam file HTML lokal yang dimuat WebView , dan diperlihatkan dalam contoh berikut:

<html>
<body>
<script type="text/javascript">
function factorial(num) {
        if (num === 0 || num === 1)
            return 1;
        for (var i = num - 1; i >= 1; i--) {
            num *= i;
        }
        return num;
}
</script>
</body>
</html>

Cookie

Cookie dapat diatur pada WebView, yang kemudian dikirim dengan permintaan web ke URL yang ditentukan. Ini dicapai dengan menambahkan Cookie objek ke CookieContainer, yang kemudian ditetapkan sebagai nilai WebView.Cookies properti yang dapat diikat. Kode berikut menunjukkan contoh ini:

using System.Net;
using Xamarin.Forms;
// ...

CookieContainer cookieContainer = new CookieContainer();
Uri uri = new Uri("https://dotnet.microsoft.com/apps/xamarin", UriKind.RelativeOrAbsolute);

Cookie cookie = new Cookie
{
    Name = "XamarinCookie",
    Expires = DateTime.Now.AddDays(1),
    Value = "My cookie",
    Domain = uri.Host,
    Path = "/"
};
cookieContainer.Add(uri, cookie);
webView.Cookies = cookieContainer;
webView.Source = new UrlWebViewSource { Url = uri.ToString() };

Dalam contoh ini, satu Cookie ditambahkan ke CookieContainer objek, yang kemudian ditetapkan sebagai nilai WebView.Cookies properti. WebView Ketika mengirim permintaan web ke URL yang ditentukan, cookie dikirim dengan permintaan.

Penghentian UIWebView dan Penolakan App Store (ITMS-90809)

Mulai April 2020, Apple akan menolak aplikasi yang masih menggunakan API yang tidak digunakan UIWebView lagi. Meskipun Xamarin.Forms telah beralih sebagai WKWebView default, masih ada referensi ke SDK yang lebih lama di Xamarin.Forms biner. Perilaku linker iOS saat ini tidak menghapus ini, dan akibatnya API yang tidak UIWebView digunakan lagi akan tetap terlihat direferensikan dari aplikasi Anda saat Anda mengirimkan ke App Store.

Penting

Dalam Xamarin.Forms 5.0, WebViewRenderer kelas telah dihapus. Oleh karena itu, Xamarin.Forms 5.0 tidak berisi referensi ke UIWebView kontrol.

Versi pratinjau linker tersedia untuk memperbaiki masalah ini. Untuk mengaktifkan pratinjau, Anda harus menyediakan argumen --optimize=experimental-xforms-product-type tambahan ke linker.

Prasyarat agar ini berfungsi adalah:

  • Xamarin.Forms 4.5 atau lebih tinggi. Xamarin.Forms 4.6, atau lebih tinggi, diperlukan jika aplikasi Anda menggunakan Visual Material.
  • Xamarin.iOS 13.10.0.17 atau lebih tinggi. Periksa versi Xamarin.iOS Anda di Visual Studio. Versi Xamarin.iOS ini disertakan dengan Visual Studio untuk Mac 8.4.1 dan Visual Studio 16.4.3.
  • Hapus referensi ke UIWebView. Kode Anda tidak boleh memiliki referensi ke UIWebView atau kelas apa pun yang menggunakan UIWebView.

Untuk informasi selengkapnya tentang mendeteksi dan menghapus UIWebView referensi, lihat Penghentian UIWebView.

Mengonfigurasi linker

Ikuti langkah-langkah ini agar linker menghapus UIWebView referensi:

  1. Buka properti proyek iOS – Klik kanan proyek iOS Anda dan pilih Properti.
  2. Navigasi ke bagian Build iOS – Pilih bagian Build iOS.
  3. Perbarui argumen mtouch tambahan – Dalam argumen Mtouch tambahan tambahkan bendera --optimize=experimental-xforms-product-type ini (selain nilai apa pun yang mungkin sudah ada di sana). Catatan: bendera ini bekerja sama dengan Perilaku Linker yang diatur ke SDK Saja atau Tautkan Semua. Jika, karena alasan apa pun, Anda melihat kesalahan saat mengatur Perilaku Linker ke Semua, kemungkinan besar ini adalah masalah dalam kode aplikasi atau pustaka pihak ketiga yang tidak aman oleh linker. Untuk informasi selengkapnya tentang linker, lihat Menautkan Aplikasi Xamarin.iOS.
  4. Perbarui semua konfigurasi build – Gunakan daftar Konfigurasi dan Platform di bagian atas jendela untuk memperbarui semua konfigurasi build. Konfigurasi yang paling penting untuk diperbarui adalah konfigurasi Rilis/i Telepon, karena biasanya digunakan untuk membuat build untuk pengiriman App Store.

Anda dapat melihat jendela dengan bendera baru di tempat di cuplikan layar ini:

Mengatur bendera di bagian Build iOS

Sekarang ketika Anda membuat build (rilis) baru dan mengirimkannya ke App Store, seharusnya tidak ada peringatan tentang API yang tidak digunakan lagi.