वर्कबॉक्स: आपका हाई-लेवल सर्विस वर्कर टूलकिट

Jeff Posnick

भरोसेमंद वेब ऐप्लिकेशन बनाने में दो एपीआई अहम भूमिका निभाते हैं: सर्विस वर्कर और कैश मेमोरी शामिल करें. लेकिन उनका असरदार तरीके से इस्तेमाल करना—इसके लिए छोटी-मोटी गड़बड़ियों का सामना नहीं करना पड़ता और उन्हें किसी समस्या से नहीं गुज़रना पड़ता. मुश्किल काम हो सकते हैं. उदाहरण के लिए, आपके सर्विस वर्कर कोड में होने वाली गड़बड़ियों से कैश मेमोरी की समस्याएं होती हैं; उपयोगकर्ताओं को पुराना या काम का कॉन्टेंट दिखाया नहीं जा सकता लिंक.

वर्कबॉक्स काफ़ी बेहतर है सर्विस वर्कर और कैश मेमोरी पर बनाए गए सर्विस वर्कर टूलकिट एपीआई. यह लाइब्रेरी का ऐसा सेट उपलब्ध कराता है जो प्रोडक्शन के लिए तैयार है. इसकी मदद से, नई लाइब्रेरी में ऑफ़लाइन सहायता भी जोड़ी जा सकती है वेब ऐप्लिकेशन खोलें. इस टूलकिट को दो कलेक्शन में बांटा गया है: ऐसे टूल जो कोड जो आपके सर्विस वर्कर के अंदर चलता है और आपके बिल्ड प्रोसेस शुरू करें.

रनटाइम कोड

यह कोड आपकी सर्विस वर्कर स्क्रिप्ट के अंदर चलता है और यह आउटगोइंग अनुरोधों को इंटरसेप्ट करता है और कैश स्टोरेज एपीआई से इंटरैक्ट करता है. वर्कबॉक्स में कुल संख्या में दर्जनों मॉड्यूल, और ये सभी लोग अलग-अलग तरह के खास मामलों को हैंडल करते हैं. सबसे ज़रूरी मॉड्यूल यह तय करें कि सर्विस वर्कर क्या जवाब देगा रूटिंग), और वह कैसे काम करेगा (इसे कैश मेमोरी में सेव करने की रणनीति).

इंटिग्रेशन बनाएं

Workbox के ऑफ़र कमांड लाइन, Node.js मॉड्यूल, और webpack प्लगिन टूल जो दो काम पूरे करने के वैकल्पिक तरीके उपलब्ध कराते हैं:

  • कॉन्फ़िगरेशन के सेट के आधार पर सर्विस वर्कर स्क्रिप्ट बनाना के विकल्प. जनरेट किया गया सर्विस वर्कर, Workbox की रनटाइम लाइब्रेरी का इस्तेमाल करता है "हुड के अंदर" आपके द्वारा कॉन्फ़िगर की जाने वाली कैशिंग रणनीतियों पर कार्रवाई करने के लिए.
  • ऐसे यूआरएल की सूची जनरेट करें जिन्हें ऐसा होना चाहिए "पहले से कैश मेमोरी में सेव किया गया", यह, जनरेट की गई फ़ाइलों को शामिल करने और बाहर रखने के लिए कॉन्फ़िगर किए जा सकने वाले पैटर्न के हिसाब से तय होता है आपको कैसे बनाना है.

आपको Workbox का इस्तेमाल क्यों करना चाहिए?

सर्विस वर्कर बनाते समय, Workbox का इस्तेमाल करना ज़रूरी नहीं है—इसके लिए, अलग-अलग उन्हें गाइड करते हैं, जो आपके कैश मेमोरी में डेटा सेव करने की सामान्य रणनीतियां "वैनिला" से सर्विस वर्कर का नज़रिया. अगर आपको Workbox का इस्तेमाल करना है, इसके कुछ फ़ायदे यहां बताए गए हैं.

कैश मैनेजमेंट

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

बड़े पैमाने पर लॉग इकट्ठा करने और गड़बड़ियों की रिपोर्ट करने की सुविधा

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

DevTools कंसोल में वर्कबॉक्स में लॉग इन करना

लॉग मैसेज के साथ फ़ॉलो करके, किसी भी मैसेज को रूट करने के लिए, की तुलना में कहीं ज़्यादा तेज़ी से कॉन्फ़िगर या अमान्य हो सकता है यह अकेले ही.

जांचा गया, क्रॉस-ब्राउज़र कोड बेस

Workbox को क्रॉस-ब्राउज़र टेस्ट सुइट के हिसाब से बनाया गया है और जब भी मुमकिन हो, अपने-आप लागू होने वाली सुविधाओं के वैकल्पिक तरीके लागू हो जाते हैं. कुछ ब्राउज़र से अनुपलब्ध है.

आपको Workbox का इस्तेमाल कैसे करना चाहिए?

फ़्रेमवर्क इंटिग्रेशन

अगर आपको नया प्रोजेक्ट शुरू करना है, तो कई लोकप्रिय स्टार्टर किट और ऐड-ऑन प्लगिन में वर्कबॉक्स इंटिग्रेशन मिलता है:

अपनी मौजूदा बिल्ड प्रोसेस में Workbox जोड़ें

अगर आपकी साइट के लिए पहले से ही एक बिल्ड प्रोसेस मौजूद है, तो उचित कमांड लाइन, Node.js मॉड्यूल, या webpack प्लगिन इस टूल की मदद से, Workbox का इस्तेमाल शुरू किया जा सकता है.

खास तौर पर, Workbox कमांड लाइन इंटरफ़ेस से, दौड़ रहा है. इसमें wizard मोड चालू है. यह आपके लोकल डेवलपमेंट की जांच करेगा और एक उचित डिफ़ॉल्ट कॉन्फ़िगरेशन का सुझाव दें, जिसका आप इस्तेमाल कर सकें की ओर से:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

सर्विस वर्कर बनाने के लिए, workbox generateSW workbox-config.js चलाएं बिल्ड प्रोसेस का हिस्सा है. ज़्यादा जानकारी के लिए, generateSW दस्तावेज़ देखें. workbox-config.js में बदलाव करके, सर्विस वर्कर को अपनी पसंद के मुताबिक बनाया जा सकता है. ज़्यादा जानकारी के लिए, विकल्पों का दस्तावेज़ देखें.

किसी मौजूदा सर्विस वर्कर में रनटाइम के दौरान Workbox का इस्तेमाल करना

अगर आपके पास कोई सर्विस वर्कर है और आपको Workbox के रनटाइम को आज़माना है लाइब्रेरी, Workbox को अपने आधिकारिक सीडीएन से इंपोर्ट करें और तुरंत रनटाइम कैश मेमोरी के लिए इसका इस्तेमाल करना शुरू कर दें. यह इस्तेमाल केस का मतलब है कि आप प्रीकैशिंग का फ़ायदा नहीं ले सकेंगे (जिस बिल्ड-टाइम इंटिग्रेशन की ज़रूरत होती है), लेकिन यह प्रोटोटाइप बनाने और अलग-अलग तरीके आज़माने के लिए कैश मेमोरी में सेव करने की अलग-अलग रणनीति बना रहे हैं.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);