Pemecahan masalah dan logging

Men-debug pekerja layanan itu sulit. Anda berurusan dengan siklus hidup, pembaruan, {i>cache<i}, dan interaksi antara semua hal ini. Untungnya, sama seperti Workbox yang membuat pengembangan pekerja layanan lebih mudah, namun juga membuat proses debug lebih mudah melalui logging informatifnya. Halaman ini akan membahas beberapa alat proses debug yang tersedia, serta cara kerja logging Workbox dan cara mengonfigurasinya.

Alat pemecahan masalah yang tersedia

Ada banyak alat yang tersedia di browser untuk proses debug dan pemecahan masalah saat mengembangkan pekerja layanan. Berikut ini beberapa referensi untuk memulai browser pilihan Anda.

Chrome dan Edge

Chrome (dan Edge versi terbaru berdasarkan Blink engine) memiliki serangkaian alat developer yang andal. Beberapa alat tersebut—khususnya di Chrome DevTools—dibahas sebelumnya dalam dokumentasi ini, tetapi masih ada lagi yang bisa ditemukan:

Firefox

Pengguna Firefox dapat melihat referensi berikut:

Safari

Safari saat ini memiliki serangkaian alat developer yang lebih terbatas untuk men-debug pekerja layanan. Anda dapat mempelajarinya lebih lanjut dengan referensi berikut:

Logging Workbox

Peningkatan pengalaman developer utama yang ditawarkan Workbox adalah logging informatifnya. Ketika logging diaktifkan, Workbox akan mencatat hampir semua aktivitasnya dengan cara yang khusus dan fungsional.

Screenshot pesan logging Workbox di konsol DevTools Chrome. Pesan logging dibedakan dari log konsol normal dengan badge Workbox. Setiap pesan dapat diperluas untuk mendapatkan informasi proses debug lebih lanjut.

Build pengembangan Workbox mengaktifkan logging secara default, sedangkan build produksi menonaktifkannya. Ada berbagai langkah untuk beralih antara build pengembangan dan produksi, bergantung pada apakah Anda membuat paket Workbox kustom, atau menggunakan salinan yang dipaketkan sebelumnya melalui workbox-sw.

Dengan atau tanpa bundler

Bundler adalah alat yang mengambil kode dari masing-masing modul dan membuat output JavaScript yang siap dijalankan di browser. Saat menggunakan bundler, Anda dapat menggunakan plugin Workbox khusus bundler yang membantu melakukan precaching, seperti workbox-webpack-plugin, atau Anda mungkin hanya menggabungkan logika caching runtime Workbox. Bagaimanapun, logging Workbox dipengaruhi oleh penetapan mode produksi dalam konfigurasi pemaket:

  • Di webpack, opsi konfigurasi mode dapat disetel ke 'production' atau 'development'. workbox-webpack-plugin akan menggunakan logging produksi atau pengembangan di Workbox berdasarkan nilai ini.
  • Untuk Gabungan, rollup-plugin-workbox menerima opsi konfigurasi mode yang juga memengaruhi apakah Workbox mencatat apa pun ke dalam konsol. Jika menggunakan Rollup tanpa plugin khusus Workbox, Anda harus mengonfigurasi @rollup/plugin-replace untuk mengganti process.env.NODE_ENV dengan 'development' atau 'production'.

Misalnya, perilaku logging default harus diganti dalam pengembangan. Dalam hal ini, plugin Workbox yang sesuai untuk pemaket Anda akan memungkinkan Anda melakukan hardcode pada preferensi untuk log proses debug dalam konfigurasinya. Misalnya, Anda dapat menonaktifkan logging di Workbox melalui opsi mode dari workbox-webpack-plugin untuk metode GenerateSW.

Tanpa bundler

Meskipun pemaket sangat bagus, tidak setiap proyek membutuhkannya. Jika Anda ingin menambahkan Workbox ke project yang tidak menggunakan bundler, workbox-sw adalah cara yang tepat.

Modul workbox-sw menyederhanakan pemuatan modul Workbox lainnya (misalnya, workbox-routing, workbox-precaching, dll.) dari CDN. Baik aplikasi itu memuat paket pengembangan atau produksi bergantung pada URL yang digunakan untuk mengakses aplikasi web Anda. Secara default, workbox-sw akan memuat versi pengembangan Workbox jika aplikasi web Anda berjalan di http://localhost, dan versi produksi pada waktu lain.

Anda dapat mengganti perilaku default dengan memanggil metode setConfig Workbox untuk menetapkan opsi debug ke true:

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

Nonaktifkan logging di build pengembangan di alur kerja apa pun

Baik menggunakan bundler atau tidak, Anda dapat menonaktifkan semua logging di build pengembangan dengan menetapkan true ke variabel self.__WB_DISABLE_DEV_LOGS khusus ke dalam pekerja layanan Anda:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

Salah satu keuntungan dari pendekatan ini adalah pendekatan ini sepenuhnya tidak bergantung pada konfigurasi bundler Anda, dan akan berfungsi baik Anda menggunakan workbox-sw secara langsung, atau bergantung pada bundler untuk mengemas pekerja layanan yang didukung Workbox untuk Anda.

Informasi lebih lanjut

Jika Anda masih kesulitan untuk mencari tahu apa yang terjadi di pekerja layanan yang mengalami bug dan logging tidak cukup, coba posting pertanyaan ke Stack Overflow dengan tag workbox. Jika Anda tidak dapat menemukan jawaban di sana, ajukan masalah GitHub (setelah membaca panduan berkontribusi). Hal ini tidak hanya memungkinkan audiens developer yang luas membaca dan menjawab pertanyaan Anda, tetapi jawaban atas pertanyaan Anda dapat membantu seseorang dalam situasi yang sama nanti.