Service workers - browser, dastur va internet orasida "ma'lum bir" maqsadlarda ishlatsa bo'ladigan Web API hisoblanadi.
Service workers veb-ilovaning orqa fonida fonida, main brauzer thread’dan alohida ishlaydigan skriptlardir. Ular bildirishnomalar(push notifications), orqa fondagi sinxronizatsiya va oflayn imkoniyatlarni faollashtirib beradi. Service worker’lar veb-ilova, brauzer va network(tarmoq) o'rtasida vositachi sifatida ishlaydi. Service worker’lar qanday va qachon foydalanish mumkinligiga misollar keltiramiz:
1. Offline Support(oflayn qo’llab quvvatlash):
- Service worker foydalanuvchi veb-saytga birinchi marta tashrif buyurganida muhim resurslarni (HTML, CSS, JavaScript, tasvirlar) keshlab oladi.
- Keyingi tashrif buyurgan vaqtlarda keshdan olib berishi mumkin, bu uzluksiz oflayn imkoniyatni yaratib beradi.
2. Push Notifications(bildirishnoma):
- Service worker’lari hatto veb-ilova ochiq bo'lmaganda ham push notification’larni yetkazib berish imkonini beradi.
- Bildirishnomalar tashqi hodisalar yoki server yangilanishlari bilan ishga tushishi mumkin.
3. Background Synchronization(orqa fonda sinxronlash):
- Service worker’lari background synchronization imkonini beradi, bu orqa fonda ilovaga ma'lumotlarni yangilash yoki yangi kontentlarni tortib olish imkonini beradi.
- Bu real vaqtda ma'lumotlarni yangilash uchun foydali hisoblanadi.
4. Dynamic Content Caching:
- Service worker’lar foydalanuvchini web sahifadagi harakati asoslanib, dinamik ravishda kontentni keshlashi mumkin.
- Bu tez-tez kiriladigan kontentni tezda yetkazib berishga yordam beradi.
5. Performance Optimization:
- Assets va resurslarni oldindan keshlash orqali Service worker’lar web sahifaning performance’ni sezilarli darajada yaxshilaydi.
- Ular yuklash jarayonini optimallashtirish orqali foydalanuvchining xatti-harakati asosida resurslarni tanlab yuklashi mumkin.
6. Background Fetch:
- Service worker’lar orqa fonda yuklashni faollashtiradi, bu esa hatto katta fayllar yoki resurslarni yuklab olish imkonini beradi.
Odatda siz biror bir web sahifaga kirganingizda, web sahifa serverga so’rov yuboradi va server ma’lumotlarni sizga qaytarib beradi:
Agar sizda Service worker ro’yhatdan o’tgan bo’lsa, u web browser va server’ning o’rtasiga middleware sifatida qo’shilib oladi:
U serverga bo’lgan so’rovni to’xtatib, serverga so’rov yuborilishi yoki oflayn holatda ishlasihi hal qiladi. Va sizga bu holatda 404 Not Found pageni ko’rsatish o’rniga butun sahifani oflayn ham ko’rishingiz mumkin bo’ladi. Service worker’lar bilan siz custom oflayn pagelarni ham qilishingiz mukin.
Siz odatiy holatda komputeringizda internet yo’q bo’lsa sizga error pageni ko’rsatib qoladi.
Internet yo’q holatda ham web sahifaga accessni service worker bilan amalga oshiramiz.
Service Worker Lifecycle & Event
REGISTER → INSTALL → ACTIVATE → FETCH
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<!-- Scripts -->
<script src="main.js" defer></script>
</head>
<body>
<!-- istalgan kodlaringizni yozishingiz mumkin... -->
</body>
</html>
main.js fileni htmlga ulab oldik.
main.js
// service worker browser tomonidan support qilinishini tekshirib olamiz
if ('serviceWorker' in navigator) {
// web sahifa browserga yuklanishi bilan ishlashini aytib o'tamiz
window.addEventListener('load', () => {
// 1. service workerni registratsiyadan o'tkazamiz.
navigator.serviceWorker
.register('sw.js') // bizda sm.js file ochib olishimiz kerak bo'ladi. va bu yerdagi register ushani target qiladi.
.then((registration) =>
console.log('Service Worker registered with scope:', registration.scope)
)
.catch((error) => {
console.error('Service Worker registration failed:', error);
});
});
}
sw.js
// browser kashda qanday nom nilan saqlanishini bildirish uchun nom beramiz
const cacheName = 'my-cache-v1';
// Qaysi fayllarni kashlashini aytib o'tib ketamiz
const cacheFiles = ['index.html', 'posts.html', 'css/style.css', 'js/main.js'];
// 2. INSTALL qilamiz
self.addEventListener('install', (event) => {
event.waitUntil(
// kashdan biz bergan nom bilan joy ochadi va bizni fayllarimizni joylaydi.
caches.open(cacheName).then((cache) => cache.addAll(cacheFiles))
);
});
// 3. ACTIVATE qilish
self.addEventListener('activate', () => {
console.log('Server worker activated');
});
// 4. FETCH, ya'ni oflayn holatimizda kashlangan fillarni ko'rsatish uchun olish
self.addEventListener('fetch', (event) => {
event.respondWith(
caches
.match(event.request)
.then((response) => response || fetch(event.request))
);
});
Bu hoaltni qilib bo’lganimizdan keyin browserning dev tools qismidagi Applications ustuniga o’tib Servise workers qismini ko’rsak activatsiya bo’lganini ko’rishimiz mumkin.
Cache storage qismiga o’tkas biz uchun biz bergan nom bilan joy ochib belgilagan fillarni olgan bo’ladi.
Va bularni ko’rib olganimizdan keyin natijani ko’rsak bo’ladi:
Ko’rganingizdek endi oflayn holatda ham ishlayabdi. Oflayn holatda Service Worker Cache Storage’da biz uchun ochgan joydan olib berayabdi.
Top comments (0)