Menggunakan PWA di aplikasi Android

Mulai PWA di aplikasi Android

Progressive Web App (PWA) adalah aplikasi web yang menggunakan fitur mirip aplikasi untuk menciptakan pengalaman berkualitas tinggi yang cepat, andal, dan menarik.

Web memiliki jangkauan yang luar biasa dan menawarkan cara yang efektif bagi pengguna untuk menemukan pengalaman baru. Namun, pengguna juga terbiasa menelusuri aplikasi di toko sistem operasi mereka. Pengguna tersebut, dalam banyak kasus, sudah familiar dengan merek atau layanan yang mereka cari dan memiliki tingkat niat yang tinggi yang menghasilkan metrik engagement yang lebih tinggi dari rata-rata.

Play Store adalah toko untuk aplikasi Android, dan developer sering kali ingin membuka Progressive Web App dari aplikasi Android mereka.

Aktivitas Web Tepercaya adalah standar terbuka yang memungkinkan browser menyediakan penampung yang sepenuhnya kompatibel dengan platform web yang merender PWA di dalam aplikasi Android. Fitur ini tersedia di Chrome, dan dalam pengembangan di Firefox Nightly.

Solusi yang ada terbatas

Selalu memungkinkan untuk menyertakan pengalaman web dalam aplikasi Android, menggunakan teknologi seperti Android WebView atau framework seperti Cordova.

Batasan pada Android WebView adalah bahwa WebView tidak dimaksudkan sebagai pengganti browser. Android WebView adalah alat developer untuk menggunakan UI web di aplikasi Android dan tidak memberikan akses lengkap ke fitur platform web modern seperti pemilih kontak, atau sistem file, dan lain-lain.

Cordova dirancang untuk mengatasi kekurangan WebView, tetapi API kemudian dibatasi untuk lingkungan Cordova. Artinya, Anda perlu mengelola codebase tambahan untuk menggunakan Cordova API untuk aplikasi Android, terpisah dari PWA Anda di web terbuka.

Selain itu, kemampuan menemukan fitur sering kali tidak berfungsi seperti yang diharapkan dan masalah kompatibilitas antara versi Android dan OEM juga dapat menjadi masalah. Saat menggunakan salah satu solusi tersebut, developer memerlukan proses penjaminan kualitas tambahan dan menimbulkan biaya pengembangan ekstra untuk mendeteksi dan membuat solusi.

Aktivitas Web Tepercaya adalah penampung baru untuk aplikasi Web di Android

Developer kini dapat menggunakan Aktivitas Web Tepercaya sebagai penampung untuk menyertakan PWA sebagai aktivitas peluncuran aplikasi Android. Teknologi ini memanfaatkan browser untuk merender PWA dalam layar penuh, sehingga memastikan Aktivitas Web Tepercaya memiliki kompatibilitas yang sama dengan fitur dan API Platform Web yang dimiliki browser yang mendasarinya. Ada juga utilitas open source untuk mempermudah penerapan aplikasi Android menggunakan Aktivitas Web Tepercaya.

Keuntungan lain yang tidak tersedia di solusi lain adalah bahwa penampung berbagi penyimpanan dengan browser. Status login dan preferensi pengguna dibagikan dengan lancar di seluruh pengalaman.

Kompatibilitas Browser

Fitur ini telah tersedia di Chrome sejak versi 75, dengan Firefox mengimplementasikannya di versi malamnya.

Kriteria Kualitas

Developer web harus menggunakan Aktivitas Web Tepercaya jika ingin menyertakan konten web dalam aplikasi Android.

Konten web dalam Aktivitas Web Tepercaya harus memenuhi kriteria kemampuan penginstalan PWA.

Selain itu, agar sesuai dengan perilaku yang diharapkan pengguna dari aplikasi Android, Chrome 86 memperkenalkan perubahan yang menganggap kegagalan menangani skenario berikut sebagai error:

  • Gagal memverifikasi link aset digital saat peluncuran aplikasi.
  • Gagal menampilkan HTTP 200 untuk permintaan resource jaringan offline.
  • Permintaan navigasi yang menampilkan error HTTP 404 atau 5xx".

Jika salah satu skenario tersebut terjadi di Aktivitas Web Tepercaya, aplikasi Android akan mengalami error yang terlihat oleh pengguna. Lihat panduan tentang cara menangani skenario tersebut di pekerja layanan Anda.

Aplikasi juga harus memenuhi kriteria tambahan khusus Android seperti kepatuhan terhadap kebijakan.

Screenshot yang menampilkan skor Lighthouse untuk AirHorn, dengan badge PWA dan skor performa 100.
Badge PWA di Lighthouse menunjukkan apakah PWA Anda lulus kriteria kemampuan penginstalan.

Alat

Developer web yang ingin memanfaatkan Aktivitas Web Tepercaya tidak perlu mempelajari teknologi atau API baru untuk mengubah PWA mereka menjadi Aplikasi Android. Bersama-sama, Bubblewrap dan PWABuilder menyediakan alat developer dalam bentuk library, Antarmuka Command Line (CLI), dan Antarmuka Pengguna Grafis (GUI).

Plastik gelembung

Project Bubblewrap menghasilkan aplikasi Android dalam bentuk library NodeJS dan Antarmuka Command Line (CLI).

Memulai project baru dilakukan dengan menjalankan alat dan meneruskan URL Web Manifest:

npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json

Alat ini juga dapat membangun project, dan menjalankan perintah di bawah akan menghasilkan aplikasi Android yang siap diupload ke Play Store:

npx @bubblewrap/cli build

Setelah menjalankan perintah ini, file bernama app-release-signed.apk akan tersedia di direktori root untuk project. Ini adalah file yang akan diupload ke Play Store.

PWABuilder

PWABuilder membantu developer mengubah situs yang ada menjadi Progressive Web App. PWABuilder juga terintegrasi dengan Bubblewrap untuk menyediakan antarmuka GUI guna membungkus PWA tersebut menjadi aplikasi Android. Tim PWABuilder telah menyusun postingan blog yang bagus tentang cara membuat aplikasi Android menggunakan alat ini.

Memverifikasi kepemilikan PWA di aplikasi Android

Developer yang membuat Progressive Web App yang bagus tidak ingin developer lain membuat aplikasi Android dengan PWA tersebut tanpa izinnya. Untuk memastikan hal ini tidak terjadi, aplikasi Android harus dipasangkan dengan Progressive Web App menggunakan alat yang disebut Digital Asset Links.

Bubblewrap dan PWABuilder menangani konfigurasi yang diperlukan di aplikasi Android, tetapi masih ada langkah terakhir, yaitu menambahkan file assetlinks.json ke PWA.

Untuk membuat file ini, developer memerlukan tanda tangan SHA-256 dari kunci yang digunakan untuk menandatangani APK yang didownload oleh pengguna.

Kunci dapat dibuat dengan berbagai cara, dan cara termudah untuk menemukan kunci yang menandatangani APK yang ditayangkan kepada pengguna akhir adalah dengan mendownloadnya dari Play Store itu sendiri.

Untuk menghindari penayangan aplikasi yang rusak kepada pengguna, deploy aplikasi ke saluran pengujian tertutup, instal ke perangkat pengujian, lalu gunakan Peter's Asset Link Tool untuk membuat file assetlinks.json yang benar untuk aplikasi. Sediakan file assetlinks.json yang dibuat di /.well-known/assetlinks.json, di domain yang divalidasi.

Langkah berikutnya

Aplikasi Web Progresif adalah pengalaman web berkualitas tinggi. Aktivitas Web Tepercaya adalah cara baru untuk membuka pengalaman berkualitas tinggi tersebut dari aplikasi Android saat memenuhi kriteria kualitas minimum.

Jika Anda baru memulai Progressive Web App, baca panduan kami tentang cara membuat PWA yang bagus. Untuk developer yang sudah memiliki PWA, gunakan Lighthouse untuk memverifikasi apakah PWA tersebut memenuhi kriteria kualitas.

Kemudian, gunakan Bubblewrap atau PWABuilder untuk membuat aplikasi Android, mengupload aplikasi ke saluran pengujian tertutup di Play Store dan menyandingkannya dengan PWA menggunakan Peter's Asset Link Tool.

Terakhir, pindahkan aplikasi Anda dari saluran pengujian tertutup ke produksi.