प्रीकैशिंग, उन सबसे सामान्य चीज़ों में से एक है जिन्हें आप सर्विस वर्कर में करेंगे और Workbox इस बात को बहुत आसान बनाता है कि आप इस ज़रूरी काम को कैसे पूरा कर सकते हैं, भले ही आपने Workbox के बिल्ड टूल में से कोई भी चुना हो. इस गाइड में, आपको generateSW और injectManifest, दोनों का इस्तेमाल करके एसेट को पहले से कैश मेमोरी में सेव करने का तरीका पता चलेगा. साथ ही, आपको यह भी पता चलेगा कि आपके प्रोजेक्ट के लिए इनमें से कौनसा तरीका सबसे अच्छा रहेगा.

generateSW का इस्तेमाल करके, प्री-कैशिंग की जा रही है

generateSW, Workbox में एसेट को प्रीकैश करने का सबसे आसान तरीका है. generateSW के बारे में याद रखने वाली खास बात यह है कि आप खुद के सर्विस वर्कर नहीं लिख रहे हैं—आप Workbox से अपने लिए एक सर्विस वर्कर जनरेट करने के लिए कह रहे हैं. हालांकि, कई तरह के कॉन्फ़िगरेशन विकल्पों से, इसके काम करने के तरीके पर असर किया जा सकता है.

generateSW, डिफ़ॉल्ट रूप से अलग-अलग काम करता है. यह इस बात पर निर्भर करता है कि आपने कौनसा बिल्ड टूल इस्तेमाल किया है. workbox-webpack-plugin का इस्तेमाल करते समय, आपको कोई भी कॉन्फ़िगरेशन विकल्प बताने की ज़रूरत नहीं है. डिफ़ॉल्ट रूप से, प्लगिन अपने डिपेंडेंसी ग्राफ़ में शामिल वेबपैक की सभी चीज़ों को प्री-कैश करेगा. साथ ही, output.path की बताई गई डायरेक्ट्री में, service-worker.js नाम का सर्विस वर्कर लिख देगा

वहीं दूसरी ओर, workbox-build या workbox-cli का इस्तेमाल करने पर, लोकल फ़ाइल सिस्टम से पढ़ी गई सिर्फ़ एचटीएमएल, सीएसएस, और JavaScript एसेट ही डिफ़ॉल्ट रूप से प्री-कैश होंगी. कॉन्फ़िगरेशन के हिसाब से, आपको generateSW कॉन्फ़िगरेशन में swDest और globDirectory विकल्प के बारे में बताना होगा, ताकि प्रीकैशिंग की जा सके. हो सकता है कि आप अपने सर्विस वर्कर के व्यवहार को प्रभावित करने वाले अतिरिक्त विकल्प भी कॉन्फ़िगर करना चाहें, इसलिए दस्तावेज़ देखें.

injectManifest का इस्तेमाल करके, प्री-कैशिंग की जा रही है

injectManifest का इस्तेमाल करना generateSW इस्तेमाल करने जितना आसान नहीं है, लेकिन इसे आसानी से इस्तेमाल करने के मामले में छूट मिली है. जहां generateSW, आपके लिए सर्विस वर्कर जनरेशन को मैनेज करता है, वहीं injectManifest उस सर्विस वर्कर के लिए सोर्स के तौर पर काम करता है जिसे आपने लिखा है. साथ ही, यह प्री-कैश पर यूआरएल की सूची इंजेक्ट करता है, जबकि बाकी के सर्विस वर्कर में कोई बदलाव नहीं होता.

injectManifest का इस्तेमाल करने पर, पहले से कैश मेमोरी में सेव करने के लॉजिक को इकट्ठा करने की ज़िम्मेदारी आपकी है. जब injectManifest आपके इनपुट सर्विस वर्कर की जांच करता है, तो यह एक खास self.__WB_MANIFEST वैरिएबल ढूंढता है और उसे प्री-कैश मेनिफ़ेस्ट से बदल देता है. अगर यह वैरिएबल मौजूद नहीं है, तो injectManifest गड़बड़ी दिखाएगा.

प्रीकैश मेमोरी मेनिफ़ेस्ट की एंट्री की सूची में, अतिरिक्त कॉन्फ़िगरेशन विकल्पों की मदद से बदलाव किया जा सकता है.

साथ-साथ तुलना

generateSW और injectManifest तरीकों के इस्तेमाल की तुलना करने के लिए, यहां दिए गए हर टैब पर क्लिक करें:

generateSW सर्विस वर्कर जनरेट करता है, इसलिए आपको सिर्फ़ कॉन्फ़िगरेशन तय करना होगा. यहां workbox-build का इस्तेमाल करने का एक उदाहरण दिया गया है:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

इसके बाद, सर्विस वर्कर को नोड के साथ कमांड लाइन पर बनाया जा सकता है:

node build-sw.js

injectManifest को सोर्स सर्विस वर्कर की ज़रूरत होती है, इसलिए कम से कम काम करने वाले उदाहरण के लिए सोर्स सर्विस वर्कर फ़ाइल की ज़रूरत होती है. अगर सिर्फ़ प्री-कैशिंग की ज़रूरत हो, तो इनपुट सर्विस वर्कर कुछ ऐसा दिख सकता है:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

self.__WB_MANIFEST स्ट्रिंग को नोट करें. इस प्लेसहोल्डर को Workbox, प्रीकैश मेनिफ़ेस्ट से बदल देता है. इस्तेमाल के इस उदाहरण के लिए, नीचे एक मान्य कॉन्फ़िगरेशन दिया गया है:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

अगर आपकी ज़रूरतें जटिल हैं, तो injectManifest को प्राथमिकता दी जाती है. इनमें बेहतर रूटिंग, पसंद के मुताबिक कैश मेमोरी में सेव करने की रणनीतियां या ऐसी अन्य चीज़ें शामिल हैं जो generateSW में दिए गए विकल्पों में शामिल नहीं हैं.

नतीजा

वर्कबॉक्स में प्री-कैशिंग की सुविधा, खुद से मैनेज करने की तुलना में बहुत आसान है. खास तौर पर, जब बंडलर के इकट्ठा किए गए वर्शन वाली एसेट को मैनेज करना ज़रूरी हो. हालांकि, प्री-कैशिंग ही एक ऐसी चीज़ नहीं है जिसे आप सर्विस वर्कर में कर सकते हैं. आगे बढ़ने के साथ-साथ, आपको अन्य तकनीकें भी सीखने को मिलेंगी, जैसे कि रनटाइम को कैश मेमोरी में सेव करना.