Workbox'ı önbelleğe almadan kullanma

Şimdiye kadar bu dokümanlar önbelleğe alma konusunda büyük bir rol oynadı ve genellikle generateSW ve injectManifest oluşturma araçlarına değindik. Service Worker'ınıza önbelleğe alma mantığı eklemek için birçok geçerli neden olsa da Workbox'ı kullanmak için önbelleğe alma özelliğini kullanmanız gerekmez.

Projenizde yalnızca çalışma zamanında önbelleğe alma işlemine ihtiyaç duyulabilir veya web push gibi Service Worker API'lerini entegre etmenin daha temiz bir yolunu tercih edebilirsiniz. Bu durumlar, Workbox'ın derleme araçlarını kullanmak istemeyeceğiniz durumlardır ve bu makalede ele alınmıştır.

Paketleyici kullanırken

Paketleyiciler web geliştirme dünyasında öne çıkar. Projenizin bu araçları kullanma olasılığı yüksektir. Bu durumda, hiçbir şeyi önbelleğe almıyorsanız workbox-webpack-plugin gibi bir paketleyici eklentisi kullanmanız gerekmediğini bilmeniz önemlidir. Hizmet çalışanınızı uygulamanızda ayrı bir giriş noktası olarak değerlendirirsiniz.

Projenizin kaynak dizininin kök dizininde bir hizmet çalışanı oluşturacak ve uygulamanızın gerektirdiği Workbox modüllerini kullanacaksınız. Aşağıda, gezinme ve resim öğesi istekleri için önbelleğe alma stratejilerinin ayrı Cache örneklerinde ayarlandığı, önbelleğe alma içermeyen bir örnek verilmiştir:

// sw.js
import {NetworkFirst, CacheFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';

const navigationRoute = new NavigationRoute(new NetworkFirst({
  cacheName: 'navigations'
}));

const imageAssetRoute = new Route(({request}) => {
  return request.destination === 'image';
}, new CacheFirst({
  cacheName: 'image-assets'
}));

registerRoute(navigationRoute);
registerRoute(imageAssetRoute);

Bu noktadan sonra, bu hizmet çalışanını seçtiğiniz paketleyicide bir giriş noktası olarak belirtmeniz gerekir. Aşağıda, birkaç popüler paketleyicide bunu nasıl yapacağınıza dair birkaç örnek verilmiştir.

web paketi

webpack, entry yapılandırmasındaki giriş noktalarını kabul eder. Bu yaklaşımı kullanırken dikkat etmeniz gereken birkaç nokta vardır:

  1. Hizmet çalışanınızın mümkün olan en geniş kapsama sahip olması için çıktısının, çıkış dizininizin kök dizinine verilmesi gerekir.
  2. Service Worker'da yapılan güncellemeler, web sitenizde birden fazla Service Worker dağıtılmasına yol açabilecek yeni karmalar oluşturacağından hizmet çalışanı sürümünün geliştirilmesini istemezsiniz.

Yukarıdaki koşulları karşılamak için output.filename hizmetine bir işlev geçirilebilir. Bu işlev, işlenmekte olan giriş noktasının Service Worker giriş noktası olup olmadığını inceler. Aksi takdirde, sürümü oluşturulan dosyalar normal hedeflerine yazılır.

// webpack.config.js
import process from 'process';

const isProd = process.env.NODE_ENV === 'production';

export default {
  mode: isProd ? 'production' : 'development',
  context: process.cwd(),
  entry: {
    // Service worker entry point:
    sw: './src/sw.js',
    // Application entry point:
    app: './src/index.js'
  },
  output: {
    filename: ({runtime}) => {
      // Check if the current filename is for the service worker:
      if (runtime === 'sw') {
        // Output a service worker in the root of the dist directory
        // Also, ensure the output file name doesn't have a hash in it
        return '[name].js';
      }

      // Otherwise, output files as normal
      return 'js/[name].[contenthash:8].js';
    },
    path: './dist',
    publicPath: '/',
    clean: true
  }
};

grup

Birleştirme, web paketine benzer bir durumdur. Tek fark, birden çok giriş noktasının bir dizide dışa aktarılan ayrı yapılandırma nesneleri olarak belirtilmesidir:

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';

// Plugins common to both entry points
const plugins = [
  nodeResolve(),
];

export default [
  // Application entry point
  {
    input: './src/index.js',
    output: {
      dir: './dist/js',
      format: 'esm'
    },
    plugins
  },
  // Service worker entry point
  {
    input: './src/sw.js',
    output: {
      file: './dist/sw.js',
      format: 'iife'
    },
    plugins: [
      ...plugins,
      // This @rollup/plugin-replace instance replaces process.env.NODE_ENV
      // statements in the Workbox libraries to match your current environment.
      // This changes whether logging is enabled ('development') or disabled ('production').
      replace({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
      })
    ]
  }
];

esbuild

esbuild basit bir komut satırı arayüzü sunar:

npx esbuild ./src/sw.js --bundle --minify --outfile=./dist/sw.js

esbuild, transaction.env.NODE_ENV'nin varsayılan olarak "geliştirme" ile veya küçültme etkinse "üretim" ile değiştirilmesini sağlar.

workbox-sw kullanan bir paketleyici olmadan

Projenizde paketleyici bile kullanılmayabilir. importScripts ile içe aktarırsanız workbox-sw, Workbox çalışma zamanını sizin için hizmet çalışanınızdaki bir CDN'den ve bir derleme adımı olmadan yükleyebilir:

// sw.js

// Imports Workbox from the CDN. Note that "6.2.0" of the URL
// is the version of the Workbox runtime.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

const navigationRoute = new workbox.routing.NavigationRoute(new workbox.strategies.NetworkFirst({
  cacheName: 'navigations'
}));

const imageAssetRoute = new workbox.routing.Route(({request}) => {
  return request.destination === 'image';
}, new workbox.strategies.CacheFirst({
  cacheName: 'image-assets'
}));

workbox.routing.registerRoute(navigationRoute);
workbox.routing.registerRoute(staticAssetRoute);

Çalışma Kutusu çalışma zamanını bir CDN'den yükleme olasılığı pek iyi görünmüyorsa yerel URL'lerle workbox-sw kullanılabilir.

Sonuç

Artık Workbox'ı önbelleğe almadan nasıl kullanacağınızı bildiğinize göre, belirli bir paketleyiciye veya yapı aracına bağlı değilsiniz. Bu size, Workbox'ın çalışma zamanı önbelleğe alma kodunun ilgilendiğiniz parçalarını kullanarak bir hizmet çalışanı oluşturma esnekliği sağlar.