workbox-cli

Workbox komut satırı arayüzü ( workbox-cli paketi), çalışma kutusu adlı bir Node.js programından oluşur. Windows, macOS veya UNIX uyumlu komut satırından çalıştırılabilir bahsedeceğim. Gelişmiş seçeneklerle iş kutusu-cli, çalışma kutusu oluşturma modülünü sarmalar. Workbox'ı bir komut satırı derlemesine entegre etmenin kolay bir yolunu sunar yeni bir süreci takip etmenizi sağlar.

CLI'yı yükleme

Düğümlü CLI'yı yüklemek için terminalinizde aşağıdaki komutu çalıştırın:

npm install workbox-cli --global

CLI Modları

KSA'nın dört farklı modu vardır:

  • wizard: Projeniz için Workbox'ı kurmaya yönelik adım adım açıklamalı 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 dizininiz hakkında bir dizi soru sorar önbelleğe alınmasını istediğiniz dosyaları seçin. Yanıtlarınız şu amaçlarla kullanılır: daha sonra aynı bilgisayarda çalışırken kullanabileceğiniz bir generateSW modu.

Çoğu geliştiricinin çalışma kutusu sihirbazını yalnızca bir kez çalıştırması yeterlidir. yapılandırma dosyasını manuel olarak özelleştirmek için desteklenen derleme yapılandırması seçeneklerinden birini kullanarak oluşturun.

Sihirbaz çalıştırmasını başlatmak için:

npx workbox-cli wizard

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

generateSW

Workbox CLI'ı kullanarak eksiksiz bir hizmet çalışanı oluşturabilirsiniz. bir yapılandırma dosyası (sihirbaz tarafından oluşturulan dosya gibi)

Şu komutu çalıştırmanız yeterlidir:

npx workbox-cli generateSW path/to/config.js

Workbox'ın yerleşik önceden önbelleğe alma ve çalışma zamanı önbelleğe alma özelliklerinden memnun olan geliştiriciler ve hizmet çalışanının davranışını özelleştirmesi gerekmeyen durumlar generateSW modunu kullanmanız önerilir.

generateSW ne zaman kullanılır?

  • Dosyaları önbelleğe almak istiyorsanız.
  • Çalışma zamanı önbelleğe almayla ilgili basit ihtiyaçlarınız vardır.

generateSW ne zaman KULLANILMAZ?

  • Diğer Hizmet Çalışanı özelliklerini (ör. Web Push) kullanmak istiyorsanız.
  • Ek komut dosyalarını içe aktarmak veya özel önbelleğe alma stratejileri için ek mantık eklemek isteyebilirsiniz.

injectManifest

Nihai hizmet çalışanı dosyası üzerinde daha fazla kontrol sahibi olmak isteyen geliştiriciler içindir injectManifest modunu kullanabilir. Bu modda, mevcut hizmet çalışanı dosyası (konumu config.js'de belirtilen)

workbox injectManifest, çalıştırıldığında belirli bir dizeyi arar. Kaynağınızda (varsayılan olarak precacheAndRoute(self.__WB_MANIFEST)) hizmet çalışanı dosyası. Boş diziyi URL'leri önbelleğe alacak ve hizmet çalışanı dosyasını config.js kapsamındaki yapılandırma seçeneklerine göre hedef konumu. Kaynak hizmet çalışanınızdaki kodun geri kalanı değiştirilmez.

Workbox'ı bu modda aşağıdaki şekilde kullanabilirsiniz:

npx workbox-cli injectManifest path/to/config.js

injectManifest ne zaman kullanılır?

  • Hizmet çalışanınız üzerinde daha fazla kontrole sahip olmak istiyorsanız.
  • Dosyaları önbelleğe almak istiyorsanız.
  • Rotayı ve stratejileri özelleştirmeniz gerekiyor.
  • Hizmet çalışanınızı diğer platform özellikleriyle (ör. Web Push) kullanmak istiyorsunuz.

injectManifest ne zaman KULLANILMAZ?

  • Sitenize hizmet çalışanı eklemenin en kolay yolunu öğrenmek istiyorsanız.

copyLibraries

injectManifest özelliğini kullanmak istiyor ve Bunun yerine kendi kaynağınızda barındırılan Workbox kitaplık dosyalarını kullanmayı tercih edebilirsiniz. göz atabilirsiniz.

Dosyaları şuraya yazabileceğiniz bir yolla birlikte çalıştırmanız yeterlidir:

npx workbox-cli copyLibraries third_party/workbox/

Derleme Süreci Entegrasyonu

Workbox'ın neden Derleme Sürecimle Entegre Olması Gerekiyor?

Workbox projesi, bir dizi kütüphaneyi içerir. Bu kitaplıklar sayesinde, web uygulamanızın service Worker'a ekleyin. Bu amaçla kitaplıkları verimli şekilde kullanmasını istiyorsanız, Workbox'ın web uygulaması derleme sürecidir. Bu sayede, hizmet çalışanınız şunları yapabilir: web uygulamanızın tüm kritik içeriğini verimli bir şekilde önbelleğe almak ve güncel bilgiler sağlar.

workbox-cli, Derleme Sürecim İçin Doğru Seçim mi?

Temelini oluşturan mevcut bir derleme süreciniz varsa npm komut dosyaları, workbox-cli iyi bir seçim olur.

Şu anda derlemeniz olarak webpack kullanıyorsanız aracını kullanarak workbox-webback-plugin daha iyi bir seçim olur.

Şu anda Gulp kullanıyorsanız Grunt veya başka bir Node.js tabanlı derleme aracı, workbox-build'i derleme komut dosyanıza entegre edin daha iyi bir seçim olur.

Hiç geliştirme süreciniz yoksa bir tane oluşturmalısınız tüm öğelerinizi önceden önbelleğe almak için Workbox'ı kullanmadan önce. Deneme Workbox-cli'yi manuel olarak çalıştırmayı unutmamak hataya açık olabilir ve bu işlem geri gelen ziyaretçilere eski içerik sunulmasına neden olabilir.

Kurulum ve Yapılandırma

workbox-cli uygulamasını geliştirme olarak yükledikten sonra bağımlılığınızı artırmak için, çağrıyı şu adresten workbox öğesine ekleyebilirsiniz: mevcut derleme sürecinizin npm komut dosyasının sonu:

package.json'dan:

{
  "scripts": {
    "build": "my-build-script && workbox <mode> <path/to/config.js>"
  }
}

<mode> öğesini generateSW veya injectManifest ile değiştirin (bağlı olarak kullanım örneğinde) ve <path/to/config.js> için yapılandırma seçenekleriniz. Yapılandırmanız oluşturulmuş olabilir workbox wizard tarafından otomatik olarak veya manuel olarak ayarlanır.

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.