Selamat siang teman!Banyak dari Anda mungkin pernah mendengar tentang inovasi dalam ekosistem JavaScript sebagai Pekerja Layanan, yang merupakan elemen kunci dari pengembangan web modern. Pekerja layanan menjadi semakin populer, terutama karena popularitas Aplikasi Web Progresif (PWA).Ketika saya pertama kali mendengar tentang mereka, saya bertanya pada diri sendiri: “Kapan kita harus menggunakan pekerja layanan? Dalam skenario atau konteks apa kita dapat menggunakannya? ”Dalam artikel ini, kami akan mempertimbangkan beberapa contoh praktis menggunakan pekerja layanan, yang nantinya, saya berani berharap, akan membuat pengguna Anda bahagia.Saya percaya, sebelum menganalisis contoh-contoh praktis, perlu paling tidak menguraikan dasar-dasar teoretis pekerjaan para pekerja jasa. Untuk pemula, ini akan menjadi bantuan yang baik dalam upaya di masa depan.Apa itu pekerja layanan?
Cersis Worker adalah skrip yang dijalankan oleh browser dalam proses latar belakang. Ingatlah bahwa seorang pekerja layanan sepenuhnya independen dari halaman yang berinteraksi atau melayani (melayani).Intinya, pekerja layanan adalah server proxy antara aplikasi web, browser, dan jaringan.Pekerja layanan memungkinkan aplikasi web berfungsi seperti aplikasi asli.Beberapa fakta tentang pekerja layanan
- Pekerja layanan tidak memiliki akses langsung ke DOM. Untuk melakukan ini, mereka menggunakan mekanisme untuk menanggapi permintaan melalui antarmuka postMessages.
- Pekerja layanan dibatalkan secara paksa (dihentikan) saat tidak digunakan. Ini berarti bahwa mereka dikendalikan oleh peristiwa.
- Pekerja layanan menganggap penggunaan janji (janji).
- Karena kemampuannya yang hebat, pekerja layanan hanya dapat digunakan melalui HTTPS. Di server lokal, Anda dapat melakukannya tanpa HTTPS.
Bagaimana pekerja layanan bekerja? Tampilan cepat
Pekerja layanan memungkinkan Anda untuk mencegat permintaan server dan menyimpan permintaan ini untuk meningkatkan kinerja aplikasi. Dengan demikian, keuntungan produktivitas dicapai melalui caching semua konten.Tetapi lebih baik melihatnya sekali, jadi di sini adalah gambar yang menunjukkan pekerjaan seorang pekerja layanan:Siklus Hidup Pekerja Layanan
Seperti yang saya sebutkan sebelumnya, pekerja layanan bekerja secara independen dari halaman kontrol. Jika Anda ingin menginstal pekerja layanan di aplikasi Anda, hal pertama yang perlu Anda lakukan adalah mendaftarkannya.Setelah itu, browser yang meluncurkan instalasi pekerja layanan masuk ke latar belakang:
Kasing Penggunaan Umum
Sekarang kita tahu bagaimana pekerja layanan bekerja, saatnya berbicara tentang di mana mereka digunakan.Caching
Seperti disebutkan di atas, pekerja layanan dapat digunakan untuk caching. Berikut ini beberapa contohnya:- Hanya caching - Anda memiliki konten statis yang tidak pernah berubah.
- Jaringan atau cache - Anda ingin menampilkan konten yang relevan kepada pengguna dengan kondisi unduhan cepat.
- Tembolok dan pembaruan - Anda ingin menampilkan konten secara instan dan tidak keberatan sinkronisasi berkala dengan server.
- Tembolok, perbarui, dan mulai ulang - Anda ingin menampilkan konten secepat mungkin, secara tersirat memperbarui setiap bagiannya dan menampilkannya dengan cara yang "mulus".
Dorong Web
Dorongan web memungkinkan aplikasi untuk mengirim pemberitahuan push dan menampilkan konten yang diterima sebagai tanggapan atas pemberitahuan ini.- Dorong dan perbarui konten - Anda ingin membagikan (mengirim dan menerima) konten yang tersedia.
- Push dan konten - Anda ingin beroperasi tidak hanya dengan teks, tetapi juga dengan jenis informasi lain yang memperkaya pesan Anda.
- Dorongan jenuh - Anda ingin menampilkan gambar, proses boot dan hal-hal lain yang meningkatkan pesan yang ingin Anda sampaikan.
- Push dan client - Anda ingin menampilkan notifikasi tergantung pada kondisi aplikasi.
Kasus penggunaan yang lebih kompleks
API Analisis
Saya punya aplikasi. Dan saya ingin menambahkan kemampuan untuk memonitor penggunaan aplikasi. Untuk melakukan ini, saya mengambil API sinkron untuk memperbarui data yang dikumpulkan dari waktu ke waktu.Load balancer
Misalkan Anda ingin dapat memilih penyedia konten terbaik berdasarkan kinerja server. Dalam hal ini, Anda membutuhkan pekerja layanan untuk mencegat permintaan dan membuat pilihan.Saya sangat menyarankan Anda mengunjungi ServiceWorke.rs untuk melihat lebih dalam pada pekerja layanan.Kami melatih keterampilan
Seperti yang selalu saya katakan: "Jika Anda ingin belajar berenang, masuklah ke air." Mempelajari teori adalah hal yang luar biasa, tetapi sampai tangan Anda kotor, Anda tidak akan belajar apa pun.Pendaftaran Pekerja Layanan
Jika kita kembali ke ilustrasi siklus hidup seorang pekerja layanan, kita akan melihat bahwa pertama-tama kita perlu menginstalnya. Untuk melakukan ini, kita perlu mendaftarkannya.
if('serviceWorker' in navigator){
console.log('- ')
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
console.log(`- , scope: ${registration.scope}`)
})
})
.catch(error => {
console.log(` : ${error}`)
})
}
Anda dapat memverifikasi pekerjaan pekerja layanan dengan masuk ke: Chrome: // inspect / # service-worker.
Juga, informasi tentang status pekerja layanan dapat diperoleh di alat pengembang: Aplikasi -> Pekerja Layanan.
Apa berikutnya?
Sekarang kita perlu melakukan cache semua file. Kita dapat memilih file untuk cache. Begini tampilannya:
const CACHE_NAME = 'example.com-v1'
const cacheAssets = ['index.html', 'about.html', 'js/main.js']
self.addEventListener('install', e => {
console.log('- ')
e.waitUntil(
caches
.open(CACHE_NAME)
.then(cache => {
console.log(' -: ')
cache.addAll(cacheAssets)
})
.then(() => {
self.skipWaiting()
})
)
})
Inilah yang terjadi di sini:- Kami menentukan nama cache (example.com-v1).
- Kami memilih file untuk cache. Untuk melakukan ini, buat sebuah array.
- Di dalam event handler "instal", kami memberi tahu browser untuk menunggu penyelesaian janji, lalu membuka cache, yang akan disimpan sebagai "example.com-v1".
- Terakhir, tambahkan file yang dipilih ke cache.
Hapus cache yang tidak digunakan
Selanjutnya, kita perlu menghapus versi cache yang lama:
self.addEventListener('activate', e => {
console.log('- ')
e.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if(cache !== CACHE_NAME){
console.log(' ')
return caches.delete(cache)
}
})
)
})
)
})
Terima respons
Tidak satu pun dari hal di atas masuk akal jika kita tidak memiliki cara untuk mendapatkan konten yang di-cache.Itu bisa diperoleh menggunakan fetch event handler:
self.addEventListener('fetch', e => {
e.respondWith(
fetch(e.request)
.then(res => {
const copyCache = res.clone()
caches.open(CACHE_NAME).then(cache => {
cache.put(e.request, copyCache)
})
return res
})
.catch(error => caches.match(e.request).then(res => res))
)
})
Semua kode dapat dilihat di sini .Terima kasih atas perhatian Anda.