Offline Cap Yükleri için JavaScript'te Hizmet İşçilerini Anlamak ve Kullanımı

Hizmet İşçilerini Offline Cap Yük yükümlülükleri için Anlayın ve Kullanma

Modern web kullanıcıları, ağ koşulları kötü veya mevcut olmayan durumlarda bile anlık, güvenilir deneyimler bekliyor. Servis İşçileri bu beklentinin temel taşlarıdır, Progresif Web Uygulamaları (PWAs) çevrimdışı çalışmak, ağdan hızlı bir şekilde almak veya bir karma strateji uygulamak için, bir Hizmet İşçisi, gelişmiş uygulama modelleri, kalibrasyon stratejileri ve gerçek dünyadan gelen tüm talepleri takip eder.

Servis İşçileri yeni bir teknoloji değildir - birkaç yıldır büyük tarayıcılarda desteklenmiştir - ancak birçok gelişim ekibi tarafından kullanılabilir. Doğru şekilde inşa edildiğinde, Hizmet İşçileri'ni kendi JavaScript projelerinize entegre etmek için statik bir web uygulaması başlatacaksınız.

Bir Servis İşçisi Nedir?

Bir Servis Çalışanı, web sayfanızdan ayrı bir küresel alanda çalışan bir JavaScript dosyasıdır, o zaman cevap vermeye karar verir - sadece sayfanızla giriş ve iletişim kur:0) birincil işi ağ talepleri için bir ortalık olarak hareket etmektir: tarayıcı web sayfanızdan herhangi bir istek gönderilebilir, hangi sonra yanıt vermeye karar verir - ağdan, bir önbellek veya özel bir cevap oluşturmak için.

Çünkü arka planda çalışır, bir Servis İşçisi, kayıtlı olan sayfayı kapatdıktan sonra bile çalışmaya devam edebilir. Bu, görevlerin idealini yapar:

Hizmet İşçileri sıkı bir güvenlik gereksinimine güveniyor: sadece HTTPS (veya gelişim için) altında çalışıyorlar. Bu, kullanıcıların senaryoyla dolu olabilecek orta saldırılarla karşı karşıya kalabileceklerini koruyor.

Hizmet İşleyici Yaşam döngüsü

Bir Servis İşçisi iyi tanımlanmış bir yaşam döngüsü aracılığıyla ilerlemektedir: kayıt, yükleme, aktivasyon ve sonra boş / bakım.Bu yaşam döngüsü önemlidir, çünkü önbellekli kaynaklar mevcut olduğunda ve eski önbelleklerin temizlendiği zaman belirlenir.

1. Kayıt Kayıt

Herhangi bir Hizmet İşçisi mantığı çalıştırılmadan önce, sayfanız senaryoyu kayıt altına almalıdır. Bu, ana JavaScript dosyasından yapılır (genellikle sayfanın giriş noktası). Kayıt Hizmet İşçisinin konumu ve kapsamını bildirir.

if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('/service-worker.js')
 .then(function(registration) {
 console.log('Service Worker registered with scope:', registration.scope);
 })
 .catch(function(error) {
 console.log('Registration failed:', error);
 });
}

Eğer senaryo zaten var ise, tarayıcı daha önce yüklenen sürümle aste-forbayt içeriği karşılaştırır.Eğer değişmişse, eski sürüm sayfaları kontrol etmeye devam ederken yeni bir sürüm arka planda kurulur.

2. Kurulum 2.

[[TheFLT:3) Olay Hizmet Çalışmanız'ın ilk olaydır. Bu, uygulamanızın çevrimdışı çalışmanız için gerekli olan temel dosyaları önlemek için mükemmel bir zamandır: uygulama kabuğu, temel CSS, JavaScript ve herhangi bir düşüş sayfaları.

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
 '/',
 '/styles/main.css',
 '/scripts/main.js',
 '/offline.html'
];

self.addEventListener('install', function(event) {
 event.waitUntil(
 caches.open(CACHE_NAME)
 .then(function(cache) {
 console.log('Opened cache');
 return cache.addAll(urlsToCache);
 })
 );
});

Dosyalardan herhangi biri, kurulum aşamasında başarısız olursa ve Hizmet Çalışması kurulu olarak kabul edilmez. Bu, kısmen önbellekli bir uygulamanız olması için bir güvenlik özelliğidir.

3. Aktivasyona Aktivizasyon 3.

Kurulumdan sonra, tarayıcı eski Hizmet İşçisi ile yüklenen tüm sayfalara kadar bekler. Sonra etkinlik, ESFLT:6'yi yangınlar. Bu olay genellikle eski önbellekleri temizlemek ve aktivasyondan önce açılan herhangi bir sayfayı kontrol etmek için kullanılır.

self.addEventListener('activate', function(event) {
 const cacheWhitelist = [CACHE_NAME];
 event.waitUntil(
 caches.keys().then(function(cacheNames) {
 return Promise.all(
 cacheNames.map(function(cacheName) {
 if (cacheWhitelist.indexOf(cacheName) === -1) {
 return caches.delete(cacheName);
 }
 })
 );
 })
 );
});

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=

4. Fetch Events

etkinleştirildiği zaman, Hizmet Çalışması, 15.000T:10 için dinliyor. Her seferinde tarayıcı kontrollü bir sayfadan bir istek başlatır, Hizmet İşçisi bunu durdurabilir.

self.addEventListener('fetch', function(event) {
 event.respondWith(
 caches.match(event.request)
 .then(function(response) {
 // Cache hit - return response
 if (response) {
 return response;
 }
 return fetch(event.request);
 }
 )
 );
});

Farklı Senaryolar için Caching Strategies

Doğru kalibrasyon stratejisi tazelik ve hız arasındaki dengeyi belirler. Tek boyutlu bir uyum yoktur; farklı kaynaklar farklı yaklaşımlar gerektirir.

İlk önce (Cache sonra Network)

Nadiren değişen statik varlıklar için en iyisi: görüntüler, fontlar, CSS. Hizmet Çalışanı önbellekleri kontrol eder; eğer bulunursa hemen geri döner.Eğer değilse, ağdan getirir ve yanıt verir.Bu strateji yıldırım tekrar yükleri üretir.

self.addEventListener('fetch', function(event) {
 event.respondWith(
 caches.match(event.request)
 .then(function(response) {
 return response || fetch(event.request).then(function(networkResponse) {
 return caches.open(CACHE_NAME).then(function(cache) {
 cache.put(event.request, networkResponse.clone());
 return networkResponse;
 });
 });
 })
 );
});

NetworkFirst (Flor Fallback ile Ağ)

Dinamik içerik için ideal: API uç noktaları, haberler ilk önce ağ deneyin; başarısız olursa veya çok yavaşsa, önbellek sürüme geri dönün.Bu, kullanıcıların her zaman çevrimdışı olmadıkça en son verileri görmesini sağlar.

self.addEventListener('fetch', function(event) {
 event.respondWith(
 fetch(event.request)
 .then(function(networkResponse) {
 return caches.open(CACHE_NAME).then(function(cache) {
 cache.put(event.request, networkResponse.clone());
 return networkResponse;
 });
 })
 .catch(function() {
 return caches.match(event.request);
 })
 );
});

Stale while-Revalidate

Anında taze olmak zorunda olmayan kaynaklar için en iyisi: profil avatarlar, RSS feeds. hemen önbellek sürümle yanıt verin, ancak ayrıca arka planda ağdan bir güncelleme yapın.

self.addEventListener('fetch', function(event) {
 event.respondWith(
 caches.open(CACHE_NAME).then(function(cache) {
 return cache.match(event.request).then(function(cachedResponse) {
 var fetchPromise = fetch(event.request).then(function(networkResponse) {
 cache.put(event.request, networkResponse.clone());
 return networkResponse;
 });
 return cachedResponse || fetchPromise;
 });
 })
 );
});

Ağ Sadece ve Rehberlik

Kullanıcı bankacılık detayları gibi hassas veriler için, kullanım:0)Network-Only[Dönetici: 1)) (gösterme) Tamamen çevrimdışı statik içerik (örneğin, bir el kitabı) için, [[Dört:2|kache-Only[DDD) yeterli olabilir.

Gelişmiş Servis İşer Özellikler

Kaliksiyonun ötesinde, Servis İşçileri güçlü arka yetenekleri ortaya çıkarır.

Arka plan Sen

Bir kullanıcı çevrimdışı iken bir form gönderir veya mesaj gönderirken, bu eylemi kaybetmek istemezsiniz.TheurFLT:15) Tarayıcının bir kez bağlantıya geri döneceğine dair bir senkronizasyon kaydınızı sağlar.

// In page script
navigator.serviceWorker.ready.then(function(registration) {
 return registration.sync.register('sync-messages');
});

// In Service Worker
self.addEventListener('sync', function(event) {
 if (event.tag === 'sync-messages') {
 event.waitUntil(sendPendingMessages());
 }
});

Arka plan senkronizasyonu sohbet uygulamaları, form teklifleri veya olay tutarlılığa ihtiyaç duyan herhangi bir veri kuyruğu için idealdir.

Push Bildirims

Push mesajları bir sunucudan gelir ve Hizmet İşçisi uyandırır, bu da bir bildirim gösterir. Bu, web uygulamanız kapalıyken bile çalışır, PWAs'a yerel bir his verir.

self.addEventListener('push', function(event) {
 const options = {
 body: 'This notification was triggered by a push message.',
 icon: '/icons/icon-192x192.png',
 badge: '/icons/badge.png',
 data: {
 url: '/new-content'
 }
 };
 event.waitUntil(
 self.registration.showNotification('New Update', options)
 );
});

Bildirime tıklayın, olay için belirli bir URL açabilir.

Güvenlik ve Kapsam

Servis İşçileri talepleri ele alabilir ve değiştirebilir, bu yüzden kötü senaryoların enjekte edilmesinden kaçınmak için HTTPS üzerinden servis edilmelidir. Yerel gelişim sırasında tarayıcılar Hizmet İşçilerine izin veriyor ve taleplerde bulunabilirler. Üretimde, Hizmet Çalışmanız için her zaman Hizmetinizin dosyasını HTTPS üzerinden hizmet edin.

[FONT=0]Zemin [FONT=FONT=0]) Bir Hizmet Çalışmasının hangi sayfaları kontrol ettiğini belirler.In default, the directory is the directory where the Service Worker script is located. to expand the scope (e.g., control all pages underurFLT:20), you can set theFLT:21. you must also include aENFLT:22).

Debugging Service İşçileri

Browser DevTools, Hizmet İşçisi Davranışını Denetimk için gereklidir. Chrome, openurFLT:23) veya Uygulamaya gidin → Servis İşçileri. Her işçinin statüsünü görebilir, manuel olarak başlayın / onları durdurun ve net kayıtlar Firefox aşağıdaki gibi araçlar sunar:debugging.

Common debugging ipuçları:

Performans Implikasyons

Hizmet İşçileri dramatik olarak algılanan performansı geliştirebilir, ancak aynı zamanda karmaşıklığı da ortaya çıkarabilirler. Kurulum sırasında çok fazla kaynak "yükleme" adımı geciktirebilir ve zaman kesintileri gerçekleşmezse yüklemeye neden olur. İyi bir uygulama sadece minimum kabuk inurFLT:25) ve lazily ek kaynaklar getiriyor.

Önbellek büyüklüğü, bu kotayı doldurabilir ve Storage API'si () kullanım izlemek için kullanılabilir.

Başka bir performans tuzağı: Hizmetiniz Çalışanı, aminkör desenleri kullanarak eller hafife alabilir veya atekron desenleri kullanabilir.

Ortak Pitfalls ve Them'dan Nasıl Kaçırmak

Gerçek Dünya Örneği: Basit Offline-Ready PWA

Her şeyi birlikte koyalım. Onun kabukunu önleyen ve çevrimdışı bir düşüş sağlayacak küçük bir PWA oluşturacağız. Tam Servis Çalışması dosyası ([DÜŞÜŞÜNÜŞÜŞÜNÜŞÜŞÜNÜŞÜNÜ)

const CACHE_NAME = 'pwa-shell-v2';
const SHELL_URLS = [
 '/',
 '/index.html',
 '/styles.css',
 '/app.js',
 '/offline.html'
];

// Install: pre‑cache shell
self.addEventListener('install', function(event) {
 event.waitUntil(
 caches.open(CACHE_NAME)
 .then(function(cache) {
 return cache.addAll(SHELL_URLS);
 })
 );
});

// Activate: clean old caches
self.addEventListener('activate', function(event) {
 const cacheWhitelist = [CACHE_NAME];
 event.waitUntil(
 caches.keys().then(function(cacheNames) {
 return Promise.all(
 cacheNames.map(function(name) {
 if (!cacheWhitelist.includes(name)) {
 return caches.delete(name);
 }
 })
 );
 }).then(function() {
 return self.clients.claim();
 })
 );
});

// Fetch: network‑first for pages, cache‑first for static assets
self.addEventListener('fetch', function(event) {
 if (event.request.mode === 'navigate') {
 // Pages: try network, fall back to cache
 event.respondWith(
 fetch(event.request).then(function(networkResponse) {
 // Update cache with fresh page
 const responseClone = networkResponse.clone();
 caches.open(CACHE_NAME).then(function(cache) {
 cache.put(event.request, responseClone);
 });
 return networkResponse;
 }).catch(function() {
 return caches.match(event.request).then(function(cached) {
 // If page not cached, show offline fallback
 return cached || caches.match('/offline.html');
 });
 })
 );
 } else {
 // Static assets: cache‑first
 event.respondWith(
 caches.match(event.request).then(function(cached) {
 return cached || fetch(event.request).then(function(networkResponse) {
 caches.open(CACHE_NAME).then(function(cache) {
 cache.put(event.request, networkResponse.clone());
 });
 return networkResponse;
 });
 })
 );
 }
});

Bu örnek, navigasyon için bir ağ ilk yaklaşımı kullanır (online, çevrimdışı geri çekilmediğinde) ve diğer tüm varlıklar için önbellekli ilk olarak kod iyice sürümlenir.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Servis İşçileri modern çevrimdışı olmayan web uygulamalarının arka kemiğidir. Basit bir caching ötesinde çok fazla giden bir program katmanı sunar: arka plan senkronizasyonu, bildirimler itin ve kaynakların nasıl servis edildiğine dair tam kontrol.Her kaynak türü için doğru kalibrasyon stratejisini seçerek, en iyi güvenlik uygulamalarını kullanarak, esnek, hızlı ve ilgi çekici olan web deneyimlerinizi oluşturabilirsiniz.

API'lere daha derin bir şekilde atlatmak için, resmi belgeye bakınız:0)MDN) ve [[Dönetici:2)Google Web Fundamentals) rehberiniz için. Gelişmiş kalibre kalıpları için, [[Dönderlik|Dönderlik|Döneticileri[Döndergiler için]