Ada banyak alasan bagi developer untuk membawa 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 adalah update terbaru 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 Richer Install UI dan Play billing API di Trusted Web Activities.
Mari kita 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 ke dalam pengalaman aplikasi Android native. 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 canggih untuk mengontrol dan mengubah 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. Saat 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 saat 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-Requested-With? Metode yang kami rekomendasikan adalah menggunakan API keikutsertaan baru yang memungkinkan Anda mengirim header permintaan ke origin tertentu secara selektif. Artinya, Anda mendapatkan yang terbaik dari kedua hal tersebut: Anda dapat terus mendukung fitur yang ada yang dibuat di atas header ini, sekaligus memastikan bahwa privasi pengguna dipertahankan dalam semua kasus lainnya. Jika ingin mempertahankan perilaku yang ada, Anda juga dapat mendaftar ke uji coba origin X-Request-With Penghentian.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Pengujian WebView
Topik berikutnya adalah pengujian. Jika Anda adalah developer web, dan situs Anda menerima banyak traffic dari WebView, ada dua pembaruan 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 mulai Chrome M110, uji coba origin juga berfungsi di WebView.
Sekarang, menginstal WebView Beta jauh lebih mudah. Sebaiknya uji situs Anda menggunakan saluran WebView Beta untuk memastikan situs Anda berfungsi dengan baik di versi WebView mendatang. Untuk melakukannya, bergabunglah dengan program pengujian WebView Beta di Google Play Store, dan perangkat Anda akan otomatis terdaftar.
Dukungan perangkat layar besar
Sasaran kami adalah membuat WebView berfungsi dengan baik di perangkat layar besar. Salah satu langkah dalam 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.
Sangat mudah untuk menambahkan tarik lalu lepas ke WebView: 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 dilengkapi 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.
Jetpack JavaScript Engine
Terkadang, Anda mungkin perlu menjalankan JavaScript di aplikasi tanpa harus menampilkan konten web apa pun; misalnya, saat membagikan logika bisnis di seluruh aplikasi web dan seluler. Untuk mempermudah hal ini, kami meluncurkan rilis alfa mesin JavaScript JetPack baru tahun lalu. Library ini menggunakan V8, mesin JavaScript Chrome, dan memungkinkan aplikasi Anda mengevaluasi kode JavaScript atau WebAssembly tanpa membuat instance WebView. Keunggulan mesin JavaScript baru adalah mesin ini mengeksekusi JavaScript dalam proses yang berbeda, sehingga menjadi cara yang aman dan stabil untuk menjalankan JavaScript di aplikasi Anda. Mesin 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 cocok untuk mengintegrasikan UI Web ke dalam aplikasi Anda. Namun, bagaimana cara mengizinkan pengguna menjelajahi konten web di aplikasi Anda?
Ini adalah kasus penggunaan yang bagus untuk Tab Kustom. Ini adalah cara yang aman dan mudah digunakan untuk memungkinkan pengguna melihat konten web di aplikasi Anda. Keuntungan utamanya adalah pengguna tidak perlu login kembali ke situs favorit mereka. Hal ini karena keduanya merupakan instance dari browser dan cookie default pengguna yang dibagikan, serta menawarkan semua fitur dan API platform web yang didukung oleh browser yang mendukungnya.
Hal ini juga berarti bahwa jika browser default Anda adalah Chrome, tab kustom akan dibuka di Chrome; jika browser default Anda adalah Firefox, Tab Kustom 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, menambahkan interaktivitas kustom melalui tindakan, dan toolbar Anda sendiri.
Tab Kustom Sebagian
Penyesuaian Custom Tabs mendapatkan upgrade besar dengan dukungan untuk Custom Tabs Sebagian. Memungkinkan pengguna melakukan beberapa hal sekaligus antara aplikasi dan web. Hingga saat ini, saat menggunakan Tab Kustom, overlay tab browser akan menutupi seluruh layar. Sekarang Anda dapat mengontrol tinggi overlay Tab Kustom. Dengan cara ini, pengguna dapat berinteraksi dengan aplikasi dan konten web Anda secara bersamaan. Jika browser pengguna Anda tidak mendukung Tab Khusus Parsial, pengguna hanya akan melihat Tab Khusus layar penuh yang didukung.
Yang perlu Anda lakukan adalah terhubung ke Layanan Tab Kustom, 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 Kustom berdampingan baru untuk mode lanskap dan perangkat layar besar. Dengan menentukan lebar tab maksimum, bersama dengan titik henti sementara, pengalaman Tab Kustom akan otomatis beralih antara overlay sheet bawah dan pengalaman berdampingan. Fitur ini sudah tersedia di Canary dan akan diluncurkan sekitar Juli 2003. Jika Anda ingin mencobanya, lihat kode sumber aplikasi contoh Tab Khusus Chromium.
Mengukur sinyal engagement
Pembaruan besar kedua pada Tab Khusus adalah mengukur engagement pengguna khusus sesi. Jika aplikasi Anda secara rutin menampilkan konten kepada pengguna dengan menyertakan link, misalnya, di feed berita, bukankah akan lebih baik jika Anda dapat mengetahui link mana yang dianggap berharga dan mana yang tidak menurut pengguna? Informasi ini dapat sangat membantu dalam memprioritaskan link yang akan ditampilkan kepada pengguna.
Tim Chrome menambahkan visibilitas metrik khusus sesi ke Tab Khusus Chrome. Selain durasi pengguna berada di halaman, kini Anda juga dapat melihat jarak scroll, arah scroll, dan interaksi secara keseluruhan dengan konten web.
Sinyal engagement tersedia mulai Chrome 114 dan memerlukan library dukungan androidx.browser:browser:1.6.0-alpha01 atau yang lebih baru. Untuk mempelajari lebih lanjut, lihat panduan memulai sinyal engagement.
PWA
Ada juga update di PWA—sekumpulan teknologi yang memungkinkan untuk menciptakan pengalaman mirip aplikasi, yang dibangun dan di-deploy di web.
Dengan menggunakan PWA di Android, aplikasi web Anda dapat diinstal: aplikasi akan berjalan bersama aplikasi platform lainnya, di layar utama, peluncur, setelan, dan platform lainnya.
Fitur PWA dibuat berdasarkan standar web; fitur ini berfokus pada kompatibilitas lintas platform, sehingga memberi developer alat untuk mem-build aplikasi web sekali, dan memungkinkan pengguna menginstalnya di perangkat mana pun yang mereka pilih. Mem-build aplikasi web yang dapat diinstal bukan berarti Anda tidak boleh atau tidak dapat memiliki aplikasi Android native, tetapi ini adalah opsi lain untuk menghadirkan web ke Android.
Mari kita lihat beberapa fitur yang membuat aplikasi web yang dapat diinstal terasa seperti di Android.
Kami ingin memberi pengguna kemampuan untuk menginstal situs yang paling mereka minati. Langkah pertama adalah menghapus pengendali pengambilan pekerja layanan sebagai persyaratan untuk penginstalan di Android dan Chrome. Selain itu, Chrome akan melewati memulai pekerja layanan jika pengendali pengambilan kosong. Chrome akan menjalankan eksperimen untuk memperluas akses ke penginstalan bagi pengguna. Perhatikan hal tersebut dan berikan masukan.
Persyaratan pekerja layanan ada bagi developer untuk membuat pengalaman pengguna yang konsisten dengan aplikasi Android lainnya. Fungsi 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 mengapa 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 membuat pengalaman offline kustom dan menerapkan fitur lain seperti penyimpanan dalam cache untuk meningkatkan performa.
Beberapa fitur lain yang dapat menghadirkan pengalaman aplikasi web yang lebih baik ke Android mencakup UI Penginstalan yang Lebih Kaya. Dengan menambahkan kolom description dan screenshots ke manifes web, pengguna akan mendapatkan pengalaman penginstalan yang lebih mirip dengan yang ditampilkan app store untuk mendeskripsikan aplikasi Anda.
Kami juga memiliki pintasan. Dengan menambahkan array bernama shortcuts yang menjelaskan serangkaian tindakan cepat yang sering dilakukan pengguna di aplikasi Anda, mereka akan dapat mengakses tindakan ini dengan menekan lama ikon aplikasi.
Dengan menggunakan API Web Share dan Web Share Target, 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 pembahasan I/O “Web: Platform Anda untuk pertumbuhan” untuk mengetahui informasi selengkapnya 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. TWA adalah solusi ideal bagi developer yang ingin menggabungkan aplikasi web mereka sebagai aplikasi Android, atau menggunakan situs mereka sebagai bagian dari aplikasi.
Perhatikan bahwa TWA terdengar seperti sangat 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 mem-build 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. Artinya, API ini mendukung semua fitur dan API platform web yang didukung oleh browser yang menjalankannya.
Beberapa keuntungan menggabungkan aplikasi web 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.
Baca artikel ini untuk mempelajari lebih lanjut cara ContactsDirect menggunakan TWA untuk menguntungkan penggunanya dan melipatgandakan rasio konversinya.
Kesimpulan
Seperti yang telah Anda lihat, ada banyak opsi yang tersedia untuk menyematkan konten web ke dalam aplikasi Anda dan semua opsi ini terus ditingkatkan.