सेवा कार्यकर्ताओं का उपयोग लोडिंग समय और आपकी साइटों और वेब ऐप्स के लिए ऑफ़लाइन समर्थन को बेहतर बनाने के लिए किया जा सकता है। इस ट्यूटोरियल में हम आपको दिखाने के लिए जा रहे हैं कि एक सेवा कार्यकर्ता के साथ एक वेब ऐप को क्रमशः कैसे बढ़ाएं। सबसे पहले हम एक सेवा कार्यकर्ता को कवर करेंगे और इसका जीवन चक्र कैसे काम करता है, फिर हम आपको दिखाएंगे कि आपकी साइट (यह पृष्ठ) को तेज करने और ऑफ़लाइन सामग्री (पृष्ठ 2) की पेशकश करने के लिए कैसे उपयोग करें।
फिर हम आपको दिखाएंगे कि कैसे एक ऐप कैसे बनाएं सेवा कार्यकर्ताओं के साथ। आप सीखेंगे कि एक नंगे-हड्डियों कार्यकर्ता कैसे स्थापित करें जो स्थिर संपत्तियों को कैश और सेवा करेगा (बाद के भार पर एक बड़ा प्रदर्शन बढ़ावा देने), फिर गतिशील एपीआई प्रतिक्रियाओं को कैश करें और हमारे डेमो ऐप को पूर्ण ऑफ़लाइन समर्थन दें। सबसे पहले, देखते हैं कि वास्तव में सेवा कर्मचारी क्या हैं, और वे कैसे काम करते हैं।
एक वेबसाइट का निर्माण? एक महान के साथ अपनी प्रक्रिया को व्यवस्थित करें [2 9] वेबसाइट निर्माता
तो एक सेवा कार्यकर्ता क्या है? यह एक स्क्रिप्ट है, जो जावास्क्रिप्ट में लिखी गई है, कि आपका ब्राउज़र पृष्ठभूमि में चलता है। यह मुख्य धागे को प्रभावित नहीं करता है (जहां जावास्क्रिप्ट आमतौर पर वेब पेज पर चलता है), और आपके ऐप कोड के साथ संघर्ष नहीं करेगा या रनटाइम प्रदर्शन को प्रभावित नहीं करेगा।
एक सेवा कार्यकर्ता के पास वेब पेज में ही डोम या घटनाओं और उपयोगकर्ता इंटरैक्शन की प्रत्यक्ष पहुंच नहीं है। इसे एक परत के रूप में सोचें जो वेब पेज और नेटवर्क के बीच बैठता है, जिससे आप अपने पृष्ठ द्वारा किए गए नेटवर्क अनुरोधों को अवरुद्ध और हेरफेर कर सकते हैं (जैसे AJAX अनुरोध)। यह कैश के प्रबंधन और ऑफ़लाइन उपयोग का समर्थन करने के लिए आदर्श बनाता है।
एक सेवा कार्यकर्ता का जीवन एक साधारण प्रवाह का पालन करता है, लेकिन जब आप जेएस स्क्रिप्ट के लिए उपयोग किए जाते हैं तो यह थोड़ा उलझन में हो सकता है बस तुरंत काम कर रहे हैं:
[2 9] स्थापित करना और जीटी; प्रतीक्षा (स्थापित) & gt; सक्रिय और जीटी; सक्रिय और जीटी; बेमानी
जब आपका पृष्ठ पहले लोड हो जाता है, तो पंजीकरण कोड हमने जोड़ा [2 9] index.html
सेवा कार्यकर्ता की स्थापना शुरू करता है। जब कोई मौजूदा कार्यकर्ता नहीं होता है तो नया सेवा कार्यकर्ता स्थापना के तुरंत बाद सक्रिय हो जाएगा। एक वेब पेज में केवल एक सेवा कार्यकर्ता एक समय में सक्रिय हो सकता है।यदि कोई कार्यकर्ता पहले से स्थापित है, तो नया सेवा कार्यकर्ता स्थापित किया जाएगा और फिर पृष्ठ पूरी तरह से बंद होने तक प्रतीक्षा चरण पर बैठेगा और फिर पुनः लोड हो जाएगा। बस ताज़ा पर्याप्त नहीं है क्योंकि आपके पास अन्य टैब खुले हो सकते हैं। आपको यह सुनिश्चित करने की आवश्यकता है कि पृष्ठ के सभी उदाहरण बंद हों अन्यथा नया कार्यकर्ता सक्रिय नहीं होगा। आपको टैब को बंद करने की आवश्यकता नहीं है, आप बस किसी अन्य साइट पर नेविगेट कर सकते हैं और वापस लौट सकते हैं।
दोनों [2 9] इंस्टॉल
तथा [2 9] सक्रिय घटनाएं केवल प्रति कर्मचारी एक बार होती हैं। एक बार सक्रिय होने के बाद, सेवा कार्यकर्ता के पास पृष्ठ पर नियंत्रण होगा और अनुरोधों को हेरफेर करने के लिए लाने जैसी घटनाओं को संभालना शुरू कर सकता है।अंत में एक सेवा कार्यकर्ता अनावश्यक हो जाएगा यदि ब्राउज़र यह दर्शाता है कि कार्यकर्ता फ़ाइल को अद्यतन किया गया है या यदि इंस्टॉल या सक्रियण विफल हो जाता है। ब्राउज़र यह निर्धारित करने के लिए एक बाइट अंतर की तलाश करेगा कि कोई कार्यकर्ता स्क्रिप्ट अपडेट की गई है या नहीं।
यह ध्यान रखना महत्वपूर्ण है कि आपको अपने सेवा कार्यकर्ता के नाम को कभी नहीं बदलना चाहिए (या संशोधित करना)। न ही आपको सर्वर पर कार्यकर्ता फ़ाइल को कैश करना चाहिए, क्योंकि आप इसे आसानी से अपडेट नहीं कर पाएंगे, हालांकि ब्राउज़र अब कैशिंग हेडर को अनदेखा करने के लिए पर्याप्त स्मार्ट हैं।
ठीक है, आइए सीखें कि सेवा श्रमिकों से सहायता के साथ वेब ऐप बनाने का तरीका सीखना। इस ट्यूटोरियल के लिए, आपको अपने कंप्यूटर पर Node.js और एनपीएम के हाल के संस्करणों की आवश्यकता होगी।
हमने एक डेमो ऐप को खटखटाया है कि हम इस ट्यूटोरियल के आधार के रूप में उपयोग करेंगे ( यहां डेमो ऐप क्लोन करें )। ऐप एक मजेदार छोटी परियोजना है जो उपयोगकर्ता के स्थान के आधार पर पांच दिवसीय मौसम पूर्वानुमान प्राप्त करती है। फिर यह जांच करेगा कि दिन के अंत से पहले वर्षा पूर्वानुमान है और यूआई को तदनुसार अपडेट करें।
यह एक सेवा कार्यकर्ता का उपयोग करते समय प्रदर्शन में अंतर प्रदर्शित करने के लिए बड़े unoptimised छवियों के साथ बड़े, अनावश्यक पुस्तकालयों जैसे jQuery और बूटस्ट्रैप जैसी बड़ी, अनावश्यक पुस्तकालयों का उपयोग करके अक्षम रूप से (जानबूझकर) बनाया गया है। यह वर्तमान में एक हास्यास्पद 4.1 एमबी में वजन का होता है।
एपीआई से मौसम डेटा लाने के लिए आपको खुद को एक मुफ्त एपीआई कुंजी प्राप्त करने की आवश्यकता होगी Openweathermap :
एक बार जब आप अपनी कुंजी हो, तो खोलो [2 9] index.html
और देखो [2 9] window.api_key में चर [2 9] & lt; हेड और जीटी; । अपनी कुंजी को मूल्य में पेस्ट करें: window.API_KEY = 'paste-your-key-here';
अब हम परियोजना पर काम करना शुरू करने के लिए तैयार हैं। सबसे पहले चलो निर्भरताओं को चलाकर स्थापित करें:
npm install
बिल्ड टूल के लिए दो कार्य हैं। Daud [2 9] एनपीएम शुरू
पोर्ट 3000 पर विकास सर्वर शुरू करने के लिए। रन [2 9] एनपीएम रन बिल्ड 'उत्पादन' संस्करण तैयार करने के लिए। ध्यान रखें कि यह केवल एक डेमो है, इसलिए वास्तव में एक उत्पादन संस्करण नहीं है - कोई न्यूनतमकरण या कुछ भी नहीं है - फाइलें सिर्फ 'पुनर्जीवित' प्राप्त करती हैं।एक एल्गोरिदम का उपयोग फ़ाइल की सामग्री से 9C616053E5 जैसे हैश बनाने के लिए किया जाता है। एल्गोरिदम हमेशा एक ही सामग्री के लिए एक ही हैश को आउटपुट करेगा, जिसका अर्थ है कि जब तक आप फ़ाइल को संशोधित नहीं करते हैं, तो हैश नहीं बदलेगा। हैश को तब फ़ाइल नाम में जोड़ा जाता है, इसलिए उदाहरण के लिए styles.css शैलियों -9 c616053e5.css बन सकते हैं। हैश फ़ाइल के संशोधन का प्रतिनिधित्व करता है - इसलिए 'Revved'।
आप अपने कैश को अमान्य करने के बिना अपने सर्वर पर फ़ाइल के प्रत्येक संशोधन को सुरक्षित रूप से कैश कर सकते हैं, जो महंगा है, या गलत संस्करण की सेवा करने वाले कुछ अन्य तृतीय-पक्ष कैश के बारे में चिंता करें।
अब चलिए हमारे सेवा कार्यकर्ता के साथ शुरू करते हैं। की जड़ में sw.js नामक एक फ़ाइल बनाएँ [2 9] एसआरसी
निर्देशिका। फिर इन दो इवेंट श्रोताओं को लॉग इन करने के लिए जोड़ें [2 9] इंस्टॉल तथा [2 9] सक्रिय आयोजन: self.addeventlistener ('स्थापित', (घटना) = & gt; {
Console.log (घटना);
});
self.addeventlistener ('सक्रिय', (घटना) = & gt; {
Console.log (घटना);
});
[2 9] स्वयं
चर सेवा कार्यकर्ता के वैश्विक पढ़ने वाले दायरे का प्रतिनिधित्व करता है। यह थोड़ा सा है [2 9] खिड़की एक वेब पेज में वस्तु।इसके बाद हमें हमारी index.html फ़ाइल को अपडेट करने और सेवा कार्यकर्ता को स्थापित करने के लिए आदेश जोड़ने की आवश्यकता है। समापन से ठीक पहले इस स्क्रिप्ट को जोड़ें [2 9] & lt; / शरीर & gt;
टैग। यह हमारे कार्यकर्ता को पंजीकृत करेगा और अपनी वर्तमान स्थिति लॉग करेगा। & lt; स्क्रिप्ट और जीटी;
यदि ('सेवा सेवाकर्ता' नेविगेटर में) {
navigator.serviceworker.register ('/ sw.js')
.then (समारोह (reg) {
यदि (reg.installing) {
Console.log ('SW स्थापना');
} और अगर (reg.waiting) {
Console.log ('SW प्रतीक्षा');
} और अगर (reg.active) {
Console.log ('SW सक्रिय');
}
})। पकड़ (कार्य (त्रुटि) {
// पंजीकरण विफल
Console.log ('पंजीकरण' + त्रुटि के साथ विफल);
});
}
& lt; / स्क्रिप्ट & gt;
अपने विकास सर्वर को चलाकर शुरू करें [2 9] एनपीएम शुरू
और एक आधुनिक ब्राउज़र में पृष्ठ खोलें। हम Google क्रोम का उपयोग करने की अनुशंसा करेंगे क्योंकि इसमें अपने devtools में अच्छी सेवा कार्यकर्ता समर्थन है, जिसे हम इस ट्यूटोरियल में संदर्भित करेंगे। आपको अपने कंसोल में लॉग इन तीन चीजें देखना चाहिए; सेवा कार्यकर्ता से दो [2 9] इंस्टॉल तथा [2 9] सक्रिय घटनाक्रम, और दूसरा पंजीकरण से संदेश होगा।हम अपने कार्यकर्ता को प्रतीक्षा चरण छोड़ने और अब सक्रिय करने के लिए कहने जा रहे हैं। SW.JS फ़ाइल खोलें और इस लाइन को कहीं भी अंदर जोड़ें [2 9] इंस्टॉल
घटना श्रोता: self.skipwaiting ();
अब, जब हम कार्यकर्ता स्क्रिप्ट को अद्यतन करते हैं, तो यह स्थापना के तुरंत बाद पृष्ठ पर नियंत्रण रखेगा। यह ध्यान देने योग्य है कि इसका मतलब यह हो सकता है कि नया कार्यकर्ता उस पृष्ठ पर नियंत्रण रखेगा जिसे आपके कार्यकर्ता के पिछले संस्करण द्वारा लोड किया गया हो - यदि समस्याएं उत्पन्न हो रही हैं, तो इस ऐप में इस विकल्प का उपयोग न करें।
आप पृष्ठ से दूर नेविगेट करके और फिर लौटकर इसकी पुष्टि कर सकते हैं। आपको देखना चाहिए [2 9] इंस्टॉल
तथा [2 9] सक्रिय नए कार्यकर्ता स्थापित किए जाने पर घटनाएं फिर से आग लगती हैं।क्रोम देवटूल के पास एक उपयोगी विकल्प है जिसका अर्थ है कि आप अपने कार्यकर्ता को केवल पुनः लोड करके अपडेट कर सकते हैं। ओपन देवटूल और एप्लिकेशन टैब पर जाएं, फिर बाएं कॉलम से सेवा कार्यकर्ता का चयन करें। पैनल के शीर्ष पर एक टिक बॉक्स है जिसे रीलोड पर अपडेट लेबल किया गया है, इसे टिक करें। आपका अद्यतन कार्यकर्ता अब रीफ्रेश पर स्थापित और सक्रिय हो जाएगा।
आइए यह जोड़कर इसकी पुष्टि करें [2 9] Console.log ('FOO')
किसी भी घटना श्रोताओं में से किसी को कॉल करें और पृष्ठ को रीफ्रेश करें। इसने हमें पकड़ा क्योंकि जब हम ताज़ा करते हैं तो हम कंसोल में लॉग देखने की उम्मीद कर रहे थे, लेकिन हम जो भी देख रहे थे वह 'एसडब्ल्यू सक्रिय' संदेश था। यह पता चला है कि क्रोम पेज को दो बार रीफ्रेश करता है जब रीलोड विकल्प पर अपडेट किया जाता है।आप कंसोल सेटिंग्स पैनल में संरक्षित लॉग टिक बॉक्स को फिर से रीफ्रेश करके इसकी पुष्टि कर सकते हैं। आपको 'फू' के साथ लॉग इन करने वाली घटनाओं को स्थापित करना और सक्रिय करना चाहिए, इसके बाद 'http: // localhost: 3000 /' के बाद यह इंगित करने के लिए कि पृष्ठ को पुनः लोड किया गया था और फिर अंतिम 'SW सक्रिय' संदेश।
एक और श्रोता जोड़ने का समय। इस बार हम ट्रैक करेंगे [2 9] लाना
प्रत्येक बार जब पेज एक संसाधन लोड करता है, जैसे सीएसएस फ़ाइल, छवि या यहां तक कि एपीआई प्रतिक्रिया भी निकालता है। हम एक कैश खोलेंगे, पृष्ठ पर अनुरोध प्रतिक्रिया वापस करेंगे और फिर - पृष्ठभूमि में - प्रतिक्रिया को कैश करें। सबसे पहले चलो श्रोता जोड़ें और ताज़ा करें ताकि आप देख सकें कि क्या होता है। कंसोल में आपको कई देखना चाहिए [2 9] लज्जित लॉग। self.addeventlistener ('fetch', (घटना) = & gt; {
Console.log (घटना);
});
हमारा सेवा मोड ब्राउज़र वाईंक का उपयोग करता है, जो पृष्ठ पर अपनी स्क्रिप्ट जोड़ता है और वेबकोट अनुरोध करता है। आप इनके लिए फ़ेचएवेंट्स भी देखेंगे, लेकिन हम इन्हें अनदेखा करना चाहते हैं। हम केवल अपने डोमेन से अनुरोध प्राप्त करना चाहते हैं। तो आइए स्पष्ट रूप से अनदेखा करने सहित अवांछित अनुरोधों को अनदेखा करने के लिए कुछ चीजें जोड़ें [2 9] /
सूचकांक पथ: self.addeventlistener ('fetch', (घटना) = & gt; {
// क्रॉसडाइन अनुरोधों को अनदेखा करें
अगर (event.request.url.startswith (self.location.origin) {
वापसी;
}
// गैर-प्राप्त अनुरोधों को अनदेखा करें
अगर (event.request.method! == 'प्राप्त करें') {
वापसी;
}
// ब्राउज़र-सिंक को अनदेखा करें
यदि (event.request.url.indexof ('ब्राउज़र-सिंक') & gt; -1) {
वापसी;
}
// इंडेक्स रूट को कैश किया जा रहा है
अगर (event.request.url === (self.location.origin + '/') {
वापसी;
}
// index.html को कैश किया जा रहा है
if (event.request.url.endswith ('index.html')) {
वापसी;
}
Console.log (घटना);
});
अब लॉग बहुत क्लीनर होना चाहिए और कैशिंग शुरू करना सुरक्षित है।
अब हम इन प्रतिक्रियाओं को कैश करना शुरू कर सकते हैं। सबसे पहले हमें अपने कैश को एक नाम देने की आवश्यकता है। चलो हमें बुलाते हैं [2 9] वी 1 संपत्ति
। इस पंक्ति को SW.JS फ़ाइल के शीर्ष पर जोड़ें: const ascesscachename = 'v1-assims';
फिर हमें fetchevents को अपहरण करने की जरूरत है ताकि हम पृष्ठ पर लौटाए गए को नियंत्रित कर सकें। हम घटना का उपयोग कर ऐसा कर सकते हैं [2 9] जवाब देना
तरीका। यह विधि एक वादा स्वीकार करती है ताकि हम इस कोड को जोड़ सकें, प्रतिस्थापित कर सकें [2 9] Console.log : // इस वादा श्रृंखला के साथ जवाब देने के लिए Fetch बताएं
Event.Responespionwith (
// कैश खोलें
caches.Open (assicachename)
.then ((कैश) = & gt; {
// नेटवर्क से अनुरोध करें
वापसी fetch (event.request)
.then ((प्रतिक्रिया) = & gt; {
// प्रतिक्रिया को कैश करें
cache.put (event.request, respones.clone ());
// पृष्ठ पर मूल प्रतिक्रिया लौटाएं
वापसी प्रतिक्रिया;
});
})
);
यह नेटवर्क पर अनुरोध अग्रेषित करेगा, फिर पृष्ठ पर मूल प्रतिक्रिया भेजने से पहले, कैश में प्रतिक्रिया को स्टोर करेगा।
यह ध्यान देने योग्य है कि यह दृष्टिकोण वास्तव में प्रतिक्रिया को कैश नहीं करेगा जब तक कि उपयोगकर्ता पृष्ठ को लोड नहीं करता है। पहली बार कार्यकर्ता को स्थापित और सक्रिय करेगा, लेकिन उस समय तक [2 9] लाना
श्रोता तैयार है, सब कुछ पहले ही अनुरोध किया जाएगा।दो बार ताज़ा करें और देवटूल और जीटी में कैश की जांच करें; आवेदन टैब। बाएं कॉलम में कैश स्टोरेज ट्री का विस्तार करें और आपको अपने कैश को सभी संग्रहीत प्रतिक्रियाओं के साथ देखना चाहिए।
सबकुछ कैश किया गया है लेकिन हम वास्तव में अभी तक किसी भी फाइल को पूरा करने के लिए कैश का उपयोग नहीं कर रहे हैं। चलो इसे अभी हुक करें। सबसे पहले हम कैश में अनुरोध के लिए एक मैच की तलाश करेंगे और यदि यह मौजूद है तो हम इसकी सेवा करेंगे। यदि यह अस्तित्व में नहीं है, तो हम नेटवर्क का उपयोग करेंगे और फिर प्रतिक्रिया को कैश करते हैं।
// इस श्रृंखला के साथ प्रतिक्रिया देने के लिए लाने के लिए
Event.Responespionwith (
// कैश खोलें
caches.Open (assicachename)
.then ((कैश) = & gt; {
// कैश में मिलान अनुरोध की तलाश करें
वापसी cache.match (Event.Request)
.then ((मिलान) = & gt; {
// यदि कोई मैच पाया जाता है तो कैश किए गए संस्करण को पहले वापस कर दें
अगर (मिलान) {
वापसी का मिलान;
}
// अन्यथा नेटवर्क को जारी रखें
वापसी fetch (event.request)
.then ((प्रतिक्रिया) = & gt; {
// प्रतिक्रिया को कैश करें
cache.put (event.request, respones.clone ());
// पृष्ठ पर मूल प्रतिक्रिया लौटाएं
वापसी प्रतिक्रिया;
});
});
})
);
फ़ाइल को सहेजें और रीफ्रेश करें। Devtools और GT की जाँच करें; नेटवर्क टैब और आपको प्रत्येक स्थिर संपत्तियों के लिए आकार कॉलम में सूचीबद्ध (सेवा कार्यकर्ता से) देखना चाहिए।
फू, हम कर रहे हैं। इतनी कम मात्रा में कोड के लिए, समझने के लिए बहुत कुछ है। एक बार सभी संपत्तियों को कैश करने के बाद पृष्ठ को ताज़ा करना चाहिए, लेकिन एक थ्रॉटल कनेक्शन (devtools & gt; नेटवर्क टैब) पर लोड समय की त्वरित (अवैज्ञानिक) जांच करने दें।
सेवा कार्यकर्ता के बिना, एक अनुरूपित तेजी से 3 जी नेटवर्क पर लोड हो रहा है सब कुछ लोड करने के लिए लगभग 30 सेकंड लेता है। सेवा कार्यकर्ता के साथ, उसी थ्रॉटल कनेक्शन के साथ लेकिन कैश से लोड हो रहा है, यह सिर्फ एक सेकंड के नीचे लेता है।
ऑफ़लाइन बॉक्स की जांच करें और रीफ्रेश करें और आप यह भी देखेंगे कि पृष्ठ कनेक्शन के बिना लोड होता है, हालांकि हम एपीआई से पूर्वानुमान डेटा नहीं प्राप्त कर सकते हैं। पेज 2 पर हम इसे वापस कर देंगे और एपीआई प्रतिक्रिया को कैश करने के तरीके सीखेंगे।
[2 9] अगला पृष्ठ: ऑनलाइन पहुंच प्रदान करने के लिए सेवा कार्यकर्ता का उपयोग करें
वर्तमान पृष्ठ: पेज 1: तेज लोडिंग
[26 9] अगला पृष्ठ पृष्ठ 2: ऑफ़लाइन पहुंच जोड़नाआधुनिक साइटें अक्सर अपनी सभी जावास्क्रिप्ट को ए�..
हुदिनी 17 में, साइडएफएक्स ने कुछ नए उपकरण पेश किए औ�..
प्राणी और दृष्टिकोण के कई तरीके हैं चरित्र पर�..
2 का पृष्ठ 1: प्रतिक्रिया में एक डैशबोर्ड..
मूल निवासी एक ऐसा मंच है जो आपको जावास्क्रिप�..
एडोब आज वीडियो ट्यूटोरियल की एक नई श्रृंखला लॉन्च कर रहा है जिसे इसे अब ब�..