pwa native hybride 1200x900 1.jpg pwa native hybride 1200x900 1.jpg

Tutorial membuat wordPress menjadi Android APK

Tidak dapat dipungkiri, pengunjung website kebanyakan berasal dari perangkat seluler, karena sangat praktis untuk dibawa serta dapat membuka konten dimana saja.

Dengan semakin banyaknya pengguna, mau tidak mau pengelola web harus menjadikan website mereka nyaman digunakan oleh pengguna perangkat seluler. Mulai dari menggunakan tema yang responsif; yaitu tema yang dapat menyesuaikan tampilan sesuai perangkat. Penggunaan AMP dan PWA pun semakin meningkat belakangan ini.

c67c0ad8

Dikutip dari Think With Google berdasarkan data dari Google Analytics di Amerika Serikat pada Q1 2016, lebih dari 50% pengunjung web berasal dari perangkat seluler. Hal ini merupakan tanda bahwa penggunaan perangkat seluler makin meningkat dari waktu ke waktu.

Mengapa Android APK?

Kami memilih aplikasi Android dengan format APK sebagai contoh pada tutorial ini, karena perangkat Android digunakan secara luas, jadi distribusi aplikasi akan cukup mudah.

Metode pembuatan aplikasi

Pengenalan TWA

Trusted Web Activity (TWA) yaitu modifikasi dari PWA yang memanfaatkan browser Chrome dalam layar penuh di aplikasi Android, artinya tidak ada UI browser yang terlihat di aplikasi, termasuk bilah URL. Sehingga pengguna dapat merasakan pengalaman seperti aplikasi native dengan UI khas Android.

Untuk memverifikasi bahwa aplikasi dan web yang dibuka di TWA milik pengembang yang sama, TWA menggunakan Digital Asset Links untuk mengesahkan kepemilikan.

Dikutip dari Chromium Blog, TWA menggunakan Chrome Custom Tab (CCT), sehingga memiliki akses ke semua fitur dan fungsionalitas Chrome termasuk banyak yang tidak tersedia untuk WebView. Beberapa fitur TWA yang tidak tersedia di WebView termasuk push notifications, background sync, Chrome form autofill, Media Source Extensions (MSE) dan Sharing API.

Instalasi PWA for WP

Sebelum membuat TWA, langkah pertama yang harus dilakukan yaitu menambahkan dan mengaktifkan plugin PWA for WP. Plugin ini berfungsi sebagai generator manifest dan data yang nantinya akan digunakan oleh TWA.

fec5fa7c

Plugin ini memiliki fitur yang cukup lengkap walaupun bukan versi gratis; pada versi berbayar, lebih banyak fitur yang dapat Anda gunakan.

2345dad0

Setelah diunduh, aktifkan plugin dan konfigurasikan PWA Anda di pengaturan plugin.

Fitur-fitur PWA for WP

Dashboard

Pada pengaturan ini, terdapat opsi untuk mengaktifkan PWA, pengecekan Manifest, Service Worker dan HTTPS.

d7453e06

Setup

Pada tab ini, Anda akan menemukan dua opsi, yaitu General dan Design. Pada tab General, Anda dapat mengatur logo, nama aplikasi dan masih banyak lagi.

3a8d3401

Pada bagian Design, Anda dapat mengatur warna background dan tema sesuai keinginan.

159837a7

Features

Tab ini berisi fitur yang cukup penting untuk aplikasi PWA Anda, mulai dari fitur gratis sampai berbayar.

643af229

Beberapa fitur yang tersedia diantaranya Push notification yang dapat menampilkan notifikasi secara otomatis di aplikasi Anda ketika posting baru diterbitkan.

Langkah yang perlu Anda lakukan untuk mengaktifkan fitur ini yaitu mengaktifkan slider abu-abu menjadi warna hijau. Kemudian pilih metode notifikasi yang Anda inginkan.

b5e4b333

Apabila Anda memilih FCM push notification, buatlah proyek baru di Google Firebase untuk menggunakan fitur ini; opsi ini mungkin dikenakan biaya. Alternatif lain, Anda dapat menggunakan metode lainnya yaitu dengan plugin Push Notification yang gratis, Anda akan diminta untuk memasang dan mengaktifkan plugin ini sebelum dapat menggunakannya.

Anda cukup membuat akun di PushNotification.io untuk mendapatkan kunci API yang nantinya akan digunakan di WordPress Anda.

7837a214

Setelah membuat akun, langkah selanjutnya yaitu pergi ke Setting dengan cara mengklik nama Anda > Setting. Di sebelah kanan Anda akan tampil widget API Settings yang berisi Token (kunci API), nama dan email Anda.

3b73cdc4

Setelah Anda menyalin token atau kunci API tadi, Anda dapat menempelkannya di plugin Push Notification.

462162d4

Setelah memasukkan kunci API atau token dari PushNotification.io, Anda akan melihat sejumlah opsi lanjutan dari plugin ini, salah satunya melihat orang yang berlangganan ke push notification Anda. Selain itu, Anda juga dapat membuat notifikasi kustom.

c60379cd
2648b967
d02c4981

Tools

Pada tab ini, Anda dapat melakukan reset pengaturan plugin PWA for WP menjadi default, juga dapat mengatur kompatibilitas plugin dengan layanan push notification lain semisal OneSignal dan Pushnami.

d4d9b4d4
c7dd58c9

Advanced

Tab ini merupakan opsi tingkat lanjut; hanya gunakan apabila Anda mengerti kegunaan masing-masing opsinya. Karena terkadang mengaktifkan salah satu fitur tersebut malah terjadi error.

2056b5d3

Premium Features

Opsi pada tab ini hanya berfungsi apabila Anda telah berlangganan paket premium. Fitur-fiturnya cukup lengkap dan dapat membantu Anda yang tidak ingin repot dan tidak suka membuang waktu.

37afb8db

Help

Tab bantuan ini merupakan opsi tambahan yang sebenarnya cukup membantu, apabila Anda menemukan kerusakan atau ada fitur yang tidak berfungsi dengan baik. Anda dapat menghubungi pengembang dari tab ini.

41f52cbd

Membuat APK dengan PWABuilder

Raksasa teknologi Microsoft dan Google mendorong aplikasi web progresif (PWA) sebagai standar untuk toko aplikasi mereka. Mereka menginginkan web menjadi aplikasi native yang dapat meningkatkan kenyamanan dan pengalaman pengguna. Kerjasama ini menghasilkan alat web gratis yang dinamakan PWABuilder. Alat mengikuti standar open source, serta menyimpan kode mereka di GitHub.

4af33afb

Anda mungkin ingin menambahkan beberapa fitur seperti fitur login OAuth, Anda dapat mendapatkannya melalui Feature Store. Terdapat beberapa fitur lainnya yang mungkin berguna untuk Anda.

Langkah pertama yang harus Anda lakukan adalah masukkan alamat website Anda pada kolom yang tersedia. Pada pengujian ini, kami menggunakan alamat maucariapa-labs.my.id.

7b167df3

Catatan: Alamat web pada pengujian adalah web internal kami, untuk uji coba langsung. Silakan gunakan alamat web Anda.

Setelah menuliskan alamat web yang akan dijadikan PWA, klik Start dan tunggu hasil scan dari PWABuilder apakah web Anda telah memenuhi standar PWA atau belum.

6bbd7ee4

Apabila web Anda telah memenuhi standar PWA, Anda akan melihat skor PWA web Anda apakah dapat melanjutkan ke langkah selanjutnya atau tidak.

4dacdc76

Berhasil! Skor web untuk pengujian telah memenuhi syarat PWA walaupun ada beberapa kekurangan, namun hal itu dapat diperbaiki nanti.

96dd626b

Pada bagian RECOMMENDED, terdapat beberapa bidang yang ditandai dengan simbol ✓ dan x. Anda dapat memperbaiki beberapa bidang diatas dengan mengklik Edit your manifest.

42fca72e

Sedangkan untuk SERVICE WORKER, Anda dapat memperbaiki bidang yang ditandai x dengan mengklik Browse service worker recipes. Tim PWABuilder telah menyiapkan beberapa pra-konfigurasi siap pakai yang tinggal dipasang di web Anda. Namun perlu diingat, opsi ini bukan untuk pemula karena mungkin akan menimbulkan kegagalan atau error.

6561dfae

Semua bidang pada bagian SECURITY berasal dari web Anda, PWA tidak menginginkan koneksi tidak aman melalui HTTP atau koneksi tercampur antara HTTP dan HTTPS yang biasa dikenal dengan mixed content. Selain itu, PWA juga mewajibkan Anda memiliki sertifikat SSL yang aktif.

Apabila semua konfigurasi telah benar dan Anda merasa skor yang ada cukup untuk membuat aplikasi Android. Langkah selanjutnya klik Build My PWA.

1315efed

Setelah mengklik Build My PWA, Selanjutnya Anda dapat memilih jenis aplikasi yang diinginkan.

8896e4f9

Anda dapat membuat aplikasi PWA murni, aplikasi Android untuk semua perangkat (umum) dan khusus perangkat Samsung. Selain itu Anda dapat membuat aplikasi untuk OS Windows.

Pada pengujian ini, kami memilih Aplikasi Android untuk semua perangkat.

b043c939

Setelah memilih jenis aplikasi, Anda dapat langsung mengunduh atau mengatur opsi lanjutan. Pada pengujian ini, kami coba menggunakan opsi lanjutan dengan mengklik Options.

a4b8592e

Pada opsi lanjutan ini, Anda dapat menyetel beberapa pengaturan seperti mode tampilan, pintasan, warna, dan lain-lain.

Selain itu, Anda juga dapat menyertakan kode sumber dengan mencentang pilihan Include source code. Selanjutnya Anda dapat mengatur keystore beserta kata sandi yang nantinya dapat digunakan untuk keperluan upload ke Google Play Store. Tanpa keystore, aplikasi Anda tidak dapat diperbarui secara langsung dari Google Play Store.

643bd62f

Pada bagian Signing Key, Anda dapat mengisi semua bidang yang ada; namun Anda harus mengingat kata sandi yang digunakan untuk proses upload di Google Play.

Setelah semuanya selesai, klik tombol Done di bagian bawah. PWABuilder akan kembali ke halaman unduhan dan Anda dapat mengunduh file aplikasi Anda.

98272fbd

Proses unduhan memakan waktu 1-3 menit namun dapat lebih dari itu pada beberapa kasus, hal ini dapat diakibatkan karena koneksi internet, besarnya file yang diunduh dan faktor lainnya.

File yang diunduh berbentuk .zip, Anda dapat mengekstraknya dan hasilnya akan tampak seperti gambar dibawah ini.

219a7f1e

Pada gambar diatas, terdapat beberapa file penting yaitu file dengan ekstensi apk, aab, .keystore dan .json. File MauCariApa.com Labs.aab dapat Anda gunakan untuk mengupload aplikasi Anda di Google Play, sedangkan signing.keystore digunakan untuk mengamankan dan memverifikasi kepemilikan aplikasi.

Anda dapat menyesuaikan nama aplikasi sesuai keinginan Anda pada opsi lanjutan yang telah dijelaskan diatas.

Dikutip dari web Android Developer, Google Play saat ini merekomendasikan pengembang mengupload Android App bundle (.aab) daripada APK (.apk). Dan terhitung mulai Agustus 2021, semua aplikasi baru yang di upload ke Google Play diwajibkan menggunakan format Android App Bundle (.aab).

Aktivasi mode TWA

File assetlinks.json yang telah diunduh tadi akan digunakan untuk menampilkan mode TWA (Trusted Web Activity). Nantinya, file ini akan diunggah ke WordPress Anda.

Tips: Anda dapat mengupload file assetlinks.json ini di folder .well-known pada root folder web Anda.

Sesuaikan root folder web dengan konfigurasi Anda, biasanya root folder ada di folder html atau public_html, namun mungkin saja berbeda.

Anda dapat membuat folder .well-known secara manual apabila tidak root folder web Anda tidak memilikinya.

9a0667ff

Setelah membuat folder tersebut, Anda dapat mengupload file assetlinks.json tadi di dalam folder tersebut. Kemudian restart server web Anda untuk menerapkan perubahan yang telah dibuat.

Setelah server web di restart, verifikasi penempatan file apakah bisa dipanggil atau tidak. Silakan kunjungi web Anda, misalnya maucariapa-labs.my.id/.well-known/assetlinks.json.InfoWarningTip

Untuk pengujian Anda, silakan gunakan alamat web milik Anda

c2cc1358

Jika pemanggilan file sukses, maka Anda dapat melihat isi dari file assetlinks.json tersebut.

Pengujian di perangkat Android

Kami akan mencoba memasang aplikasi yang telah dibuat di perangkat Android.

d26248f3

Kesimpulan

TWA ini merupakan alternatif bagi Anda yang ingin menawarkan aplikasi native namun terkendala waktu atau perangkat untuk menjalankan Android Studio. Namun Anda yang memiliki perangkat dan pengetahuan tentang Android dapat memanfaatkan kode sumber yang telah diunduh tadi untuk memodifikasi aplikasi Android TWA Anda.

Selamat mencoba!


Artikel Terkait


Kami dapat menghasilkan komisi dari produk atau layanan yang Anda beli menggunakan tautan dari situs web kami, selengkapnya.

Anda dapat mendukung situs ini agar tetap aktif dan terus memberikan dampak positif bagi pembaca.

Kritik, saran? Klik tombol


Rekomendasi Layanan

Nama Layanan Link
Modem Orbit Kunjungi
FlexClip • AI Video Editor Kunjungi
ShopBack Kunjungi

Leave a Reply

Your email address will not be published. Required fields are marked *