Menggunakan PWA di aplikasi Android

Memulai PWA di aplikasi Android

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

Web memiliki jangkauan yang luar biasa dan menawarkan cara yang ampuh bagi pengguna untuk menemukan pengalaman baru. Namun, pengguna juga terbiasa menelusuri aplikasi di penyimpanan sistem operasi mereka. Dalam banyak kasus, pengguna tersebut sudah memahami merek atau layanan yang mereka cari dan memiliki tingkat niat yang tinggi sehingga menghasilkan metrik engagement yang lebih tinggi daripada 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 sedang dalam pengembangan di Firefox Nightly.

Solusi yang ada dibatasi

Anda dapat menyertakan pengalaman web di aplikasi Android kapan saja menggunakan teknologi seperti Android WebView atau framework seperti Cordova.

Batasan pada 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 filesystem, antara lain.

Cordova dirancang untuk menambah kekurangan WebView, tetapi API tersebut kemudian dibatasi pada lingkungan Cordova. Artinya, Anda perlu mengelola 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 uji mutu tambahan dan mengeluarkan 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 seperti yang dilakukan browser dasarnya. Ada juga utilitas open source untuk semakin memudahkan penerapan aplikasi Android menggunakan Aktivitas Web Tepercaya.

Keuntungan lain yang tidak tersedia di solusi lain adalah bahwa container 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, dan Firefox menerapkannya dalam versi malamnya.

Kriteria Kualitas

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

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

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

  • Kegagalan dalam memverifikasi link aset digital saat aplikasi diluncurkan.
  • Kegagalan menampilkan HTTP 200 untuk permintaan resource jaringan offline.
  • Permintaan navigasi yang mengembalikan kesalahan 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 untuk menangani skenario tersebut di pekerja layanan Anda.

Aplikasi tersebut 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 akan ditampilkan apakah PWA Anda memenuhi 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. Bubblewrap dan PWABuilder bersama-sama menyediakan alat developer dalam bentuk library, Antarmuka Command Line (CLI), dan Antarmuka Pengguna Grafis (GUI).

Bungkus gelembung

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

Melakukan bootstrap pada project baru dapat 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 ini 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 sudah ada menjadi Progressive Web App. Versi ini juga terintegrasi dengan Bubblewrap untuk menyediakan antarmuka GUI guna menggabungkan PWA tersebut ke dalam aplikasi Android. Tim PWABuilder telah membuat postingan blog yang bagus tentang cara membuat aplikasi Android menggunakan alat tersebut.

Memverifikasi kepemilikan PWA di aplikasi Android

Pengembang yang membuat Progressive Web App yang hebat tidak ingin pengembang lain membangun aplikasi Android dengannya tanpa seizin mereka. 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 pada 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 sedang didownload oleh pengguna.

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

Agar tidak menampilkan aplikasi yang rusak kepada pengguna, deploy aplikasi ke saluran pengujian tertutup, instal aplikasi ke perangkat pengujian, lalu gunakan Alat Link Aset milik Peter untuk membuat file assetlinks.json yang benar untuk aplikasi tersebut. 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 dari aplikasi Android saat memenuhi kriteria kualitas minimum.

Jika Anda mulai menggunakan Progressive Web App, baca panduan kami tentang cara membuat PWA yang hebat. Untuk developer yang sudah memiliki PWA, gunakan Lighthouse untuk memverifikasi apakah PWA ini memenuhi kriteria kualitas.

Kemudian, gunakan Bubblewrap atau PWABuilder untuk membuat aplikasi Android, upload aplikasi ke saluran pengujian tertutup di Play Store, dan pasangkan dengan PWA menggunakan Alat Link Aset milik Peter.

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