Semua alat yang tersedia untuk pengembangan web juga berguna untuk progressive web app development, termasuk library, framework, editor kode, builder, developer tools, debugger, dan banyak lagi. Namun, saat menggunakan kemampuan khusus PWA, seperti kemampuan penginstalan, pekerja layanan, dukungan offline, dan banyak lagi, alat tertentu untuk PWA sangat membantu. Mari kita lihat cara kerjanya.
Simulator dan perangkat
Seperti yang disebutkan dalam bab Dasar-dasar, Anda harus menggunakan pola desain agnostik untuk menawarkan pengalaman terbaik kepada setiap pengguna dalam setiap konteks. Namun, sebaiknya uji pengalaman Anda di berbagai perangkat.
Anda mungkin tidak akan memiliki lusinan perangkat fisik, termasuk iPhone, ponsel Android, tablet, dan desktop atau laptop dengan sistem operasi yang berbeda. Itulah mengapa ada simulator dan emulator.
Simulator sederhana
Sebagian besar alat developer dalam browser memungkinkan Anda menguji PWA dalam berbagai ukuran layar atau kondisi jaringan saat menggunakan satu mesin browser desktop. Beberapa alat ini juga dapat memaksa agen pengguna yang berbeda dalam simulasi ini.
Beberapa simulator yang tersedia adalah:
- Chromium DevTools: Mode Perangkat, throttling jaringan, dan beberapa simulasi sensor tersedia
- Developer Tools Firefox: Mode Desain Responsif
- Safari Web Inspector: Responsive Design Mode
Beberapa solusi komersial dan gratis dioptimalkan untuk developer dan desainer, seperti Aplikasi Responsif open source.
Simulator Apple
Apple menawarkan aplikasi Simulator (sebelumnya dikenal sebagai Simulator iOS) yang memungkinkan Anda menguji aplikasi web di berbagai iPhone dan iPad pada berbagai versi sistem operasi.
Aplikasi Simulator hanya tersedia untuk komputer macOS, dan dilengkapi dengan [Xcode, yang tersedia di AppStore; aplikasi ini menyimulasikan iOS dan iPadOS dengan konfigurasi perangkat yang berbeda. Ini mencakup aplikasi Mobile Safari asli dan mesin Web.app yang digunakan ketika PWA Anda diinstal di layar utama, sehingga pengalaman akhir yang Anda lihat cukup mewakili perangkat yang sebenarnya.
Untuk meluncurkan aplikasi, setelah menginstal Xcode, Anda dapat membuka Simulator di menu Xcode, dengan memilih Open Developer Tools lalu Simulator. Setelah berada di simulator, Anda dapat membuka Safari seolah-olah menggunakan iPhone atau iPad sungguhan. Anda dapat membuka perangkat lain dengan memilih File, lalu menu Open Simulator.
Beberapa pintasan yang berguna bagi developer web saat menggunakan Simulator untuk menguji PWA adalah:
Command-Shift-H: membuka Layar utama.Control-Command-Shift-H: mengakses Pengalih Aplikasi.Command-RightdanCommand-Left: memutar perangkat.
Simulator bukanlah mesin virtual, tetapi aplikasi yang berjalan di atas macOS yang terlihat seperti iPhone atau iPad, sehingga tidak memiliki stack TCP-nya sendiri. Oleh karena itu, jika Anda menggunakan localhost dalam Simulator, Safari akan mengarah ke perangkat localhost macOS.
Secara default, Xcode hanya menginstal iOS versi terbaru, tetapi Anda dapat membuka Xcode, menggunakan menu Preferences, dan mendownload Simulator yang lebih lama dari tab Components.
Praktik yang baik untuk menguji PWA Anda adalah di iOS versi terbaru, versi minor sebelumnya, dan setidaknya satu versi utama sebelumnya.
Emulator Android
Ekosistem Android menawarkan berbagai emulator, tetapi emulator yang tersedia dalam Android SDK adalah yang paling umum digunakan.
Sebagai developer PWA, Anda juga memerlukan browser di emulator Android, yang akan menambahkan lapisan kompleksitas pada pengujian, karena AOSP (Android Open Source Project) tidak menyertakan Google Chrome atau Play Store untuk mendownload browser. Oleh karena itu, tidak semua emulator Android berguna untuk pengujian PWA.
Android SDK dilengkapi dengan dua alat yang berguna untuk emulasi:
- SDK Manager: mendownload dan mengupdate berbagai versi sistem operasi dan plugin.
- AVD Manager: menambah, mengedit, dan menghapus Android Virtual Device (AVD), masing-masing mewakili satu perangkat dengan satu Android OS terinstal, mirip dengan instance mesin virtual.
Anda hanya dapat menginstal Android SDK atau Android Studio, IDE gratis yang menyertakan Android SDK dengan emulator. Dengan SDK, Anda harus menggunakan command line untuk membuka dan menyiapkan emulator. Dengan Android Studio, Anda dapat membuka alat yang diperlukan dari menu Layar sambutan. Setelah berada di AVD Manager, Anda bisa membuat perangkat sebanyak yang Anda inginkan, dengan berbagai kombinasi ukuran layar, kemampuan, dan versi Android OS.
Dengan Android Emulator, Anda dapat memeriksa dukungan penginstalan PWA, seluruh pengalaman pengguna, dan apakah kemampuan yang Anda gunakan berfungsi seperti yang diharapkan.
Menggunakan Google Chrome
Untuk menggunakan Google Chrome di emulator Android, Anda harus membuat AVD dengan Layanan Play di dalamnya. Untuk melakukannya, pastikan SDK yang Anda gunakan untuk AVD memiliki ikon Play, seperti yang dapat Anda lihat pada gambar berikut:
AVD dengan layanan Play juga menyertakan Play Store, sehingga Anda dapat mengupdate Chrome dengan versi terbaru setelah menyiapkan akun dengan Akun Google Anda.
Menggunakan browser lain
Jika menggunakan AVD dengan layanan Play, Anda juga dapat mendownload browser dari Play Store.
Sebagian besar browser yang tersedia untuk Android, termasuk Samsung Internet, Microsoft Edge, Opera, Firefox, dan Brave, tersedia sebagai APK (Paket Android). Jika memiliki APK untuk browser yang ingin diuji, Anda cukup menarik file ke emulator atau menginstalnya melalui command line menggunakan ADB.
Emulator desktop
Mengemulasi komputer desktop yang berbeda biasanya dilakukan melalui sistem virtual machine, seperti VirtualBox atau VMWare. Meskipun dengan alat ini, mengemulasi beberapa lingkungan tidak dapat dilakukan, seperti mengemulasi macOS di Windows atau Linux. Beberapa opsi lainnya mungkin memerlukan lisensi, seperti mengemulasi Windows di macOS atau Windows.
Menggunakan perangkat fisik
Menggunakan perangkat sebenarnya untuk menguji PWA juga merupakan ide bagus. Kami tidak perlu memiliki beberapa perangkat karena ada beberapa solusi berbasis cloud yang memungkinkan Anda menggunakan perangkat fisik dari jarak jauh. Ada beberapa solusi gratis dan beberapa solusi komersial dengan paket gratis.
Salah satu solusi yang tersedia adalah Samsung Remote Test Lab, solusi gratis untuk menguji PWA Anda di perangkat Samsung, termasuk ponsel, tablet, dan perangkat foldable.
Pemeriksaan jarak jauh
Jika Anda ingin men-debug Progressive Web App di perangkat aktual, simulator, atau emulator, Anda mungkin ingin menghubungkan sesi pemeriksaan jarak jauh dengan alat browser desktop Anda.
Ada berbagai alat komersial yang tersedia, tetapi semua browser juga menawarkan cara untuk melakukannya, termasuk:
- WebKit Remote Inspector agar terhubung ke Safari dan PWA yang diinstal di perangkat serta simulator yang terhubung ke iOS dan iPadOS.
- Proses Debug Jarak Jauh Chromium DevTools untuk terhubung ke Chrome, Edge, Samsung Internet, dan browser berbasis Chromium lainnya di Android dan PWA yang diinstal dari browser tersebut, termasuk emulator dan perangkat fisik yang terhubung.
- Firefox Remote Debugging untuk terhubung ke Firefox untuk Android pada emulator dan perangkat aktual yang terhubung.
Penerusan porta untuk Android
Saat menguji PWA yang tersedia di localhost pada emulator atau perangkat fisik Android, Anda akan mengalami masalah, karena localhost akan mengarah ke stack Android TCP, bukan mesin pengembangan Anda.
Anda mungkin ingin menggunakan alamat IP lokal sebagai pengganti localhost, tetapi itu bukan ide yang baik karena pekerja layanan dan banyak kemampuan hanya akan berfungsi dengan koneksi HTTPS, kecuali localhost, sehingga PWA Anda tidak akan berfungsi secara offline atau lulus kriteria PWA.
Anda dapat mengatasi masalah tersebut dengan mengaktifkan penerusan port di browser Chromium di komputer desktop Anda. Dalam hal ini, Anda dapat menghubungkan port di localhost pada perangkat Android ke origin dan port apa pun dari komputer host Anda, termasuk localhost komputer pengembangan Anda. Lihat panduan ini untuk informasi selengkapnya.
Browser Chromium
Browser Chromium menawarkan banyak alat untuk men-debug dan menguji Progressive Web App, mulai dari DevTools.
Sebagian besar browser berbasis Chromium, termasuk Samsung Internet, Microsoft Edge, dan Google Chrome, menawarkan saluran yang berbeda, seperti Stabil, Beta, dan Canary. Anda dapat menginstal versi terpisah di desktop dan Android untuk menguji PWA pada browser versi mendatang. Dengan begitu, Anda dapat membangun dan menguji fitur yang belum tersedia secara luas, atau menguji penghentian penggunaan dan perubahan, serta mencari tahu perilaku aplikasi Anda dalam versi yang lebih baru.
Dengan menggunakan pemeriksaan jarak jauh, Anda dapat menggunakan semua alat ini untuk men-debug dan menguji PWA di perangkat desktop dan Android.
Alat service worker
Chromium DevTools memiliki rangkaian alat lengkap untuk men-debug service worker dan tab "Application" API-nya. Dari bagian "Service Worker", Anda dapat:
- Lihat status penginstalan dan siklus proses pekerja layanan.
- Update dan batalkan pendaftaran pekerja layanan.
- Ikuti siklus update.
- Lihat klien pekerja layanan saat ini.
- Mengirim pesan push ke pekerja layanan.
- Mendaftarkan operasi Sinkronisasi Latar Belakang dan Sinkronisasi Latar Belakang Berkala.
Baca selengkapnya tentang alat ini.
Alat penyimpanan
Dalam Application lalu Storage, Anda dapat melihat, melihat pratinjau, memperbarui, dan menghapus data dari origin Anda, seperti entri Web Storage atau toko IndexedDB.
Di dalam Application, Cache, lalu Cache Storage, Anda dapat melihat semua cache yang disimpan di asal saat ini, melihat pratinjau konten, dan menghapus entri. Baca selengkapnya tentang alat cache.
Selain itu, dengan memilih dari Application lalu Storage, Anda dapat melihat kuota saat ini yang digunakan, menyimulasikan penyimpanan kuota kustom, dan menghapus semua data, termasuk pendaftaran pekerja layanan, menggunakan Clear site data.
Layanan latar belakang
Chromium DevTools juga memiliki serangkaian alat perekaman peristiwa layanan latar belakang, yang dapat ditemukan dengan mengklik Application lalu Background Services. Ini memungkinkan Anda melihat apa yang terjadi dengan beberapa peristiwa di latar belakang di atas API service worker. Baca selengkapnya tentang alat ini.
Alat manifes aplikasi web
Chromium DevTools memiliki bagian untuk Manifes Aplikasi Web dan kriteria kemampuan penginstalan di Application, Manifest. Di bagian ini, Anda dapat memeriksa apakah manifes telah dimuat dengan benar, nilai manifes, tampilan ikon, app id, dan pemeriksa cepat untuk ikon maskable.
Peringatan dan error seputar masalah kriteria penginstalan juga ditampilkan di bagian ini.
Baca selengkapnya tentang alat ini.
Proses debug penginstalan
Di perangkat Android yang menggunakan mode penginstalan WebAPK, Anda dapat mengakses daftar aplikasi terinstal dengan membuka about:webapk di browser Chromium.
Anda akan melihat status update saat ini dan meminta update WebAPK dari sini.
Di komputer desktop, Anda dapat melihat daftar PWA terinstal yang mudah digunakan dengan menjelajahi about:apps, dan versi debug dengan menjelajahi about:app-service-internals.
Safari
Pada saat penulisan, Safari memiliki rangkaian alat yang lebih terbatas yang tersedia untuk pengujian dan proses debug PWA. Tidak ada alat untuk melihat dan men-debug status dan siklus proses pekerja layanan, tidak ada pemeriksa untuk konten cache, dan tidak ada alat untuk dukungan manifes aplikasi web dan kemampuan penginstalan di iOS dan iPadOS.
Safari hanya tersedia di versi stabil, sedangkan Safari Technology Preview yang tersedia untuk macOS hanya akan mengizinkan Anda mencoba versi Safari versi mendatang sebelumnya. Program beta iOS dan iPadOS terkadang menyertakan versi baru Safari yang dapat Anda gunakan untuk pengujian.
Alat service worker
Yang dapat Anda lakukan di Safari (baik di macOS dan dari jarak jauh untuk iOS maupun iPadOS) adalah membuka jendela inspector untuk pekerja layanan yang sedang berjalan.
Dari Safari di macOS, menu Develop, Service Workers akan mencantumkan semua sesi pekerja layanan yang sedang berjalan. Anda harus memilih perangkat yang akan diperiksa di menu Develop untuk pemeriksaan jarak jauh. Konteks pekerja layanan akan muncul di submenu yang sama dengan konteks jendela pada nama origin atau PWA yang diinstal.
Jika Anda memilih salah satunya, Safari akan membuka jendela baru dengan pemeriksa terbatas, yang hanya mencakup Consoles, Sources, dan Network Tabs.
Firefox
Firefox mendukung pekerja layanan di semua platform dan Manifes Aplikasi untuk penginstalan hanya di Android. Anda dapat mengakses alat untuk PWA di desktop dan Android dengan sesi pemeriksaan jarak jauh USB.
Anda dapat menggunakan versi desktop yang disebut Firefox Developer Edition. Seperti browser Chromium, Firefox memiliki versi di berbagai saluran pada desktop dan Android, termasuk versi stabil, beta, dan developer.
Alat untuk PWA
Pemeriksa layanan pekerja di Firefox adalah alat dasar yang tersedia di Developer Tools di bagian Application, Service Workers. Ini memungkinkan Anda melihat pekerja layanan yang saat ini terdaftar, memeriksa status yang berjalan, dan membatalkan pendaftarannya. Men-debug kode pekerja layanan mungkin hanya tersedia pada beberapa versi developer Firefox.
Alat manifes tersedia di Application, Manifest, dan hanya merender nilai manifes dengan pratinjau ikon.
Pada Storage, Anda dapat mengelola penyimpanan asal, termasuk IndexedDB dan Penyimpanan Cache.
Anda dapat membaca selengkapnya tentang alat developer Firefox untuk aplikasi web.