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

Daha önce sw-precache ve/veya sw-toolbox kullanan geliştiriciler, Workbox kitaplık ailesine doğrudan geçiş yapabilir. Workbox'a yükseltmek, daha iyi hata ayıklama ve geliştirici ergonomisi ile modern ve genişletilebilir bir hizmet çalışanı deneyimi sağlar.

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

Aşağıdaki seçeneklerden herhangi biriyle yapılandırılmış sw-precache ürününü kullanıyorsanız Workbox'a taşıma işlemi sırasında aşağıdaki değişiklikleri dikkate almanız gerekir.

Yeniden adlandırılan seçenekler

dynamicUrlToDependencies config parametresi, templatedURLs olarak yeniden adlandırıldı.

staticFileGlobs config 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. Yeniden adlandırılan öğeleri göstermek için bu sw-precache yapılandırması:

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

şu Workbox yapılandırmasına eşdeğer:

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,
    },
  },
}],

Kullanımdan kaldırılan seçenekler

Ekspres stildeki joker karakter rotaları artık desteklenmemektedir. runtimeCaching yapılandırmasında veya doğrudan sw-toolbox içinde Ekspres stil joker karakter yönlendirmelerini kullandıysanız Workbox'ı kullanırken eşdeğer bir normal ifade rotasına geçiş yapın.

sw-precache taşıma işlemleri

sw-precache CLI'dan workbox-cli'ye

sw-precache komut satırı arayüzünü kullanan geliştiriciler, komutu manuel olarak veya npm scripts tabanlı bir derleme işleminin parçası olarak çalıştırarak taşıma işleminin en kolay yolunun workbox-cli modülünü olduğunu fark eder. workbox-cli yüklendiğinde workbox adlı bir ikili programa erişim elde edersiniz.

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

workbox KSA, bir dizi farklı modu destekler. (Tümünü görmek için workbox --help öğesini kullanın.) Ancak sw-precache işlevinin işlevine en uygun mod generateSW modudur. Bu yüzden

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

şeklinde ifade edilebilir.

$ workbox generateSW workbox-config.js

sw-precache düğüm modülünden Workbox-build düğüm modülüne

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

workbox-build modülünün generateSW() işlevi, sw-precache modülünün write() işleviyle en yakın şekilde eşleşir. Temel farklardan biri, generateSW() her zaman bir Promise döndürürken eski write() işlevinin hem geri çağırmayı hem de Promise tabanlı arayüzü desteklemesidir.

Şu tarihler arasında gulp kullanımı:

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

şu şekilde değiştirilebilir:

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

sw-precache-webpack-plugin'den Workbox webpack eklentisine

Web paketi derleme işlemlerinin bir parçası olarak sw-precache-webpack-plugin'ı kullanan geliştiriciler, workbox-webpack-plugin modülü içinde GenerateSW sınıfına geçerek geçiş yapabilirler.

workbox-webpack-plugin, web paketi derleme süreciyle doğrudan entegre olur ve belirli bir derleme tarafından oluşturulan tüm öğeleri bilir. Diğer bir deyişle, birçok kullanım alanında ek yapılandırma olmadan varsayılan workbox-webpack-plugin davranışına güvenebilir ve sw-precache-webpack-plugin tarafından sağlananlara eşdeğer bir hizmet çalışanı edinebilirsiniz.

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

şu şekilde 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-araç kutusundan çalışma kutusu sw'ya geçin

sw-toolbox ürününü doğrudan kullanıyorsanız (sw-precache'in runtimeCaching seçeneği üzerinden dolaylı olarak kullanmak yerine) Çalışma Kutusu'na taşıma işleminde eşdeğer davranışı elde etmek için manuel olarak bazı düzenlemeler yapmanız gerekir. Daha fazla bağlam için workbox-routing ve workbox-strategies modülleriyle ilgili dokümanları okuyarak daha fazla bağlam sunabilirsiniz.

Aşağıda, taşıma işlemine yardımcı olacak 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 taşıma işlemlerinin çoğunun doğrudan olacağını tahmin ediyoruz. Bu kılavuzda ele alınmayan sorunlarla karşılaşırsanız lütfen GitHub'da bir sorun sayfası açarak bize bildirin.