Angular 2
सेवा कार्यकर्ता

परिचय

सेवा कार्यकर्ता को हमारे ऐप में जोड़ें

यदि आप mobile.angular.io से परामर्श कर रहे हैं, तो सबसे पहले - अब मोबाइल काम नहीं करता है।

तो शुरू करने के लिए, हम कोणीय क्ली के साथ एक सामान्य परियोजना बना सकते हैं।

ng new serviceWorking-example
cd serviceWorking-example

अब महत्वपूर्ण बात, कोणीय क्लि के लिए कहा गया है कि हम सेवा कार्यकर्ता का उपयोग करना चाहते हैं:

एनजी सेट apps.0.serviceWorker = true

यदि किसी कारण से आपके पास @ कोणीय / सेवा-कार्यकर्ता स्थापित नहीं है, तो आपको एक संदेश दिखाई देगा:

आपकी परियोजना सेवाकार्य = सच के साथ विन्यस्त है, लेकिन @ कोणीय / सेवा-कार्यकर्ता स्थापित नहीं है। npm install --save-dev @angular/service-worker चलाएं और फिर से प्रयास करें, या अपने .angular-cli.json में ng set apps.0.serviceWorker=false चलाएँ।

.Angular-cli.json की जाँच करें और अब आपको यह देखना चाहिए: "serviceWorker": सच है

जब यह ध्वज सत्य होगा, तो उत्पादन बिल्डरों को एक सेवा कार्यकर्ता के साथ स्थापित किया जाएगा।

एक ngsw-default.json फ़ाइल उत्पन्न होगी (या मामले में संवर्धित होने के कारण हमने एक ngsw-घोषणापत्र बनाया है। परियोजना की जड़ में आमतौर पर, यह राउटिंग को निर्दिष्ट करने के लिए किया जाता है, भविष्य में यह संभवतः स्वचालित रूप से किया जाएगा) डिस्ट / रूट में, और सेवा कार्यकर्ता स्क्रिप्ट को वहां कॉपी किया जाएगा। सेवा कार्यकर्ता को पंजीकृत करने के लिए index.html में एक छोटी स्क्रिप्ट जोड़ी जाएगी।

अब अगर हम निर्माण मोड एनपी बिल्ड-prod में एप्लिकेशन का निर्माण करते हैं

और dist / folder को चेक करे।

आपको वहां तीन नई फाइलें दिखाई देंगी:

• कार्यकर्ता basic.min.js
• sw-register.HASH.bundle.js
• ngsw-manifest.json

इसके अलावा, index.html में अब यह स्व-रजिस्टर स्क्रिप्ट शामिल है, जो हमारे लिए एक कोणीय सेवा कार्यकर्ता (ASW) को पंजीकृत करती है।

अपने ब्राउज़र में पृष्ठ को रीफ़्रेश करें (Chrome के लिए वेब सर्वर द्वारा दिया गया)

डेवलपर टूल खोलें। एप्लिकेशन पर जाएं -> सेवा कार्यकर्ता

अच्छा अब सेवा कार्यकर्ता ऊपर और चल रहा है!

अब हमारे एप्लिकेशन को तेजी से लोड करना चाहिए और हमें एप्लिकेशन को ऑफ़लाइन उपयोग करने में सक्षम होना चाहिए।

अब यदि आप क्रोम कंसोल में ऑफ़लाइन मोड को सक्षम करते हैं, तो आपको यह देखना चाहिए कि हमारा ऐप http: // localhost: 4200 / index.html में इंटरनेट के कनेक्शन के बिना काम कर रहा है।

लेकिन http: // localhost: 4200 में / हमें एक समस्या है और यह लोड नहीं करता है, यह स्थैतिक सामग्री कैश के कारण है जो केवल प्रकट में सूचीबद्ध फ़ाइलों का कार्य करता है।

उदाहरण के लिए, यदि मेनिफ़ेस्ट /index.html का URL घोषित करता है, तो /index.html के अनुरोधों को कैश द्वारा उत्तर दिया जाएगा, लेकिन / या कुछ / मार्ग का अनुरोध नेटवर्क पर जाएगा।

यही वह मार्ग है जहाँ रूट पुनर्निर्देशन प्लगइन आता है। यह एक रूटिंग कॉन्फिग को रीडिंग से पढ़ता है और एक निर्दिष्ट इंडेक्स रूट पर कॉन्फ़िगर किए गए मार्गों को रीडायरेक्ट करता है।

वर्तमान में, कॉन्फ़िगरेशन का यह खंड हाथ से लिखा जाना चाहिए (19-7-2017)। आखिरकार, यह एप्लिकेशन स्रोत में मौजूद मार्ग कॉन्फ़िगरेशन से उत्पन्न होगा।

इसलिए यदि अब हम प्रोजेक्ट के मूल में ngsw-घोषणापत्र बनाते हैं या बनाते हैं

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

और हम फिर से अपना ऐप बनाते हैं, अब जब हम http: // localhost: 4200 / पर जाते हैं , तो हमें http: // localhost: 4200 / index.html पर रीडायरेक्ट किया जाना चाहिए।

रूटिंग के बारे में अधिक जानकारी के लिए आधिकारिक दस्तावेज यहां पढ़ें

यहां आप सेवाकर्मियों के बारे में अधिक दस्तावेज पा सकते हैं:

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

और यहां आप SW प्रीचेज लाइब्रेरी का उपयोग करके काम करने वाली सेवा को लागू करने का एक वैकल्पिक तरीका देख सकते हैं:

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers