Men-debug layanan latar belakang

Kayce Basques

Sofia Emelianova

Bagian Layanan latar belakang di Chrome DevTools adalah kumpulan alat untuk API JavaScript yang memungkinkan situs Anda mengirim dan menerima update meskipun pengguna tidak membuka situs Anda. Layanan latar belakang secara fungsional mirip dengan proses latar belakang.

Bagian Layanan latar belakang memungkinkan Anda men-debug layanan latar belakang berikut:

• Pengambilan latar belakang
• Sinkronisasi latar belakang
• Notifikasi
• Pemuatan spekulatif
• Pesan push

Chrome DevTools dapat mencatat peristiwa pengambilan, sinkronisasi, dan notifikasi ke dalam log selama tiga hari, bahkan saat DevTools tidak terbuka. Hal ini dapat membantu Anda memastikan bahwa peristiwa dikirim dan diterima seperti yang diharapkan.

Selain peristiwa layanan latar belakang, DevTools dapat:

• Menampilkan laporan yang telah dikirim atau akan dikirim Chrome menggunakan Reporting API.
• Memungkinkan Anda men-debug dan menguji back-forward cache dengan sekali klik.

Pengambilan latar belakang

Background Fetch API memungkinkan pekerja layanan mendownload resource besar, seperti film atau podcast, dengan andal sebagai layanan latar belakang. Untuk mencatat peristiwa pengambilan latar belakang selama tiga hari, bahkan saat DevTools tidak terbuka:

1. Buka DevTools, misalnya, di halaman demo ini.

2. Buka Application > Background services > Background fetch, lalu klik Record.

   

3. Di halaman demo, klik Simpan aset secara lokal. Tindakan ini memicu beberapa aktivitas pengambilan latar belakang. DevTools mencatat peristiwa ke dalam log ke tabel.

   

4. Klik peristiwa untuk melihat detailnya di ruang di bawah tabel.

5. Anda dapat menutup DevTools dan membiarkan rekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Berhenti.

Sinkronisasi latar belakang

Background Sync API memungkinkan pekerja layanan offline mengirim data ke server setelah menghubungkan kembali koneksi internet yang andal. Untuk mencatat peristiwa sinkronisasi latar belakang selama tiga hari, bahkan saat DevTools tidak terbuka:

1. Buka DevTools, misalnya, di halaman demo ini.

2. Buka Aplikasi > Layanan latar belakang > Sinkronisasi latar belakang, lalu klik Rekam.

   

3. Di halaman demo, klik Register background sync untuk mendaftarkan pekerja layanan masing-masing, lalu klik Allow saat diminta.

   Catatan: Untuk mempelajari cara men-debug pekerja layanan di DevTools, lihat Pekerja layanan.

   Pendaftaran pekerja layanan adalah aktivitas sinkronisasi latar belakang. DevTools mencatat peristiwa ke dalam log ke tabel.

   

4. Klik peristiwa untuk melihat detailnya di ruang di bawah tabel.

5. Anda dapat menutup DevTools dan membiarkan rekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Berhenti.

(Eksperimental) Mitigasi pelacakan kembali

Catatan: Ini adalah fitur eksperimental yang tersedia mulai Chrome versi 115.

Eksperimen Mitigasi pelacakan pantulan di Chrome memungkinkan Anda mengidentifikasi dan menghapus status situs yang tampaknya melakukan pelacakan lintas situs menggunakan teknik pelacakan pantulan. Anda dapat memaksa mitigasi pelacakan secara manual dan melihat daftar situs yang statusnya telah dihapus.

Untuk memaksa mitigasi pelacakan:

1. Blokir cookie pihak ketiga di Chrome. Buka dan aktifkan > Setelan > Privasi dan keamanan > Cookie dan data situs lainnya > Blokir cookie pihak ketiga.
2. Di chrome://flags, tetapkan eksperimen Mitigasi pelacakan kembali ke Diaktifkan dengan Penghapusan.
3. Buka DevTools, misalnya, di halaman demo, lalu buka Application > Background services > Bounce tracking mitigations.
4. Di halaman demo, klik link pantulan dan tunggu (10 detik) hingga Chrome merekam pantulan. Tab Masalah memperingatkan Anda tentang penghapusan status mendatang.
5. Klik Paksa jalankan untuk segera menghapus status.

Notifikasi

Setelah pekerja layanan menerima Pesan Push dari server, pekerja layanan akan menggunakan Notifications API untuk menampilkan data kepada pengguna. Untuk mencatat Notifikasi selama tiga hari, bahkan saat DevTools tidak terbuka:

1. Buka DevTools, misalnya, di halaman demo ini.

2. Buka Aplikasi > Layanan latar belakang > Notifikasi, lalu klik Rekam.

   

3. Di halaman demo, klik Schedule Notification dan Allow saat diminta.

4. Tunggu notifikasi muncul. DevTools mencatat peristiwa notifikasi ke tabel.

   

5. Klik peristiwa untuk melihat detailnya di ruang di bawah tabel.

6. Anda dapat menutup DevTools dan membiarkan rekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Berhenti.

Pemuatan spekulatif

Pemuatan spekulatif memungkinkan pemuatan halaman yang hampir instan berdasarkan aturan spekulasi yang Anda tentukan. Hal ini memungkinkan situs Anda melakukan pramuat dan pra-rendering sebagian besar halaman yang dinavigasi.

Pengambilan data sebelumnya mengambil resource terlebih dahulu dan pra-rendering melangkah lebih jauh dan merender seluruh halaman dalam proses perender latar belakang tersembunyi.

Anda dapat men-debug pemuatan spekulatif di bagian Aplikasi > Layanan latar belakang > Pemuatan spekulatif. Bagian ini berisi tiga tampilan:

• Pemuatan spekulatif. Berisi status spekulatif untuk halaman saat ini, URL saat ini, halaman yang dicoba dimuat secara spekulatif oleh halaman saat ini, dan statusnya.
• Aturan. Berisi kumpulan aturan di halaman saat ini di panel Elemen dan status spekulasi secara keseluruhan.
• Spekulasi. Berisi tabel dengan informasi tentang upaya pemuatan spekulatif dan statusnya. Jika upaya gagal, Anda dapat mengkliknya di tabel untuk melihat informasi mendetail dan alasan kegagalan.

Coba debug pemuatan spekulatif di halaman demo ini:

1. Buka DevTools di halaman, lalu buka Aplikasi > Layanan latar belakang > Pemuatan spekulatif. Jika Anda tidak dapat melihat pemuatan spekulatif yang dimulai oleh halaman, muat ulang halaman.

   

2. Halaman awal demo melakukan pra-rendering dua halaman dan gagal melakukan pra-rendering satu halaman. Klik Lihat semua spekulasi.

3. Di Spekulasi, pilih spekulasi dengan status Kegagalan untuk melihat bagian Alasan kegagalan dengan informasi mendetail di bagian bawah.

   

   Dalam hal ini, pra-rendering gagal karena tidak ada halaman /next3.html di situs.

4. Buka bagian Aturan, lalu klik Status untuk melihat kumpulan aturan di bagian bawah. Mengklik link Kumpulan aturan akan mengarahkan Anda ke panel Elemen dan menampilkan tempat aturan spekulasi ditentukan.

   

   Tips: Anda tidak dapat memperbaiki aturan di layar ini atau di panel Elemen karena DevTools tidak mempertahankan perubahan DOM arbitrer di seluruh pemuatan halaman. Anda harus memperbaiki aturan di sumber dengan menyiapkan ruang kerja atau meniru perubahan dengan mengganti konten.

Untuk panduan yang lebih mendetail, lihat Men-debug aturan spekulasi.

Pesan push

Untuk menampilkan notifikasi push kepada pengguna, pekerja layanan harus terlebih dahulu menggunakan Push Message API untuk menerima data dari server. Saat siap menampilkan notifikasi, pekerja layanan akan menggunakan Notifications API. Untuk mencatat pesan push selama tiga hari, meskipun DevTools tidak terbuka:

1. Buka DevTools, misalnya, di halaman demo ini.

2. Buka Application > Background services > Push Messaging, lalu klik Record.

   

3. Di halaman demo, aktifkan Enable push notifications, klik Allow saat diminta, ketik pesan, lalu kirim. DevTools mencatat peristiwa notifikasi push ke tabel.

   

   Catatan: Selain itu, di Application > Service Workers, Anda dapat mengklik Push untuk mengirim notifikasi pengujian dari DevTools.

4. Klik peristiwa untuk melihat detailnya di ruang di bawah tabel.

5. Anda dapat menutup DevTools dan membiarkan rekaman berjalan hingga tiga hari. Untuk berhenti merekam, klik Berhenti.

Reporting API

Beberapa error hanya terjadi dalam produksi. Anda tidak pernah melihatnya secara lokal atau selama pengembangan karena pengguna, jaringan, dan perangkat yang sebenarnya mengubah game.

Misalnya, situs baru Anda mengandalkan software pihak ketiga yang menggunakan document.write() untuk memuat skrip penting. Pengguna baru di seluruh dunia membuka situs Anda, tetapi mereka mungkin memiliki koneksi yang lebih lambat daripada yang Anda gunakan untuk pengujian. Tanpa sepengetahuan Anda, situs Anda mulai rusak bagi mereka karena Chrome mengintervensi document.write() di jaringan lambat. Atau, Anda dapat memantau API yang tidak digunakan lagi atau yang akan segera tidak digunakan lagi yang mungkin digunakan codebase Anda.

Reporting API dirancang untuk membantu Anda memantau panggilan API yang tidak digunakan lagi, pelanggaran keamanan halaman, dan lainnya. Anda dapat menyiapkan pelaporan seperti yang dijelaskan dalam Memantau aplikasi web dengan Reporting API.

Untuk melihat laporan yang dibuat oleh halaman:

1. Buka chrome://flags/#enable-experimental-web-platform-features, setel Fitur Platform Web Eksperimental ke Diaktifkan, lalu mulai ulang Chrome.

2. Buka DevTools, lalu buka Application > Background services > Reporting API. Misalnya, Anda dapat melihat laporan di halaman demo ini.

   

Tab Reporting API dibagi menjadi tiga bagian:

• Tabel Laporan dengan informasi berikut di setiap laporan:
  • URL yang menyebabkan pembuatan laporan
  • Jenis Pelanggaran
  • Status Laporan
  • Endpoint Destination
  • Stempel waktu Dibuat pada
  • Isi Laporan
• Bagian pratinjau Isi laporan. Untuk melihat pratinjau isi laporan, klik laporan di tabel laporan.
• Bagian Endpoints dengan ringkasan semua endpoint yang dikonfigurasi di header Reporting-Endpoints.

Melaporkan status

Kolom Status memberi tahu Anda apakah Chrome berhasil mengirim laporan, akan mengirimnya, atau gagal.

Status	Deskripsi
Success	Browser telah mengirim laporan dan endpoint membalas dengan kode berhasil (200 atau kode respons berhasil lainnya 2xx).
Pending	Browser sedang mencoba mengirim laporan.
Queued	Laporan telah dibuat dan browser belum mencoba mengirimkannya. Laporan akan muncul sebagai Queued dalam salah satu dari dua kasus berikut: Laporan ini baru dan browser menunggu untuk melihat apakah ada laporan lain yang masuk sebelum mencoba mengirimnya. Laporan ini bukan laporan baru; browser telah mencoba mengirim laporan ini dan gagal, serta menunggu sebelum mencoba lagi.
MarkedForRemoval	Setelah mencoba lagi selama beberapa saat (Queued), browser berhenti mencoba mengirim laporan dan akan segera menghapusnya dari daftar laporan yang akan dikirim.

Laporan akan dihapus setelah beberapa saat, baik berhasil dikirim maupun tidak.

Poin penting: Status Queued tidak selalu informatif, karena tidak menunjukkan secara akurat apakah pengiriman telah gagal atau belum dicoba. Menggunakan penundaan pelaporan singkat akan membantu: laporan yang tetap Queued dalam hal ini kemungkinan menunjukkan bahwa pengiriman gagal.