İki API, güvenilir web uygulamaları oluşturmada çok önemli bir rol oynar: Hizmet çalışanı ve Önbellek Depolama Alanı. Ama ve onları etkili bir şekilde kullanarak, küçük hatalar ortaya çıkarmadan veya kenarlara takılmadan zor olabilir. Örneğin, hizmet çalışanı kodunuzdaki hatalar önbelleğe alma sorunlarına neden olur; kullanıcılara eski içerik veya bozuk içerik gösterilebilir bağlantılarını kullanın.
Çalışma kutusu, üst düzey bir Hizmet Çalışanı ve Önbellek Depolama Alanı üzerine kurulu hizmet çalışanı araç seti API'ler. Veri tabanına çevrimdışı desteği eklemek için üretime hazır bir kitaplık seti web uygulamaları. Araç seti iki koleksiyon halinde yapılandırılır: yönetime yardımcı olan araçlar hizmet çalışanınızın içinde çalışan kodu ve geliştirmenizi sağlar.
Çalışma zamanı kodu
Bu, Service Worker komut dosyanızın içinde çalışan ve giden isteklere müdahale eder ve Cache Storage API ile etkileşime geçer. Çalışma kutusunda toplamda onlarca kitaplık modülü var, her biri çeşitli özel kullanım alanlarına uygun. En önemli modüller hizmet çalışanının yanıt verip vermeyeceğini belirlemek yönlendirme), ve nasıl yanıt vereceğini ( önbelleğe alma stratejiniz için geçerlidir).
Entegrasyon oluşturun
Çalışma kutusu teklifleri komut satırını kullanıyorsanız Node.js modülü, ve webpack eklentisi iki şeyi başarmak için alternatif yollar sunan araçlar:
- Bir yapılandırma grubuna dayalı olarak Service Worker komut dosyası oluşturma seçenekleri vardır. Oluşturulan hizmet çalışanı, Workbox'ın çalışma zamanı kitaplıklarını kullanır "gizli" önbellek oluşturma stratejilerini nasıl uygulayacağınızı öğreneceksiniz.
- Olması gereken URL'lerin listesini oluştur "önbelleğe alınmış", oluşturulan dosyaları dahil etmek ve hariç tutmak için yapılandırılabilir kalıplara göre en iyi uygulamaları göz önünde bulundurun.
Neden Workbox'ı kullanmalısınız?
Hizmet çalışanınızı oluştururken Workbox'ı kullanmak isteğe bağlıdır. Birkaç tane vardır size rehberlik eden yaygın önbelleğe alma stratejileri "vanilya"dan perspektifinden bakalım. Workbox'ı kullanmaya karar verirseniz faydalarından bazılarına göz atın.
Önbellek yönetimi
Çalışma kutusu, hem sizin yerinize hem de derleme işleminize bağlı olan önceden önbelleğe alma veya çalışma zamanı kullanılırken yapılandırılabilir boyut/yaş politikaları aracılığıyla önbelleğe alma. Temel Önbellek Depolama API'si güçlüdür, ancak önbellek son geçerlilik tarihi için yerleşik destek. Çalışma kutusu gibi araçlar bu boşluğu doldurur.
Kapsamlı günlük kaydı ve hata raporlama
Service Worker'ları kullanmaya başlarken bir şeyin neden olduğunu anlamak
önbelleğe alınması (veya aynı derecede sinir bozucu olması, neden önbelleğe alınmaması gibi) bir zorluk.
Workbox, uygulamanızın geliştirme sürümünü çalıştırdığınızı otomatik olarak algılar
web sitenizi localhost adresinde ziyaret etmeli ve tarayıcınızın JavaScript'inde hata ayıklama günlük kaydını etkinleştirmelidir
konsolu.
Günlük mesajlarını takip ederek, sisteminizdeki herhangi bir çok daha hızlı bir şekilde ortaya çıkan yapılandırma veya geçersiz kılma sorunlarını yaşandığını söylüyor.
Tarayıcılar arası test edilmiş kod tabanı
Workbox, tarayıcılar arası test paketlerine göre geliştirilir ve mümkün olduğunda otomatik olarak temel alınan özelliklerin alternatif uygulamalarına bazı tarayıcılarda görünmez.
- İlgili içeriği oluşturmak için kullanılan
workbox-broadcast-cache-update module, Yayın Kanalı API'si ve mevcut bir süreye geri döndüğündepostMessage()tabanlı tarayıcılarla nasıl çalışabileceğinizle ilgili daha fazla bilgi edinin. - İlgili içeriği oluşturmak için kullanılan workbox-background-sync modülü , Arka Plan Senkronizasyonu API'si en iyi şekilde çalışır. Aksi takdirde, ve hizmet çalışanı başlatılır.
Workbox'ı nasıl kullanmanız gerekir?
Çerçeve entegrasyonu
Yeni bir projeye sıfırdan başlıyorsanız, proje yöneticisi olarak Birçok popüler başlangıç kitinde ve eklenti eklentisinde bulunan çalışma kutusu entegrasyonu:
Mevcut derleme işleminize Çalışma Kutusu ekleme
Siteniz için zaten bir oluşturma süreciniz varsa uygun komut satırını kullanıyorsanız Node.js modülü, veya webpack eklentisi aracını kullanabilirsiniz.
Özellikle, Workbox komut satırı arayüzü, kalkış ve
çalışıyor, yerel geliştirmenizi kontrol edecek bir wizard modu bulunuyor
ortama ve kullanım alanına göre makul bir varsayılan yapılandırma
devam edecek:
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
Hizmet çalışanınızı derlemek için workbox generateSW workbox-config.js komutunu çalıştırın
karar verme sürecidir. Ayrıntılı bilgi için generateSW belgelerini inceleyin.
workbox-config.js dosyasında değişiklik yaparak hizmet çalışanınızı daha da özelleştirebilirsiniz.
Ayrıntılar için seçenekler belgelerine göz atın.
Workbox'ı mevcut bir hizmet çalışanında çalışma zamanında kullanma
Mevcut bir hizmet çalışanınız varsa ve Workbox'ın çalışma zamanını denemek istiyorsanız kütüphaneler Workbox'ı resmi CDN'den içe aktarma ve çalışma zamanı önbelleğine almak için hemen kullanmaya başlayabilirsiniz. Bu kullanım , böyle bir durumda önceden önbelleğe alma özelliğinden yararlanamazsınız. derleme zamanı entegrasyonu gerektirir), ancak prototip oluşturmak ve farklı farklı önbellek stratejileri oluşturabilirsiniz.
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);