Men-debug Progressive Web App

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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. Faktor-faktor tersebut adalah:

  • Andal, 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 dari panel Application. Jika Anda mencari bantuan di panel lain, lihat bagian terakhir panduan ini, Panduan panel Aplikasi Lainnya.

Ringkasan

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

Manifes aplikasi web

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

Setelah menyiapkan manifes, Anda dapat menggunakan panel Manifest di panel Application untuk memeriksanya.

Panel Manifest.

  • Untuk melihat sumber manifes, klik link di bawah label Manifes Aplikasi (manifest.webmanifest dalam 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 satu tombol. Untuk mempelajari lebih lanjut, lihat Menguji pendaftaran pengendali protokol URL.
  • Bagian Ikon menampilkan setiap ikon yang telah Anda tentukan dan memungkinkan Anda memeriksa mask-nya.
  • Kumpulan bagian Pintasan #N menampilkan informasi tentang semua objek pintasan Anda.
  • Bagian Screenshot #N menampilkan screenshot untuk UI penginstalan aplikasi yang lebih lengkap.

Selain itu, jika DevTools mengalami error, seperti ikon yang tidak dapat dimuat, panel Manifest akan menampilkan bagian Installability yang menjelaskan error tersebut.

Bagian Installability di panel Manifest.

Melihat dan memeriksa ikon yang dapat disamarkan

Bagian Icons pada panel Manifest menampilkan semua ikon aplikasi Anda. Di bagian ini, Anda juga dapat memeriksa area aman untuk ikon maskable, yaitu 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 terlihat di area aman, Anda sudah siap.

Penginstalan pemicu

Chrome memungkinkan Anda mengaktifkan dan mempromosikan penginstalan PWA Anda secara langsung dari 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. Install.

    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 dalam Mode Perangkat. Namun, jika Anda berhasil menambahkan aplikasi ke desktop, aplikasi juga akan berfungsi untuk perangkat seluler.

Jika ingin menguji pengalaman seluler yang asli, Anda dapat menghubungkan perangkat seluler sungguhan ke DevTools melalui proses debug jarak jauh. Untuk memicu penginstalan pada 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 kali diperlukan pengguna.

Untuk memeriksa pintasan yang Anda tentukan di file manifes, scroll ke bagian Pintasan #N di panel Manifes.

Bagian pintasan di panel Manifest.

Memeriksa screenshot untuk UI penginstalan yang lebih lengkap

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

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

Dialog penginstalan dan screenshot di panel Manifest.

Menguji pendaftaran pengendali protokol URL

PWA dapat menangani link yang menggunakan protokol tertentu untuk memberikan 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 PWA demo 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 Anda inginkan untuk diuji oleh pengendali, lalu klik Uji protokol. Menguji pengendali. Pada contoh ini, pengendali dapat memproses americano, chai, dan latte-macchiato.
  4. Saat Chrome menanyakan apakah Anda dapat membuka aplikasi, konfirmasi dengan mengklik Open Protocol Handler. Buka aplikasi.
  5. Dalam dialog berikutnya, izinkan aplikasi menangani link web+coffee. Izinkan untuk menangani link.

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

Service worker

Service worker adalah teknologi fundamental di platform web masa depan. Skrip 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:

Panel Service Workers di panel Application adalah tempat utama di DevTools untuk memeriksa dan men-debug service worker.

Panel Service Workers.

  • Jika pekerja layanan diinstal ke halaman yang sedang terbuka, Anda akan melihatnya tercantum di panel ini. Misalnya, dalam screenshot di atas, ada pekerja layanan yang diinstal untuk cakupan https://airhorner.com/.
  • Kotak centang Kotak centang. Offline menempatkan DevTools ke mode offline. Ini setara dengan mode offline yang tersedia dari panel Network, atau opsi Go offline di Command Menu.
  • Kotak centang Kotak centang. Update on reload memaksa pekerja layanan diupdate pada setiap pemuatan halaman.
  • Kotak centang Abaikan untuk jaringan Kotak centang. mengabaikan pekerja layanan dan memaksa browser pergi ke jaringan untuk mendapatkan resource yang diminta.
  • Link Permintaan jaringan mengarahkan Anda ke panel Jaringan yang berisi daftar permintaan yang disadap yang terkait dengan pekerja layanan (filter is:service-worker-intercepted).
  • Link Update melakukan update satu kali untuk pekerja layanan yang ditentukan.
  • Tombol Push mengemulasi notifikasi push tanpa payload (juga dikenal sebagai tickle).
  • Tombol Sync mengemulasi peristiwa sinkronisasi latar belakang.
  • Link Batalkan pendaftaran membatalkan pendaftaran pekerja layanan yang ditentukan. Lihat Clear storage untuk mengetahui cara membatalkan pendaftaran pekerja layanan serta menghapus total penyimpanan dan cache dengan sekali klik tombol.
  • Baris Source memberi tahu Anda jika pekerja layanan yang sedang berjalan diinstal. Link tersebut adalah nama file sumber pekerja layanan. Mengklik link tersebut akan mengarahkan Anda ke sumber pekerja layanan.
  • Baris Status menunjukkan status pekerja layanan. Angka di baris ini (#16 dalam screenshot) menunjukkan berapa kali pekerja layanan telah diperbarui. Jika Anda mengaktifkan kotak centang Kotak centang. Update on reload, Anda akan melihat bahwa angka ini bertambah setiap kali halaman dimuat. Di samping status, Anda akan melihat link mulai (jika pekerja layanan dihentikan) atau link stop (jika pekerja layanan sedang berjalan). Service worker 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 tepat untuk menguji perilaku kode Anda saat pekerja layanan mulai mencadangkan lagi. Error ini sering kali memunculkan bug karena asumsi yang salah tentang status global persisten.
  • Baris Klien memberi tahu Anda tempat asal cakupan pekerja layanan. Tombol fokus sangat berguna saat Anda memiliki beberapa pekerja layanan yang terdaftar. Jika Anda mengklik tombol focus di samping pekerja layanan yang berjalan di tab berbeda, Chrome akan berfokus pada tab tersebut.
  • Tabel Siklus Update menampilkan aktivitas pekerja layanan dan waktu yang telah berlalu, seperti penginstalan, tunggu, dan aktifkan. Untuk melihat stempel waktu yang tepat dari setiap aktivitas, klik tombol Luaskan. Luaskan.

    Aktivitas dan stempel waktunya.

    Untuk informasi selengkapnya, lihat Siklus proses pekerja layanan.

Jika pekerja layanan menyebabkan error, panel Service Workers akan menampilkan ikon Error. Error dengan jumlah error di samping baris Source. Link dengan nomor tersebut akan mengarahkan Anda ke Konsol dengan semua error yang dicatat.

Error pekerja layanan di Konsol.

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

Pendaftaran pekerja layanan di serviceworker-internal.

Cache pekerja layanan

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

Panel cache service worker.

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

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

Beberapa cache pekerja layanan.

Penggunaan kuota

Beberapa respons dalam panel Cache Storage mungkin ditandai sebagai "buram". Hal ini merujuk pada respons yang diambil dari asal lain, seperti dari CDN atau API jarak jauh, saat CORS tidak diaktifkan.

Untuk menghindari kebocoran informasi lintas-domain, ada padding 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 browser ke browser, tetapi untuk Google Chrome, ini berarti ukuran minimum dari satu respons buram yang di-cache yang berkontribusi terhadap penggunaan penyimpanan secara keseluruhan sekitar 7 megabyte. Anda harus memperhatikan hal ini saat menentukan jumlah respons buram yang ingin di-cache, karena Anda dapat dengan mudah melampaui batas kuota penyimpanan lebih cepat daripada yang diharapkan berdasarkan ukuran resource buram yang sebenarnya.

Panduan Terkait:

Hapus penyimpanan

Panel Clear Storage adalah fitur yang sangat berguna saat mengembangkan progressive web app. Panel ini memungkinkan Anda membatalkan pendaftaran pekerja layanan serta menghapus semua cache dan penyimpanan dengan sekali klik tombol. Lihat bagian di bawah untuk mempelajari lebih lanjut.

Panduan Terkait:

Panduan panel Application lainnya

Lihat panduan di bawah untuk bantuan lebih lanjut di panel lain pada panel Application.

Panduan Terkait: