Ada banyak alasan bagi developer untuk menghadirkan web ke Android: mungkin menggunakan kembali widget web di aplikasi Android, menggabungkan konten pihak pertama atau pihak ketiga, bahkan menghadirkan seluruh aplikasi web mereka ke platform. Apa pun kasus penggunaannya, Android memiliki banyak alat untuk mewujudkannya.
Berikut update terkini untuk alat ini. Contoh:
- Peningkatan privasi dan dukungan yang lebih baik untuk perangkat layar besar, seperti dukungan untuk tarik lalu lepas gambar di WebView.
- Tab Khusus kini mendukung tab khusus sebagian.
- Fitur terintegrasi untuk PWA, seperti UI Penginstalan Lebih Kaya dan Play Billing API di Aktivitas Web Tepercaya.
Mari kita selami dan pelajari lebih lanjut.
WebView
WebView adalah cara yang paling umum digunakan untuk menyematkan konten web ke dalam aplikasi Android, karena sebagian besar aplikasi Android menggunakan WebView. Ini adalah cara yang bagus untuk mengintegrasikan UI Web secara lancar dalam pengalaman aplikasi Android asli. Misalnya, Anda dapat menyematkan UI Web yang berbeda ke dalam aplikasi seperti iklan, widget, atau bahkan browser dalam aplikasi. Salah satu kekuatan terbesar WebView adalah API-nya yang kuat untuk mengontrol dan memodifikasi konten web yang sedang dimuat. Jadi, apa yang baru di WebView?
Header X-Request-With
Mari kita mulai dengan privasi dan penghentian header X-Request-With. Ketika pengguna menginstal dan menjalankan aplikasi yang menggunakan WebView untuk menyematkan konten web, WebView akan menambahkan header X-Request-With ke setiap permintaan yang dikirim ke server. Nilai header ini adalah nama APK aplikasi. Artinya, setiap permintaan menyertakan informasi spesifik tentang konteks tempat pengguna mengonsumsi konten web, dan membocorkan identitas aplikasi ke layanan online. Untuk melindungi privasi pengguna, tim WebView memulai uji coba penghentian penggunaan yang menghapus header ini dari semua permintaan WebView.
Namun, bagaimana jika aplikasi Anda mengandalkan header X-Request-With? Metode yang kami rekomendasikan adalah menggunakan API keikutsertaan baru yang memungkinkan Anda mengirim header permintaan secara selektif ke asal tertentu. Artinya, Anda mendapatkan yang terbaik dari kedua hal tersebut: Anda dapat terus mendukung fitur yang sudah ada yang dibuat berdasarkan header ini, sekaligus memastikan bahwa privasi pengguna tetap terjaga dalam semua kasus lainnya. Jika ingin mempertahankan perilaku yang sudah ada, Anda juga dapat mendaftar ke uji coba origin X-Request-With Deprecated.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Pengujian WebView
Topik berikutnya adalah pengujian. Jika Anda seorang developer web, dan situs Anda menerima banyak traffic dari WebView, ada dua update untuk Anda:
WebView kini mendukung uji coba origin Chrome. Uji coba origin memberi Anda akses ke fitur baru atau eksperimental di Chrome. Anda dapat menggunakannya untuk mencoba fitur baru sebelum fitur tersebut tersedia untuk semua orang. Hingga saat ini, uji coba origin hanya tersedia di Chrome desktop dan seluler, tetapi dimulai dengan Chrome M110, uji coba origin juga berfungsi di WebView.
Sekarang jauh lebih mudah untuk menginstal WebView Beta. Sebaiknya uji situs Anda menggunakan saluran WebView Beta untuk memastikan situs berfungsi dengan baik di versi WebView mendatang. Untuk melakukannya, bergabunglah dengan program pengujian Beta WebView di Google Play Store, dan perangkat Anda akan otomatis didaftarkan.
Dukungan perangkat layar besar
Tujuan kita adalah membuat WebView berfungsi dengan baik di perangkat layar besar. Satu langkah ke arah ini adalah WebView kini mendukung tarik lalu lepas gambar. Misalnya, dalam mode tampilan layar terpisah, Anda dapat menarik gambar dari WebView ke aplikasi lain.
Menambahkan {i>drag and drop<i} ke WebView sangat mudah: Anda hanya perlu mendeklarasikan DropDataProvider di AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Berbicara tentang perangkat layar besar, Chrome dan WebView di Android U akan hadir dengan dukungan penuh untuk tulisan tangan di kolom input teks HTML, dan dengan gestur input untuk menghapus teks atau menambahkan spasi. Dukungan tulisan tangan sudah tersedia untuk semua perangkat Samsung dengan One UI 5.1, seperti S23 Ultra. Untuk perangkat lain yang menggunakan Android T, Anda dapat mengaktifkan tulisan tangan dalam input HTML di bagian Opsi developer.
Mesin JavaScript Jetpack
Terkadang, Anda mungkin perlu menjalankan JavaScript di aplikasi tanpa harus menampilkan konten web apa pun; misalnya, saat berbagi logika bisnis di aplikasi web dan seluler. Untuk mempermudah, kami meluncurkan rilis alfa mesin JetPack JavaScript baru tahun lalu. Library ini menggunakan V8, mesin JavaScript Chrome, dan memungkinkan aplikasi Anda mengevaluasi kode JavaScript atau WebAssembly tanpa membuat instance WebView. Kelebihan mesin JavaScript baru adalah mesin ini mengeksekusi JavaScript Anda dalam proses yang berbeda, sehingga menjadikannya cara yang aman dan stabil untuk menjalankan JavaScript di aplikasi Anda. Ini juga memerlukan lebih sedikit resource daripada instance WebView.
ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…
Tab Kustom
WebView sangat bagus untuk mengintegrasikan UI Web ke dalam aplikasi Anda. Namun, bagaimana dengan mengizinkan pengguna menjelajahi konten web di aplikasi Anda?
Ini adalah kasus penggunaan yang bagus untuk Tab Khusus. Situs ini adalah cara yang aman dan mudah digunakan agar pengguna dapat melihat konten web di aplikasi Anda. Keuntungan besar mereka adalah pengguna tidak perlu login kembali ke situs favorit mereka. Ini karena server merupakan instance browser default pengguna dan cookie yang dibagikan, dan mereka menawarkan semua fitur platform web dan API yang didukung oleh browser yang mendukungnya.
Ini juga berarti bahwa jika browser default Anda adalah Chrome, tab kustom dibuka di Chrome; jika browser default Anda adalah Firefox, Custom Tab akan dibuka di Firefox. Sebagian besar browser utama di Android mendukung Tab Khusus, dan jika browser default tidak mendukung Tab Khusus, aplikasi browser akan terbuka.
Keunggulan Tab Khusus adalah Anda dapat menata gayanya agar sesuai dengan tampilan dan nuansa aplikasi Anda, menambahkan interaktivitas kustom melalui tindakan, dan toolbar Anda sendiri.
Tab Khusus Sebagian
Penyesuaian Tab Khusus mendapat upgrade besar dengan dukungan untuk Tab Khusus Parsial. Keduanya memungkinkan pengguna melakukan multitasking antara aplikasi dan web. Hingga saat ini, ketika menggunakan Tab Khusus, overlay tab browser akan menutupi seluruh layar. Sekarang Anda dapat mengontrol tinggi overlay Tab Khusus. Dengan cara ini, pengguna dapat berinteraksi dengan aplikasi dan konten web Anda secara bersamaan. Jika browser pengguna tidak mendukung Tab Khusus Sebagian, pengguna hanya akan melihat Tab Khusus layar penuh yang didukung.
Yang perlu Anda lakukan adalah terhubung ke Layanan Tab Khusus, meneruskan sesi ke CustomTabsBuilder, dan memanggil setActivityHeight.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
YouTube berhasil meluncurkan Tab Khusus inline yang dapat diubah ukurannya pada iklan respons langsung. Dengan cara ini, mereka dapat menerapkan cara baru untuk berinteraksi dengan iklan dan konten web tanpa mengganggu pengalaman organik di aplikasi.
Namun, bagaimana dengan tablet dan perangkat layar besar lainnya? Tim Chrome saat ini sedang mengerjakan pengalaman Tab Khusus yang baru secara berdampingan untuk mode lanskap dan perangkat layar besar. Dengan menentukan lebar tab maksimum, beserta titik henti sementara, pengalaman Tab Khusus akan otomatis beralih antara overlay sheet bawah dan pengalaman berdampingan. Fitur ini sudah tersedia dalam Canary dan akan diluncurkan sekitar Juli 2003. Jika Anda ingin mencobanya, lihat kode sumber aplikasi contoh Tab Khusus Chromium.
Mengukur sinyal interaksi
Update besar kedua pada Tab Khusus adalah mengukur engagement pengguna spesifik per sesi. Jika aplikasi Anda secara rutin menampilkan konten kepada pengguna termasuk link, misalnya, dalam feed berita, bukankah lebih bagus jika Anda dapat mengetahui link mana yang menurut pengguna berharga dan mana yang tidak? Informasi ini dapat sangat membantu untuk memprioritaskan link mana yang akan ditampilkan kepada pengguna.
Tim Chrome menambahkan visibilitas metrik khusus sesi ke Tab Khusus Chrome. Selain durasi pengguna tetap berada di halaman, Anda kini juga bisa mendapatkan visibilitas terkait jarak scroll, arah scroll, dan interaksi secara keseluruhan dengan konten web.
Sinyal interaksi tersedia mulai Chrome 114 dan memerlukan support library androidx.browser:browser:1.6.0-alpha01 atau yang lebih baru. Untuk mempelajari lebih lanjut, lihat panduan memulai sinyal interaksi.
PWA
Ada juga update di PWA—serangkaian teknologi yang memungkinkan untuk menciptakan pengalaman seperti aplikasi, dibangun dan di-deploy di web.
Dengan menggunakan PWA di Android, aplikasi web Anda dapat diinstal: aplikasi tersebut akan berada di sepanjang aplikasi platform lain, di layar utama, peluncur, setelan, dan platform lainnya.
Fitur PWA dibuat berdasarkan standar web; fitur ini berfokus pada kompatibilitas lintas platform, memberi developer alat untuk membangun aplikasi web sekali, dan memungkinkan pengguna untuk menginstalnya di perangkat apa pun yang mereka pilih. Membuat aplikasi web yang dapat diinstal tidak berarti Anda tidak dapat atau tidak dapat memiliki aplikasi Android asli, tetapi ini adalah opsi lain untuk menghadirkan web ke Android.
Mari kita lihat beberapa fitur yang membuat aplikasi web yang dapat diinstal terasa familier di Android.
Kami ingin mendorong pengguna untuk menginstal situs yang paling mereka sukai. Langkah pertama adalah menghapus pengendali pengambilan pekerja layanan sebagai persyaratan untuk penginstalan di Android dan Chrome. Selain itu, Chrome tidak akan memulai pekerja layanan jika pengendali pengambilan kosong. Chrome akan menjalankan eksperimen untuk memperluas akses penginstalan bagi pengguna. Nantikan kabar terbarunya dan harap berikan masukan.
Persyaratan pekerja layanan tersedia bagi developer untuk membuat pengalaman pengguna yang konsisten dengan aplikasi Android lainnya. Alat ini dapat digunakan untuk membuat halaman yang memberi tahu pengguna bahwa mereka tidak dapat menggunakan aplikasi saat offline.
Kami menyadari bahwa kami dapat meringankan beban kerja developer, dan memastikan bahwa aplikasi ini memberikan pengalaman penginstalan yang baik sejak awal. Itulah sebabnya Chrome menambahkan pengalaman offline default yang menampilkan layar dengan ikon aplikasi kepada pengguna, yang memberi tahu pengguna bahwa mereka sedang offline, tanpa memerlukan pekerjaan tambahan dari developer.
Tentu saja, API pekerja layanan masih tersedia untuk membangun pengalaman offline kustom dan mengimplementasikan fitur lain seperti penyimpanan dalam cache untuk meningkatkan performa.
Beberapa fitur lain yang dapat menghadirkan pengalaman aplikasi web yang disempurnakan untuk Android meliputi Richer Install UI. Dengan menambahkan kolom description dan screenshots ke manifes web, pengguna akan mendapatkan pengalaman penginstalan yang lebih dekat dengan app store yang ditampilkan untuk mendeskripsikan aplikasi Anda.
Kita juga memiliki pintasan. Dengan menambahkan array bernama shortcuts yang menjelaskan kumpulan tindakan cepat yang sering dilakukan pengguna di aplikasi Anda, mereka akan dapat mengakses tindakan ini dengan menekan lama ikon aplikasi.
Dengan menggunakan Web Share dan Web Share Target API, aplikasi Anda dapat berinteraksi dengan aplikasi lain, seperti aplikasi platform lainnya. Aplikasi Anda akan menjadi opsi di sheet berbagi, dan dapat berbagi serta menerima foto, teks, dan file lainnya.
Anda dapat melihat diskusi I/O “Web: Platform Anda untuk pertumbuhan” untuk mendapatkan informasi lebih lanjut tentang cara bisnis memanfaatkan teknologi ini.
Aktivitas Web Tepercaya
Cara lain untuk menghadirkan web ke Android adalah menggunakan Aktivitas Web Tepercaya (TWA).
TWA adalah cara terbaik untuk menampilkan konten web pihak pertama dalam layar penuh di aplikasi Anda. Ini adalah solusi ideal bagi developer yang ingin menggabungkan aplikasi web mereka sebagai aplikasi Android, atau menggunakan situs mereka sebagai bagian dari aplikasi tersebut.
Perhatikan bahwa TWA terdengar seperti benar-benar terkait dengan PWA, tetapi sebenarnya tidak. Ya, dengan menggunakan TWA Anda dapat memublikasikan aplikasi web yang dapat diinstal ke Google Play, tetapi Anda juga dapat membuat satu aktivitas di web dan menyertakannya di aplikasi Android.
Aktivitas Web Tepercaya dirender oleh browser pengguna dengan cara yang sama persis seperti yang akan dilihat pengguna di browser mereka, kecuali jika dijalankan dalam layar penuh dan tidak menampilkan kolom URL. Hal ini berarti bahwa API tersebut mendukung semua fitur platform web dan API yang didukung oleh browser yang mendukungnya.
Beberapa keuntungan dari menggabungkan aplikasi web Anda menggunakan TWA adalah:
Memublikasikan ke Google Play, yang memberi aplikasi Anda akses ke visibilitas dan distribusi Google Play. Memiliki akses ke Play Billing API, yang memungkinkan developer mengelola penjualan produk digital di aplikasi mereka, sehingga mempermudah penyiapan produk, penjualan, langganan, dan lainnya. Mendelegasikan notifikasi dan izin geolokasi ke aplikasi Android, bukan situs.
Lihat artikel ini untuk mempelajari lebih lanjut cara ContactsDirect menggunakan TWA demi memberikan manfaat bagi pengguna dan meningkatkan rasio konversi mereka tiga kali lipat.
Kesimpulan
Seperti yang Anda lihat, ada banyak opsi berbeda yang tersedia untuk menyematkan konten web ke dalam aplikasi dan semua opsi ini terus ditingkatkan.