প্রিক্যাচিং ছাড়া ওয়ার্কবক্স ব্যবহার করা

এখনও অবধি, এই ডকুমেন্টেশনটি প্রিক্যাচিংয়ের ক্ষেত্রে বড় হয়েছে, প্রায়শই generateSW এবং injectManifest বিল্ড টুলগুলিতে স্পর্শ করে। যদিও আপনার পরিষেবা কর্মীতে প্রিক্যাচিং লজিক অন্তর্ভুক্ত করার জন্য প্রচুর ভাল কারণ রয়েছে, আপনাকে ওয়ার্কবক্স ব্যবহার করার জন্য প্রিক্যাচিং ব্যবহার করতে হবে না।

সম্ভবত আপনার প্রকল্পের শুধুমাত্র রানটাইম ক্যাশিং প্রয়োজন, অথবা আপনি ওয়েব পুশের মতো পরিষেবা কর্মী API গুলিকে সংহত করার জন্য একটি পরিষ্কার উপায় চান। এগুলি এমন ক্ষেত্রে যখন আপনি ওয়ার্কবক্সের বিল্ড সরঞ্জামগুলি ব্যবহার করতে চান না এবং এই নিবন্ধে এটিই কভার করা হয়েছে।

একটি বান্ডলার ব্যবহার করার সময়

বান্ডলারগুলি ওয়েব ডেভেলপমেন্ট ল্যান্ডস্কেপে বিশিষ্ট, এবং আপনার প্রোজেক্টের একটি ব্যবহার করার একটি ভাল সুযোগ রয়েছে। যদি এটি হয়, তবে এটি জানা গুরুত্বপূর্ণ যে আপনি যদি কিছু প্রিক্যাচ না করেন তবে আপনাকে একটি বান্ডলার প্লাগইন (যেমন workbox-webpack-plugin ) ব্যবহার করার দরকার নেই৷ আপনি আপনার পরিষেবা কর্মীকে আপনার আবেদনে একটি পৃথক এন্ট্রি পয়েন্ট হিসাবে বিবেচনা করবেন।

আপনার প্রোজেক্টের সোর্স ডিরেক্টরির মূলে, আপনি একজন পরিষেবা কর্মী তৈরি করবেন এবং আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ওয়ার্কবক্স মডিউলগুলি ব্যবহার করবেন। এখানে প্রিক্যাচিং ছাড়াই একটি উদাহরণ দেওয়া হল, যা পরিবর্তে আলাদা Cache দৃষ্টান্তে নেভিগেশন এবং চিত্র সম্পদের অনুরোধের জন্য ক্যাশিং কৌশল সেট আপ করে:

// 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);

এখান থেকে, এই পরিষেবা কর্মীকে আপনার পছন্দের বান্ডলারে একটি এন্ট্রি পয়েন্ট হিসাবে উল্লেখ করার বিষয়। কয়েকটি জনপ্রিয় বান্ডলারে কীভাবে এটি করা যায় তার কয়েকটি উদাহরণ নীচে দেওয়া হল।

ওয়েবপ্যাক

ওয়েবপ্যাক তার entry কনফিগারেশনে এন্ট্রি পয়েন্ট গ্রহণ করে। এই পদ্ধতিটি ব্যবহার করার সময় কয়েকটি বিষয় সচেতন হতে হবে:

1. আপনার পরিষেবা কর্মীর সম্ভাব্য বিস্তৃত সুযোগ রয়েছে তা নিশ্চিত করতে, আপনি এটিকে আপনার আউটপুট ডিরেক্টরির মূলে আউটপুট করতে চাইবেন।
2. আপনি চান না যে পরিষেবা কর্মী সংস্করণ করা হোক, কারণ এটির আপডেটগুলি নতুন হ্যাশ তৈরি করবে যার ফলে আপনার ওয়েবসাইটে একাধিক পরিষেবা কর্মী নিয়োগ করা হতে পারে৷

উপরের শর্তগুলি সন্তুষ্ট করার জন্য, output.filename এ একটি ফাংশন পাস করা যেতে পারে যা পরীক্ষা করে যে বর্তমান এন্ট্রি পয়েন্টটি প্রক্রিয়া করা হচ্ছে পরিষেবা কর্মী এন্ট্রি পয়েন্ট কিনা। অন্যথায়, সংস্করণযুক্ত ফাইলগুলি তাদের স্বাভাবিক গন্তব্যে লেখা হয়।

// 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
  }
};

রোলআপ

রোলআপ হল ওয়েবপ্যাকের অনুরূপ পরিস্থিতি, একাধিক এন্ট্রি পয়েন্ট ব্যতীত একটি অ্যারেতে রপ্তানি করা পৃথক কনফিগারেশন অবজেক্ট হিসাবে নির্দিষ্ট করা হয়েছে:

// 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 একটি সহজবোধ্য কমান্ড লাইন ইন্টারফেস অফার করে:

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

esbuild প্রসেস.env.NODE_ENV কে ডিফল্টরূপে 'ডেভেলপমেন্ট' দিয়ে প্রতিস্থাপনের যত্ন নেবে, অথবা যদি মিনিফেকশন সক্রিয় করা থাকে তবে 'উৎপাদন'।

workbox-sw ব্যবহার করে একটি বান্ডলার ছাড়া

আপনার প্রকল্প এমনকি একটি বান্ডলার ব্যবহার নাও হতে পারে. workbox-sw আপনার সার্ভিস ওয়ার্কার এর মধ্যে একটি CDN থেকে আপনার জন্য ওয়ার্কবক্স রানটাইম লোড করতে পারে এবং যদি আপনি importScripts দিয়ে ইম্পোর্ট করেন তাহলে বিল্ড স্টেপ ছাড়াই:

// 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);

যদি CDN থেকে ওয়ার্কবক্স রানটাইম লোড করার সম্ভাবনা ভালো না হয়, তাহলে স্থানীয় URL-এর সাথে workbox-sw ব্যবহার করা সম্ভব।

উপসংহার

এখন যেহেতু আপনি প্রিক্যাচিং ছাড়া ওয়ার্কবক্স ব্যবহার করতে জানেন, আপনি আর কোনো নির্দিষ্ট বান্ডলার বা বিল্ড টুলের সাথে আবদ্ধ থাকবেন না। এটি আপনাকে ওয়ার্কবক্সের রানটাইম ক্যাশিং কোডের বিটগুলি ব্যবহার করে একজন পরিষেবা কর্মীকে হ্যান্ডক্র্যাফ্ট করার নমনীয়তা দেয় যা আপনি আগ্রহী।