Menggunakan 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 app store sistem operasi mereka. Dalam banyak kasus, pengguna tersebut sudah mengetahui merek atau layanan yang mereka cari dan memiliki tingkat niat yang tinggi sehingga menghasilkan metrik engagement yang lebih tinggi dari rata-rata.

Play Store adalah toko untuk aplikasi Android, dan developer sering ingin membuka Progressive Web Application 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 sedang dalam pengembangan di Firefox Nightly.

Solusi yang ada terbatas

Anda selalu dapat menyertakan pengalaman web dalam aplikasi Android, menggunakan teknologi seperti Android WebView atau framework seperti Cordova.

Batasan Android WebView adalah 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, di antara yang lainnya.

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

Selain itu, visibilitas fitur sering kali tidak selalu 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 jaminan kualitas tambahan dan menimbulkan biaya pengembangan tambahan 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 untuk 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 implementasi aplikasi Android menggunakan Aktivitas Web Tepercaya.

Keuntungan lain yang tidak tersedia di solusi lain adalah 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 menerapkannya di versi nightly.

Kriteria Kualitas

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

Konten web di Aktivitas Web Tepercaya harus memenuhi kriteria penginstalan PWA.

Selain itu, untuk mencocokkan perilaku yang diharapkan pengguna dari aplikasi Android, Chrome 86 memperkenalkan perubahan yang menganggap kegagalan dalam menangani skenario berikut sebagai error:

  • Gagal memverifikasi link aset digital saat peluncuran aplikasi.
  • Kegagalan untuk 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, hal ini akan menyebabkan error aplikasi Android yang terlihat oleh pengguna. Lihat panduan tentang cara menangani skenario tersebut di pekerja layanan Anda.

Aplikasi juga harus memenuhi kriteria khusus Android tambahan seperti kepatuhan 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).

Bootstraping project baru dilakukan dengan menjalankan alat dan meneruskan URL Manifes Web:

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

Alat ini juga dapat mem-build 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. File ini 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 menggabungkan PWA tersebut ke dalam 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 mem-build aplikasi Android dengan aplikasi tersebut tanpa izinnya. Untuk memastikan hal ini tidak terjadi, aplikasi Android harus disambungkan 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 kunci yang digunakan untuk menandatangani APK yang didownload oleh pengguna.

Kunci dapat dibuat dengan beberapa 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 tampilan aplikasi yang rusak kepada pengguna, deploy aplikasi ke saluran pengujian tertutup, instal ke perangkat pengujian, lalu gunakan Alat Penautan Aset Peter untuk membuat file assetlinks.json yang benar untuk aplikasi. Buat file assetlinks.json yang dihasilkan tersedia di /.well-known/assetlinks.json, di domain yang sedang divalidasi.

Langkah berikutnya

Progressive Web App adalah pengalaman web berkualitas tinggi. Aktivitas Web Tepercaya adalah cara baru untuk membuka pengalaman berkualitas tinggi tersebut dari aplikasi Android jika memenuhi kriteria kualitas minimum.

Jika Anda baru mulai menggunakan 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, upload aplikasi ke saluran pengujian tertutup di Play Store, dan sambungkan dengan PWA menggunakan Alat Link Aset Peter.

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