1. Hoş geldiniz
Bu laboratuvarda, mevcut bir web uygulamasını çevrimdışı çalışacak şekilde ayarlayacaksınız. Bu codelab, Progresif Web Uygulaması atölyesi için hazırlanan bir dizi yardımcı codelab'in ilkidir. Bu seride yedi codelab daha var.
Neler öğreneceksiniz?
- Hizmet çalışanını manuel olarak yazma
- Mevcut bir web uygulamasına Service Worker ekleme
- Kaynakları çevrimdışı kullanılabilir hale getirmek için Service Worker ve Cache Storage API'yi kullanma
Bilmeniz gerekenler
- Temel HTML ve JavaScript
İhtiyacınız olanlar
- Service Worker'ları destekleyen bir tarayıcı
2. Hazırlanın
Bu codelab'i tamamlamak için gereken başlangıç kodunu klonlayarak veya indirerek başlayın:
Depoyu klonlarsanız starter dalında olduğunuzdan emin olun. Zip dosyası, söz konusu şubenin kodunu da içerir.
Bu kod tabanı için Node.js 14 veya sonraki bir sürümü gerekir. Kod kullanılabilir hale geldiğinde, ihtiyacınız olan tüm bağımlılıkları yüklemek için komut satırından kodun klasöründe npm ci komutunu çalıştırın. Ardından, kod laboratuvarı için geliştirme sunucusunu başlatmak üzere npm start komutunu çalıştırın.
Kaynak kodunun README.md dosyası, dağıtılan tüm dosyalarla ilgili açıklama sağlar. Ayrıca, bu codelab boyunca kullanacağınız mevcut temel dosyalar şunlardır:
Önemli Dosyalar
js/main.js- Ana uygulama JavaScript dosyasıservice-worker.js: Uygulamanın hizmet çalışanı dosyası
3. Çevrimdışı Test Etme
Herhangi bir değişiklik yapmadan önce, web uygulamasının şu anda çevrimdışı çalışmadığını göstermek için test edelim. Bunu yapmak için bilgisayarınızın internet bağlantısını kesin ve web uygulamasını yeniden yükleyin veya Chrome kullanıyorsanız:
- Chrome Geliştirici Araçları'nı açın.
- Uygulama sekmesine geçin.
- Service Workers (Servis Çalışanları) bölümüne geçin.
- Çevrimdışı onay kutusunu işaretleyin.
- Chrome Geliştirici Araçları'nı kapatmadan sayfayı yenileme
Site test edildi ve çevrimdışı yüklenemedi. Şimdi biraz çevrimiçi işlevsellik ekleme zamanı! Çevrimdışı onay kutusunun işaretini kaldırın ve sonraki adıma geçin.
4. Diğer platformlarda da aktif olun.
Temel bir hizmet çalışanı eklemenin zamanı geldi. Bu işlem iki adımda gerçekleşir: hizmet çalışanını kaydetme ve kaynakları önbelleğe alma.
Hizmet çalışanı kaydetme
Boş bir service worker dosyası zaten var. Bu nedenle, değişikliklerin gösterildiğinden emin olmak için bu dosyayı uygulamamıza kaydedelim. Bunun için js/main.js dosyasının en üstüne aşağıdaki kodu ekleyin:
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Açıklama
Bu kod, sayfa yüklendikten sonra ve yalnızca site hizmet çalışanlarını destekliyorsa boş service-worker.js hizmet çalışanı dosyasını kaydeder.
Kaynakları önceden önbelleğe alma
Web uygulamasının çevrimdışı çalışması için tarayıcının ağ isteklerine yanıt verebilmesi ve bu istekleri nereye yönlendireceğini seçebilmesi gerekir. Bunun için service-worker.js bölümüne aşağıdakileri ekleyin:
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
Şimdi tarayıcıya dönün, önizleme sekmenizi kapatıp tekrar açın. Service worker'daki farklı etkinliklere karşılık gelen console.log simgelerini görmelisiniz.
Ardından tekrar çevrimdışı moda geçin ve siteyi yenileyin. Çevrimdışı olsanız bile sayfanın yüklendiğini görürsünüz.
Açıklama
Hizmet çalışanının yükleme etkinliği sırasında, Cache Storage API kullanılarak adlandırılmış bir önbellek açılır. precacheResources içinde belirtilen dosyalar ve rotalar, cache.addAll yöntemi kullanılarak önbelleğe yüklenir. Bu işleme önceden önbelleğe alma adı verilir. Bunun nedeni, dosyaların ihtiyaç duyulduğunda veya istendiğinde önbelleğe alınması yerine, yükleme sırasında dosya grubunun önceden önbelleğe alınmasıdır.
Service worker siteyi kontrol etmeye başladığında, istenen kaynaklar proxy gibi service worker üzerinden geçer. Her istek, bu hizmet çalışanında önbellekte eşleşme arayan bir getirme etkinliğini tetikler. Eşleşme varsa önbelleğe alınmış kaynakla yanıt verir. Eşleşme yoksa kaynak normal şekilde istenir.
Kaynakların önbelleğe alınması, ağ isteklerini önleyerek uygulamanın çevrimdışı çalışmasına olanak tanır. Artık uygulama çevrimdışıyken 200 durum koduyla yanıt verebilir.
5. Tebrikler!
Service worker'ları ve önbellek depolama API'sini kullanarak web uygulamanızı nasıl çevrimdışı hale getireceğinizi öğrendiniz.
Serideki bir sonraki codelab, Workbox ile Çalışma'dır.