Men-debug Progressive Web App

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Gunakan panel Application untuk memeriksa, mengubah, dan men-debug manifes aplikasi web, pekerja layanan, dan cache pekerja layanan.

Progressive Web App (PWA) adalah aplikasi modern berkualitas tinggi yang dibuat menggunakan teknologi web. PWA menawarkan kemampuan yang serupa dengan aplikasi iOS, Android, dan desktop. Bagian-bagian tersebut adalah:

  • Dapat diandalkan bahkan dalam kondisi jaringan yang tidak stabil.
  • Dapat diinstal untuk meluncurkan platform sistem operasi, seperti folder Applications di Mac OS X, menu Start di Windows, dan layar utama di Android dan iOS.
  • Muncul di pengalih aktivitas, mesin telusur perangkat seperti Spotlight, dan di sheet berbagi konten.

Panduan ini hanya membahas fitur Progressive Web App di panel Aplikasi. Jika Anda mencari bantuan di panel lain, lihat bagian terakhir dalam panduan ini, Panduan panel Aplikasi lainnya.

Ringkasan

  • Gunakan tab Manifes untuk memeriksa manifes aplikasi web Anda.
  • Gunakan tab Pekerja Layanan untuk berbagai tugas terkait pekerja layanan, seperti membatalkan pendaftaran atau mengupdate layanan, mengemulasi peristiwa push, offline, atau menghentikan pekerja layanan.
  • Lihat cache pekerja layanan Anda dari tab Cache Storage.
  • Batalkan pendaftaran pekerja layanan dan hapus semua penyimpanan dan cache dengan sekali klik tombol dari tab Hapus penyimpanan.

Manifes aplikasi web

Jika ingin pengguna dapat menambahkan aplikasi ke folder Applications di Mac OS X, menu Start di Windows, dan layar utama di Android dan iOS, Anda memerlukan manifes aplikasi web. Manifes menentukan tampilan aplikasi di layar utama, tempat mengarahkan pengguna saat meluncurkan dari layar utama, dan tampilan aplikasi saat diluncurkan.

Setelah menyiapkan manifes, Anda dapat menggunakan tab Manifes di panel Aplikasi untuk memeriksanya.

Tab Manifes.

  • Untuk melihat sumber manifes, klik link di bawah label Manifes Aplikasi (manifest.webmanifest pada screenshot di atas).
  • Bagian Identitas dan Presentasi hanya menampilkan kolom dari sumber manifes dengan cara yang lebih mudah digunakan.
  • Bagian Pengendali Protokol memungkinkan Anda menguji pendaftaran pengendali protokol URL PWA dengan mengklik tombol. Untuk mempelajari lebih lanjut, lihat Menguji pendaftaran pengendali protokol URL.
  • Bagian Icons menampilkan setiap ikon yang telah Anda tentukan dan memungkinkan Anda memeriksa mask-nya.
  • Kumpulan bagian Pintasan #N menampilkan informasi tentang semua objek pintasan Anda.
  • Rangkaian bagian Screenshot #N menampilkan screenshot untuk UI penginstalan aplikasi Anda yang lebih kaya.

Selain itu, jika DevTools mengalami error, seperti ikon yang tidak dapat dimuat, tab Manifes akan menampilkan bagian Kemampuan Instalasi yang menjelaskan error tersebut.

Bagian Kemampuan Instalasi di tab Manifes.

Melihat dan memeriksa ikon maskable

Bagian Icons di tab Manifest menampilkan semua ikon aplikasi Anda. Di bagian ini, Anda juga dapat memeriksa area aman untuk ikon maskable, format ikon yang beradaptasi dengan platform.

Untuk memangkas ikon sehingga hanya area aman minimum yang terlihat, centang Kotak centang. Hanya tampilkan area aman minimum untuk ikon yang dapat disamarkan.

Melihat area aman minimum untuk ikon yang dapat disamarkan.

Jika seluruh logo Anda terlihat di area aman, Anda sudah siap.

Pemasangan pemicu

Chrome memungkinkan Anda mengaktifkan dan mempromosikan penginstalan PWA langsung dalam antarmuka penggunanya. Pelajari Cara memberikan pengalaman penginstalan dalam aplikasi Anda sendiri.

Untuk memicu alur penginstalan PWA Anda:

  1. Buka halaman landing PWA di Chrome.

  2. Di sisi kanan kolom URL di bagian atas, klik Instal. Instal.

    Tombol Instal.

  3. Ikuti petunjuk di layar.

Fitur Instal aplikasi tidak dapat menyimulasikan alur kerja untuk perangkat seluler. Perhatikan cara browser Chrome desktop menampilkan tombol penginstalan di kolom URL, meskipun DevTools berada dalam Mode Perangkat. Namun, jika Anda berhasil menambahkan aplikasi ke desktop, aplikasi tersebut juga akan berfungsi untuk perangkat seluler.

Jika ingin menguji pengalaman seluler yang sebenarnya, Anda dapat menghubungkan perangkat seluler sungguhan ke DevTools melalui proses debug jarak jauh. Untuk memicu penginstalan di perangkat seluler yang terhubung, buka menu tiga titik Menu tiga titik., lalu klik Instal aplikasi. Instal aplikasi.

Memeriksa pintasan

Pintasan aplikasi memungkinkan Anda memberikan akses cepat ke beberapa tindakan umum yang sering diperlukan pengguna.

Untuk memeriksa pintasan yang Anda tentukan dalam file manifes, scroll ke bagian Pintasan #N pada tab Manifes.

Bagian Pintasan di tab Manifes.

Memeriksa screenshot untuk UI penginstalan yang lebih lengkap

Saat Anda menambahkan deskripsi dan serangkaian screenshot ke file manifes, aplikasi Anda akan mendapatkan dialog penginstalan yang lebih lengkap.

Untuk memeriksa screenshot, scroll ke bagian Screenshot #N di tab Manifes.

Dialog penginstalan dan screenshot di tab Manifes.

Menguji pendaftaran pengendali protokol URL

PWA dapat menangani link yang menggunakan protokol tertentu untuk pengalaman yang lebih terintegrasi. Untuk mempelajari cara membuat pengendali, lihat Pendaftaran pengendali protokol URL untuk PWA.

Untuk menguji pengendali:

  1. Buka DevTools di halaman landing PWA Anda. Misalnya, lihat demo PWA ini.
  2. Dari halaman demo, instal PWA dan muat ulang aplikasi setelah penginstalan. Browser kini telah mendaftarkan PWA sebagai pengendali untuk protokol web+coffee.
  3. Di bagian Application > Manifest > Protocol Handler, masukkan URL yang ingin Anda uji oleh pengendali, lalu klik Test protocol. Menguji pengendali. Dalam contoh ini, pengendali dapat memproses americano, chai, dan latte-macchiato.
  4. Saat Chrome bertanya apakah dapat membuka aplikasi, konfirmasi dengan mengklik Open Protocol Handler. Buka aplikasi.
  5. Pada dialog berikutnya, izinkan aplikasi menangani link web+coffee. Mengizinkan untuk menangani link.

Jika pengendali berhasil memproses link, Anda akan melihat gambar cangkir kopi yang dibuka di aplikasi.

Pekerja layanan

Pekerja layanan adalah teknologi dasar di platform web masa depan. Ini adalah skrip yang dijalankan browser di latar belakang, terpisah dari halaman web. Skrip ini memungkinkan Anda mengakses fitur yang tidak memerlukan halaman web atau interaksi pengguna, seperti notifikasi push, sinkronisasi latar belakang, dan pengalaman offline.

Panduan Terkait:

Tab Service Workers di panel Application adalah tempat utama di DevTools untuk memeriksa dan men-debug pekerja layanan.

Tab Service Workers.

  • Jika pekerja layanan diinstal ke halaman yang saat ini terbuka, Anda akan melihatnya tercantum di tab ini. Misalnya, pada screenshot di atas, ada pekerja layanan yang diinstal untuk cakupan https://airhorner.com/.
  • Kotak centang Kotak centang. Offline akan menempatkan DevTools ke mode offline. Ini setara dengan mode offline yang tersedia dari panel Jaringan, atau opsi Go offline di Menu Perintah.
  • Kotak centang Kotak centang. Update on reload memaksa pekerja layanan untuk diupdate pada setiap pemuatan halaman.
  • Kotak centang Kotak centang. Bypass for network mengabaikan pekerja layanan dan memaksa browser membuka jaringan untuk resource yang diminta.
  • Link Permintaan jaringan akan mengarahkan Anda ke panel Jaringan dengan daftar permintaan yang dicegat yang terkait dengan pekerja layanan (filter is:service-worker-intercepted).
  • Link Update melakukan update satu kali pada pekerja layanan yang ditentukan.
  • Tombol Push mengemulasi notifikasi push tanpa payload (juga dikenal sebagai tickle).
  • Tombol Sinkronkan mengemulasikan peristiwa sinkronisasi latar belakang.
  • Link Batalkan pendaftaran membatalkan pendaftaran pekerja layanan yang ditentukan. Lihat Menghapus penyimpanan untuk mengetahui cara membatalkan pendaftaran pekerja layanan dan menghapus penyimpanan serta cache dengan sekali klik tombol.
  • Baris Sumber memberi tahu Anda kapan pekerja layanan yang sedang berjalan diinstal. Link tersebut adalah nama file sumber pekerja layanan. Mengklik link akan mengarahkan Anda ke sumber pekerja layanan.
  • Baris Status memberi tahu Anda status pekerja layanan. Angka pada baris ini (#16 dalam screenshot) menunjukkan frekuensi pekerja layanan telah diperbarui. Jika mengaktifkan kotak centang Update on reload Kotak centang., Anda akan melihat bahwa angka bertambah pada setiap pemuatan halaman. Di samping status, Anda akan melihat link start (jika pekerja layanan dihentikan) atau link stop (jika pekerja layanan berjalan). Pekerja layanan dirancang untuk dihentikan dan dimulai oleh browser kapan saja. Menghentikan pekerja layanan secara eksplisit menggunakan link stop dapat menyimulasikannya. Menghentikan pekerja layanan adalah cara yang bagus untuk menguji perilaku kode Anda saat pekerja layanan mulai aktif kembali. Hal ini sering kali mengungkapkan bug karena asumsi yang salah tentang status global persisten.
  • Baris Klien memberi tahu Anda asal cakupan pekerja layanan. Tombol fokus sebagian besar berguna saat Anda memiliki beberapa pekerja layanan terdaftar. Jika Anda mengklik tombol fokus di samping pekerja layanan yang berjalan di tab lain, Chrome akan berfokus pada tab tersebut.

  • Tabel Siklus Update menampilkan aktivitas pekerja layanan dan waktu yang berlalu, seperti penginstalan, penantian, dan pengaktifan. Untuk melihat stempel waktu yang tepat dari setiap aktivitas, klik tombol Luaskan. Luaskan.

    Aktivitas dan stempel waktunya.

    Untuk mengetahui informasi selengkapnya, lihat Siklus proses pekerja layanan.

Jika pekerja layanan menyebabkan error, tab Pekerja Layanan akan menampilkan ikon Error Error. dengan jumlah error di samping baris Sumber. Link dengan nomor akan mengarahkan Anda ke Konsol dengan semua error yang dicatat ke dalam log.

Error pekerja layanan di Konsol.

Untuk melihat informasi tentang semua pekerja layanan, klik Lihat semua pendaftaran di bagian bawah tab Pekerja Layanan. Link ini mengarah ke chrome://serviceworker-internals/?devtools tempat Anda dapat men-debug pekerja layanan lebih lanjut.

Pendaftaran pekerja layanan di serviceworker-internals.

Cache pekerja layanan

Tab Cache Storage menyediakan daftar resource hanya baca yang telah di-cache menggunakan Cache API (pekerja layanan).

Tab cache pekerja layanan.

Perhatikan bahwa saat pertama kali Anda membuka cache dan menambahkan resource ke dalamnya, DevTools mungkin tidak mendeteksi perubahan. Muat ulang halaman dan Anda akan melihat cache.

Jika Anda membuka dua cache atau lebih, Anda akan melihatnya tercantum di bawah drop-down Cache Storage.

Beberapa cache pekerja layanan.

Penggunaan kuota

Beberapa respons dalam tab Penyimpanan Cache mungkin ditandai sebagai "buram". Hal ini mengacu pada respons yang diambil dari origin yang berbeda, seperti dari CDN atau API jarak jauh, saat CORS tidak diaktifkan.

Untuk menghindari kebocoran informasi lintas-domain, ada padding yang signifikan yang ditambahkan ke ukuran respons buram yang digunakan untuk menghitung batas kuota penyimpanan (yaitu apakah pengecualian QuotaExceeded ditampilkan) dan dilaporkan oleh navigator.storage API.

Detail padding ini bervariasi dari satu browser ke browser lainnya, tetapi untuk Google Chrome, ini berarti bahwa ukuran minimum yang dikontribusikan oleh respons buram yang di-cache ke penggunaan penyimpanan secara keseluruhan adalah sekitar 7 megabyte. Anda harus mengingat hal ini saat menentukan jumlah respons buram yang ingin di-cache, karena Anda dapat dengan mudah melampaui batasan kuota penyimpanan jauh lebih cepat dari yang Anda harapkan berdasarkan ukuran sebenarnya dari resource buram.

Panduan Terkait:

Hapus penyimpanan

Tab Hapus Penyimpanan adalah fitur yang sangat berguna saat mengembangkan aplikasi web progresif. Tab ini memungkinkan Anda membatalkan pendaftaran pekerja layanan dan menghapus semua cache dan penyimpanan dengan sekali klik tombol. Lihat bagian di bawah untuk mempelajari lebih lanjut.

Panduan Terkait:

Panduan Panel aplikasi lainnya

Lihat panduan di bawah untuk mendapatkan bantuan lebih lanjut tentang panel lain di panel Aplikasi.

Panduan Terkait: