Workbox'ı önbelleğe almadan kullanma

Bu dokümanda şimdiye kadar önbelleğe alma konusuna ağırlık verilmiş ve genellikle generateSW ve injectManifest derleme araçları ele alınmıştır. Hizmet çalışanınıza önceden getirme mantığını dahil etmenin birçok iyi nedeni olsa da Workbox'u kullanmak için önceden getirmeyi kullanmanız gerekmez.

Projenizin yalnızca çalışma zamanında önbelleğe almaya ihtiyacı olabilir veya web push gibi hizmet çalışanı API'lerini entegre etmenin daha temiz bir yolunu arıyor olabilirsiniz. Bu makalede, Workbox'un derleme araçlarını kullanmak istemeyeceğiniz durumlar ele alınmaktadır.

Paketleyici kullanırken

Paketleyiciler, web geliştirme ortamında önemli bir yere sahiptir ve projenizde bir paketleyici kullanılıyor olabilir. Bu durumda, hiçbir şeyi önbelleğe almıyorsanız paketleyici eklentisi (workbox-webpack-plugin gibi) kullanmanız gerekmediğini bilmeniz önemlidir. Hizmet çalışanınızı, uygulamanızda ayrı bir giriş noktası olarak ele alırsınız.

Projenizin kaynak dizininin kökünde bir hizmet çalışanı oluşturur ve uygulamanızın ihtiyaç duyduğu Workbox modüllerini kullanırsınız. Aşağıda, ön önbelleğe alma içermeyen ve gezinme ile resim öğesi istekleri için önbelleğe alma stratejilerini ayrı Cache örneklerinde ayarlayan 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);

Burada, bu Service Worker'ı seçtiğiniz paketleyicide giriş noktası olarak belirtmeniz gerekir. Aşağıda, bunu birkaç popüler paketleyicide nasıl yapacağınıza dair birkaç örnek verilmiştir.

webpack

webpack, entry yapılandırmasında 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ını sağlamak için çıkış dizininizin köküne çıktısını göndermeniz gerekir.
  2. Hizmet çalışanının sürümlendirilmesini istemezsiniz. Çünkü hizmet çalışanında yapılan güncellemeler, web sitenizde birden fazla hizmet çalışanının dağıtılmasına neden olabilecek yeni karma oluşturma işlemleri oluşturur.

Yukarıdaki koşulları karşılamak için output.filename işlevine, işlenen mevcut giriş noktasının hizmet çalışanı giriş noktası olup olmadığını inceleyen bir işlev iletilebilir. Aksi takdirde, sürümlü 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

Rollup, webpack'e benzer bir durumdur. Tek fark, birden fazla giriş noktasının bir dizi halinde 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, process.env.NODE_ENV değerini varsayılan olarak "development" veya (küçültme etkinse) "production" ile değiştirir.

workbox-sw kullanan bir paketleyici olmadan

Projenizde bir paketleyici bile kullanılmıyor olabilir. workbox-sw, importScripts ile içe aktarırsanız Workbox çalışma zamanını hizmet çalışanınızdaki bir CDN'den ve derleme adımı olmadan sizin için 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);

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

Sonuç

Artık Workbox'ı önceden önbelleğe almadan nasıl kullanacağınızı bildiğinize göre artık belirli bir paketleyici veya derleme aracına bağlı değilsiniz. Bu sayede, yalnızca Workbox'un çalışma zamanında önbelleğe alma kodunun ilgilendiğiniz bölümlerini kullanarak bir hizmet çalışanı oluşturabilirsiniz.