Xamarin.Forms Webview
WebView
adalah tampilan untuk menampilkan konten web dan HTML di aplikasi Anda:
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 WebView
properti '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;
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:
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 DependencyService
tentukan 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:///";
}
}
}
Navigasi
WebView mendukung navigasi melalui beberapa metode dan properti yang disediakannya:
- GoForward() – jika
CanGoForward
benar, panggilan akanGoForward
diteruskan ke halaman yang dikunjungi berikutnya. - GoBack() – jika
CanGoBack
benar, panggilanGoBack
akan menavigasi ke halaman terakhir yang dikunjungi. - CanGoBack –
true
jika ada halaman yang akan dinavigasi kembali,false
jika browser berada di URL awal. - CanGoForward –
true
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!
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, menggunakanWebNavigationResult
anggota enumerasi. Nilai yang valid adalah:Cancel
,Failure
,Success
, danTimeout
.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):
Selesai Memuat:
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 HeightRequest
WidthRequest
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 keUIWebView
atau kelas apa pun yang menggunakanUIWebView
.
Untuk informasi selengkapnya tentang mendeteksi dan menghapus UIWebView
referensi, lihat Penghentian UIWebView.
Mengonfigurasi linker
Ikuti langkah-langkah ini agar linker menghapus UIWebView
referensi:
- Buka properti proyek iOS – Klik kanan proyek iOS Anda dan pilih Properti.
- Navigasi ke bagian Build iOS – Pilih bagian Build iOS.
- 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. - 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:
Sekarang ketika Anda membuat build (rilis) baru dan mengirimkannya ke App Store, seharusnya tidak ada peringatan tentang API yang tidak digunakan lagi.