Workbox komut satırı arayüzü (workbox-cli
paketinde yer alır), UNIX uyumlu komut satırı ortamına sahip bir Windows ve macOS'ten çalıştırılabilen, çalışma kutusu adlı bir Node.js programından oluşur. Workbox-cli, çalışma kutusu derleme modülünü sarmalar ve esnek yapılandırmalarla Workbox'ı komut satırı derleme işlemine entegre etmenin kolay bir yolunu sunar.
CLI'yı yükleme
Düğümlü KSA'yı yüklemek için terminalinizde aşağıdaki komutu çalıştırın:
npm install workbox-cli --global
CLI Modları
CLI'ın dört farklı modu vardır:
wizard
: Projeniz için Workbox'ı kurmaya yönelik adım adım açıklamalı bir kılavuz.generateSW
: Sizin için eksiksiz bir hizmet çalışanı oluşturur.injectManifest
: Önbelleğe alınacak öğeleri projenize ekler.copyLibraries
: Çalışma kutusu kitaplıklarını bir dizine kopyalayın.
wizard
Çalışma Kutusu sihirbazı, yerel dizin kurulumunuz ve hangi dosyaların önceden önbelleğe alınmasını istediğiniz hakkında bir dizi soru sorar. Yanıtlarınız, daha sonra generateSW
modunda çalışırken kullanılabilecek bir yapılandırma dosyası oluşturmak için kullanılır.
Çoğu geliştiricinin çalışma kutusu sihirbazını yalnızca bir kez çalıştırması gerekir. Desteklenen derleme yapılandırma seçeneklerinden herhangi birini kullanarak, oluşturulan ilk yapılandırma dosyasını manuel olarak özelleştirebilirsiniz.
Sihirbaz çalıştırmasını başlatmak için:
npx workbox-cli wizard
generateSW
Bir yapılandırma dosyası (sihirbaz tarafından oluşturulan dosya gibi) kullanarak eksiksiz bir hizmet çalışanı oluşturmak için Workbox KSA'yı kullanabilirsiniz.
Şu komutu çalıştırmanız yeterlidir:
npx workbox-cli generateSW path/to/config.js
Workbox'ın yerleşik önbelleğe alma ve çalışma zamanı önbelleğe alma özelliklerinden memnun olan ve hizmet çalışanlarının davranışını özelleştirmeleri gerekmeyen geliştiricilerin generateSW
modunu kullanmaları önerilir.
generateSW
ne zaman kullanılır?
- Dosyaları önbelleğe almak istiyorsunuz.
- Çalışma zamanı önbelleğe almayla ilgili basit ihtiyaçlarınız var.
generateSW
ne zaman KULLANILMAZ?
- Diğer Service Worker özelliklerini (ör. Web Push) kullanmak istiyorsanız.
- Ek komut dosyalarını içe aktarmak veya özel önbelleğe alma stratejileri için başka mantık eklemek istiyorsunuz.
injectManifest
Nihai hizmet çalışanı dosyaları üzerinde daha fazla kontrol sahibi olmak isteyen geliştiriciler injectManifest
modunu kullanabilir. Bu modda, mevcut bir Service Worker dosyanızın (konumu config.js'de belirtilen) olduğu varsayılır.
workbox injectManifest
çalıştırıldığında, kaynak hizmet çalışanı dosyanızda belirli bir dizeyi (varsayılan olarak precacheAndRoute(self.__WB_MANIFEST)
) arar. Boş diziyi, önbelleğe alınacak URL'lerin listesiyle değiştirir ve config.js
içindeki yapılandırma seçeneklerine göre Service Worker dosyasını hedef konumuna yazar.
Kaynak hizmet çalışanınızdaki kodun geri kalanı değiştirilmez.
Workbox'ı bu modda şu şekilde kullanabilirsiniz:
npx workbox-cli injectManifest path/to/config.js
injectManifest
ne zaman kullanılır?
- Service Worker'ınız üzerinde daha fazla kontrole sahip olmak istiyorsunuz.
- Dosyaları önbelleğe almak istiyorsunuz.
- Yönlendirmeyi ve stratejileri özelleştirmeniz gerekir.
- Service Worker'ınızı diğer platform özellikleriyle (ör. Web Push) kullanmak istiyorsunuz.
injectManifest
ne zaman KULLANILMAZ?
- Sitenize Service Worker eklemenin en kolay yolunu öğrenmek istiyorsunuz.
copyLibraries
Bu mod, injectManifest
kullanmak ve CDN'yi kullanmak yerine kendi kaynağınızda barındırılan Workbox kitaplık dosyalarını kullanmak istediğinizde faydalıdır.
Dosyaları aşağıdaki konuma yazacağınız bir yol ile çalıştırmanız yeterlidir:
npx workbox-cli copyLibraries third_party/workbox/
Derleme Süreci Entegrasyonu
Workbox'ın Neden Derleme İşlemimle Entegre Etmesi Gerekiyor?
Workbox projesi, web uygulamanızın service çalışanını desteklemek için birlikte çalışan çeşitli kitaplıklar içerir. Bu kitaplıkları etkili bir şekilde kullanmak için Workbox'ın, web uygulamanızın derleme sürecine entegre edilmesi gerekir. Bu sayede hizmet çalışanınız, web uygulamanızdaki tüm kritik içerikleri verimli bir şekilde önbelleğe alabilir ve bu içerikleri güncel tutabilir.
Derleme Sürecim İçin workbox-cli
Doğru Tercih mi?
Tamamen npm komut dosyalarına dayalı bir derleme işleminiz varsa workbox-cli
, iyi bir seçimdir.
Şu anda derleme aracınız olarak webpack'i kullanıyorsanız workbox-webback-plugin'i kullanmak daha iyi bir seçimdir.
Şu anda Gulp, Grunt veya Node.js tabanlı başka bir derleme aracı kullanıyorsanız workbox-build'ı derleme komut dosyanıza entegre etmek daha iyi bir seçimdir.
Hiç oluşturma işleminiz yoksa, çalışmalarınızdan herhangi birini önbelleğe almak için Workbox'ı kullanmadan önce bir oluşturma işlemi bulmanız gerekir. Workbox-cli'yi manuel olarak çalıştırmayı hatırlamaya çalışmak hataya açık olabilir ve bu komutu çalıştırmayı unutmak, geri gelen ziyaretçilere eski içeriklerin sunulmasına yol açabilir.
Kurulum ve Yapılandırma
workbox-cli
uygulamasını yerel projeniz için geliştirme bağımlılığı olarak yükledikten sonra, mevcut derleme işleminizin npm komut dosyasının sonuna workbox
çağrısını ekleyebilirsiniz:
package.json dosyasından:
{
"scripts": {
"build": "my-build-script && workbox <mode> <path/to/config.js>"
}
}
<mode>
öğesini (kullanım alanınıza bağlı olarak) generateSW
veya injectManifest
ile ve <path/to/config.js>
yerine yapılandırma seçeneklerinizin yolunu yazın. Yapılandırmanız workbox wizard
tarafından otomatik olarak oluşturulmuş veya manuel olarak değiştirilmiş olabilir.
Yapılandırma
generateSW
tarafından kullanılan seçenekler
Yapılandırma seçeneklerinin tamamını referans belgelerinde bulabilirsiniz.
injectManifest
tarafından kullanılan seçenekler
Yapılandırma seçeneklerinin tamamını referans belgelerinde bulabilirsiniz.