Tutorial Membangun Progressive Web Apps - Part 9

PWA Dec 22, 2019

PWA harus berjalan di atas protokol https untuk menjamin keamanan transaksi data antara client dan server. Namun untuk kebutuhan pengembangan, kita dapat menggunakan protocol http dengan web server apapun yang dapat kita install di komputer lokal kita seperti XAMPP, WAMP, atau yang lainnya. Apabila kita hanya membuka file HTML-nya secara langsung (menggunakan protocol file://) maka service worker tidak akan bekerja. Beruntung Chrome memiliki sebuah extensions bernama Web Server for Chrome sebagai web server mini untuk kebutuhan pengembangan PWA.

Kamu dapat mengunduh dan menginstall aplikasi Web Server for Chrome pada tautan ini: Web Server for Chrome. Klik tombol Add to Chrome untuk mengunduh aplikasi tersebut. Setelah terpasang, buka alamat chrome://apps dan klik pada ikon Web Server.

download web server

Kamu akan melihat jendela aplikasi untuk mengatur konfigurasi dan memulai server.

web server for chrome

Untuk menjalankan aplikasi web kita, klik tombol CHOOSE FOLDER untuk memilih folder projectnya. Aplikasi kita langung dapat diakses pada url yang tercantum di bagian Web Server URL(s). Pada contoh gambar di atas URL aplikasi kita adalah http://127.0.0.1:8887 atau bisa juga dengan menulis http://localhost:8887.

Membuka PWA di Device Android

Dalam proses pengembangan PWA, perlu melakukan testing dan debugging setiap kali kita menulis kode. Proses debugging dapat kita lakukan langsung melalui jendela DevTools pada browser. Namun adakalanya kita perlu menguji kinerja aplikasi kita pada perangkat mobile, termasuk memastikan fitur Add to Home Screen berjalan dengan baik.

Ada beberapa cara yang dapat ditempuh untuk menjalankan PWA kita di perangkat mobile. Cara pertama adalah dengan mengunggah PWA kita ke hosting sehingga perangkat mobile kita dapat mengaksesnya langsung melalui jaringan internet. Tentunya domain yang digunakan sudah harus berjalan di protokol HTTPS. Namun jika harus mengunggah ke server hosting setiap kali hendak menguji aplikasi, akan sangat merepotkan. Sehingga pembahasan cara mengunggah ke server hosting kita simpan untuk modul selanjutnya. Kali ini kita akan mencoba cara lain yang lebih mudah terutama untuk mendukung proses testing dan debugging selama masa pengembangan.

Remote Debuging Android di Chrome DevTools

Fitur add to home screen ini hanya bisa kita pakai jika PWA dibuka lewat browser di perangkat Android. Untuk mempermudah proses debugging, kita bisa memanfaatkan fitur remote debug melalui aplikasi Chrome di komputer bersistem operasi Windows, Mac, atau Linux. Ikuti langkah-langkah di bawah ini untuk mengaktifkannya:

  • Buka pengaturan Developer Options dan aktifkan Enable USB Debugging di perangkat Android. (Langkah ini bisa dilakukan dengan mengikuti tutorial berikut. )

Di jendela Google Chrome, buka DevTools lalu klik menu berbentuk 3 titik di kanan atas  > More Tools > Remote devices seperti pada gambar di bawah.

more tools

Di jendela Remote devices yang muncul, pastikan opsi Discover USB devices tercentang di tab Settings.

ceklis usb device

Selanjutnya hubungkan perangkat dengan komputer melalui kabel USB. Perhatikan jendela Allow USB debugging yang akan muncul saat pertama kali menghubungkannya. Centang opsi Always allow from this computer agar tidak selalu ditanya saat menghubungkan perangkat dengan komputer dan klik OK.

Di jendela Remote devices, buka tab yang menunjukkan nama perangkat Android yang telah terhubung (nama perangkat yang ada di Chrome pembaca mungkin akan berbeda). Kamu dapat melihat tanda lingkaran berwarna hijau yang menandakan perangkat sudah terhubung ke komputer. Bila tidak ada nama perangkat tertera disitu atau lingkaran masih berwarna merah, itu berarti perangkat belum terhubung dengan benar.

device connected

Dengan menggunakan Remote debugging ini, kita dapat menginspeksi website di browser Chrome yang ada di perangkat Android melalui komputer kita. Kamu dapat membuka website pada tab baru di Chrome Android dan di layar komputer kamu dapat melihat tab apa saja yang terbuka.

Membuka PWA di Android dengan Port Forwarding

Untuk membuka PWA di Android dengan metode Port Forwarding ini, kamu perlu terlebih dahulu menjalankan langkah konfigurasi Remote Debugging pada pembahasan di atas. Kemudian baru lakukan langkah-langkah berikut:

  • Pada DevTools, di bagian Settings pada Remote Device, tambahkan port fowarding dengan memberi tanda centang di bagian Port forwarding. Kemudian klik tombol Add rule, isi 8887 di kotak sebelah kiri dan localhost:8887 di kotak sebelah kanan lalu klik tombol Add. Pengaturan ini perlu kita tambahkan agar local web server yang berada di komputer bisa diakses melalui Chrome di perangkat Android.
ketikan localhost
  • Buka aplikasi Chrome di Android.
  • Pada kotak input di sebelah New tab, tuliskan alamat localhost:8887 dan klik Open.
  • Perhatikan bahwa aplikasi Chrome di perangkat Android kita bisa mengakses local web server yang berada di komputer. Perhatikan pula di bagian bawah jendela browser, Ada opout menawarkan pemasangan PWA kita ke home screen. Kamu dapat langsung mengklik tautan pada popup tersebut untuk memasang PWA ke home screen.
  • Jika browsermu tidak menampilkan popup pemasangan ke home screen, kamu dapat melakukan pemasangan manual dengan mengklik tombol  di sebelah kanan atas jendela browser Chrome dan pilih menu Add to Home screen.

Setelah itu anda dapat menikmati layanan atau fitur dari aplikasi PWA. Sekian tutorial pada kali ini semoga bermanfaat dan terima kasih.

Ahmad Sarian Syakir

Aku hanya seorang pemuda biasa, terbiasa sendiri dan berdansa dengan dunia tak asli. Aku bukan apa-apa bukan siapa-siapa dan Dunia tak pernah menganggapku ada Meski aku sudah memesan tempat diatasnya.