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:
- Men-debug Progressive Web App
- Memeriksa Aktivitas Jaringan di Chrome DevTools
- Video: Men-debug Pekerja Layanan di Chrome
- Codelab: Men-debug Pekerja Layanan
Firefox
Pengguna Firefox dapat melihat referensi berikut:
- Melakukan debug pekerja layanan menggunakan Panel Aplikasi Devtools Firefox
- Video: Men-debug Pekerja Layanan di Firefox
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.
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 konfigurasimode
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 menggantiprocess.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.