workbox-cli

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

Workbox CLI sihirbazının ekran görüntüsü

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.