sw-precache veya sw-toolbox'tan geçiş

Daha önce sw-precache ve/veya sw-toolbox kullanan geliştiriciler, Workbox kitaplık ailesine kolayca geçiş yapabilir. Workbox'a geçiş yaptığınızda, gelişmiş hata ayıklama ve geliştirici ergonomisi ile modern, genişletilebilir bir hizmet çalışanı deneyimi elde edersiniz.

Mevcut yapılandırmanızda yapılan değişiklikler

Aşağıdaki seçeneklerden herhangi biriyle yapılandırılmış sw-precache kullanıyorsanız Workbox'a geçiş yaparken aşağıdaki değişiklikleri dikkate almanız gerekir.

Yeniden adlandırılmış seçenekler

dynamicUrlToDependencies yapılandırma parametresi templatedURLs olarak yeniden adlandırıldı.

staticFileGlobs yapılandırma parametresi globPatterns olarak yeniden adlandırıldı.

runtimeCaching yapılandırma parametresi, temel Workbox modüllerinde kullanılan adlara karşılık gelen güncellenmiş bir seçenek grubu alır. Adı değiştirilen öğeyi göstermek için bu sw-precache yapılandırmasını ele alalım:

runtimeCaching: [{
  urlPattern: /api/,
  handler: 'fastest',
  options: {
    cache: {
      name: 'my-api-cache',
      maxEntries: 5,
      maxAgeSeconds: 60,
    },
  },
}],

aşağıdaki Workbox yapılandırmasıyla eşdeğerdir:

runtimeCaching: [{
  urlPattern: /api/,
  // 'fastest' is now 'StaleWhileRevalidate'
  handler: 'StaleWhileRevalidate',
  options: {
    // options.cache.name is now options.cacheName
    cacheName: 'my-api-cache',
    // options.cache is now options.expiration
    expiration: {
      maxEntries: 5,
      maxAgeSeconds: 60,
    },
  },
}],

Desteği sonlandırılan seçenekler

Ekspres stildeki joker karakter rotaları artık desteklenmemektedir. runtimeCaching yapılandırmasında veya doğrudan sw-toolbox içinde Express tarzı joker karakterli rotalar kullanıyorsanız Workbox'u kullanırken eşdeğer bir normal ifade rotasına geçin.

sw-precache taşıma işlemleri

sw-precache CLI'dan workbox-cli'ya

Komutu manuel olarak veya npm scripts tabanlı bir derleme işleminin parçası olarak sw-precache komut satırı arayüzünü kullanan geliştiriciler, taşıma işleminin en kolay yolunun workbox-cli modülünü kullanmayı tercih ederler. workbox-cli'ü yüklediğinizde workbox adlı bir ikili dosyaya erişebilirsiniz.

sw-precache CLI, komut satırı işaretleri veya yapılandırma dosyası aracılığıyla yapılandırmayı desteklemektedir. workbox CLI ise tüm yapılandırma seçeneklerinin CommonJS module.exports kullanılarak bir yapılandırma dosyasında sağlanmasını gerektirir.

workbox CLI, çeşitli farklı modları destekler. (Tümünü görmek için workbox --help simgesini kullanın.) Ancak sw-precache işlevlerine en yakın mod generateSW'dur. Bu nedenle

$ sw-precache --config='sw-precache-config.js'

şu şekilde ifade edilebilir:

$ workbox generateSW workbox-config.js

sw-precache düğüm modülünden çalışma kutusu oluşturma düğüm modülüne

sw-precache için node API'yi gulp/Grunt iş akışının bir parçası olarak veya yalnızca özel bir node derleme komut dosyası içinde kullanan geliştiriciler, workbox-build node modülüne geçerek geçiş yapabilir.

workbox-build modülünün generateSW() işlevi, sw-precache modülünün write() işleviyle en çok eşleşiyor. Önemli bir fark, generateSW() işlevinin her zaman Promise döndürmesi, eski write() işlevinin ise hem geri çağırma hem de Promise tabanlı bir arayüzü desteklemesidir.

gulp kullanımı

const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
  return swPrecache.write('service-worker.js', {
    // Config options.
  });
});

şununla değiştirilebilir:

const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
  return workboxBuild.generateSW({
    // Config options.
  });
});

sw-precache-webpack-plugin eklentisi yerine Workbox webpack eklentisi

Webpack derleme sürecinin bir parçası olarak sw-precache-webpack-plugin kullanan geliştiriciler, workbox-webpack-plugin modülündeki GenerateSW sınıfına geçerek taşıma işlemini gerçekleştirebilir.

workbox-webpack-plugin, web paketi oluşturma işlemiyle doğrudan entegre olur ve belirli bir derleme tarafından oluşturulan tüm öğeler hakkında "bilgi sahibi" olur. Bu, birçok kullanım alanında ek yapılandırma yapmadan workbox-webpack-plugin'ün varsayılan davranışına güvenebileceğiniz ve sw-precache-webpack-plugin'ün sağladığına eşdeğer bir hizmet çalışanı alabileceğiniz anlamına gelir.

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
  // ...
  plugins: [
    new SWPrecacheWebpackPlugin({
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: 'service-worker.js',
    }),
  ],
};

olarak değiştirilebilir.

const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
  // ...
  plugins: [
    new GenerateSW({
      // Config options, if needed.
    }),
  ],
};

sw-toolbox taşıma işlemleri

El yapımı sw-toolbox'tan workbox-sw'ye geçiş

sw-toolbox'ü doğrudan kullanıyorsanız (sw-precache'un runtimeCaching seçeneği aracılığıyla dolaylı olarak kullanmak yerine) Workbox'a geçişte eşdeğer davranışı elde etmek için bazı manuel düzenlemeler yapmanız gerekir. Daha fazla bilgi için workbox-routing ve workbox-strategies modüllerini inceleyerek bağlam hakkında daha fazla bilgi edinebilirsiniz.

Aşağıda, taşıma işlemine rehberlik edecek bazı kod snippet'leri verilmiştir. Bu sw-toolbox kodu:

importScripts('path/to/sw-toolbox.js');

// Set up a route that matches HTTP 'GET' requests.
toolbox.router.get(
  // Match any URL that contains 'ytimg.com', regardless of
  // where in the URL that match occurs.
  /\.ytimg\.com\//,

  // Apply a cache-first strategy to anything that matches.
  toolbox.cacheFirst,

  {
    // Configure a custom cache name and expiration policy.
    cache: {
      name: 'youtube-thumbnails',
      maxEntries: 10,
      maxAgeSeconds: 30,
    },
  }
);

// Set a default network-first strategy to use when
// there is no explicit matching route:
toolbox.router.default = toolbox.networkFirst;

şu Çalışma Kutusu koduna eşdeğerdir:

importScripts('path/to/workbox-sw.js');

workbox.routing.registerRoute(
  // Match any URL that contains 'ytimg.com'.
  // Unlike in sw-toolbox, in Workbox, a RegExp that matches
  // a cross-origin URL needs to include the initial 'https://'
  // as part of the match.
  new RegExp('^https://.*.ytimg.com'),

  // Apply a cache-first strategy to anything that matches.
  new workbox.strategies.CacheFirst({
    // Configuration options are passed in to the strategy.
    cacheName: 'youtube-thumbnails',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
        maxAgeSeconds: 30,
      }),
      // In Workbox, you must explicitly opt-in to caching
      // responses with a status of 0 when using the
      // cache-first strategy.
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

// Set a default network-first strategy to use when
// there is no explicit matching route:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst());

Yardım alma

Workbox'a yapılan çoğu taşıma işleminin kolay olacağını tahmin ediyoruz. Bu kılavuzda ele alınmayan sorunlarla karşılaşırsanız lütfen GitHub'da bir sorun açarak bize bildirin.