प्रोग्रेसिव वेब ऐप्लिकेशन: वर्कर के साथ काम करना

1. आपका स्वागत है

इस लैब में, आपको मौजूदा वेब ऐप्लिकेशन में वेब वर्कर जोड़ना होगा. इससे दो खुली हुई विंडो के बीच स्थिति शेयर की जा सकेगी. यह प्रोग्रेसिव वेब ऐप्लिकेशन वर्कशॉप के लिए, कंपैनियन कोडलैब की सीरीज़ का आठवां कोडलैब है. पिछला कोडलैब Service Worker Includes था. यह इस सीरीज़ का आखिरी कोडलैब है.

आपको क्या सीखने को मिलेगा

  • एक से ज़्यादा खुली हुई विंडो के बीच शेयर किया गया वर्कर जोड़ना
  • कर्मचारियों के साथ काम करना आसान बनाने के लिए, Comlink का इस्तेमाल करना

आपको क्या पता होना चाहिए

  • JavaScript

आपको इन चीज़ों की ज़रूरत होगी

2. सेट अप करना

इस कोडलैब को पूरा करने के लिए, ज़रूरी स्टार्टर कोड को क्लोन करें या डाउनलोड करें:

अगर आपको रेपो को क्लोन करना है, तो पक्का करें कि आप pwa06--working-with-workers ब्रांच पर हों. ZIP फ़ाइल में उस ब्रांच का कोड भी होता है.

इस कोडबेस के लिए, Node.js 14 या उसके बाद का वर्शन ज़रूरी है. कोड उपलब्ध होने के बाद, कोड के फ़ोल्डर में कमांड लाइन से npm ci चलाएं. इससे, आपको ज़रूरी सभी डिपेंडेंसी इंस्टॉल करने में मदद मिलेगी. इसके बाद, कोडलैब के लिए डेवलपमेंट सर्वर शुरू करने के लिए, npm start चलाएं.

सोर्स कोड की README.md फ़ाइल में, डिस्ट्रिब्यूट की गई सभी फ़ाइलों के बारे में जानकारी दी गई है. इसके अलावा, यहां कुछ ऐसी मुख्य फ़ाइलें दी गई हैं जिन पर आपको इस कोडलैब के दौरान काम करना होगा:

मुख्य फ़ाइलें

  • js/preview.js - पेज की झलक दिखाने वाली JavaScript फ़ाइल
  • js/main.js - मुख्य ऐप्लिकेशन की JavaScript फ़ाइल

3. Write a Worker

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

शुरू करने के लिए, js/worker.js फ़ाइल बनाएं और उसमें यह कोड डालें:

import { expose } from 'comlink';
import { marked } from 'marked';

class Compiler {
  state = {
    raw: '',
    compiled: '',
  };
  subscribers = [];

  async set(content) {
    this.state = {
      raw: content,
      compiled: marked(content),
    };

    await Promise.all(this.subscribers.map((s) => s(this.state)));
  }

  subscribe(cb) {
    this.subscribers.push(cb);
  }
}

const compiler = new Compiler();

onconnect = (e) => expose(compiler, e.ports[0]);

जानकारी

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

4. कॉन्टेंट को वर्कर को भेजना

वर्कर बनाने के बाद, अब हमें इसमें कॉन्टेंट भेजना होगा. इसके लिए, js/main.js को अपडेट करें, ताकि ये काम किए जा सकें:

  • comlink से wrap नाम का एक्सपोर्ट इंपोर्ट करें
  • worker नाम का एक नया मॉड्यूल-टाइप Shared Worker बनाएं. इसका टाइप module पर सेट करें. साथ ही, new URL पैटर्न (new URL('./worker.js', import.meta.url)) का इस्तेमाल करके इसे पॉइंट करें
  • ऐसा compiler वैरिएबल बनाएं जो wrap worker.port हो
  • एडिटर के अपडेट फ़ंक्शन (editor.onUpdate) में, डेटाबेस में कॉन्टेंट सेव करने के बाद, compiler.set के पूरा होने का इंतज़ार करें. इसके बाद, कॉन्टेंट पास करें

जानकारी

Comlink एक्सपोर्ट को रैप करने से, क्लास के ऐसे तरीकों का इस्तेमाल किया जा सकता है जिन्हें एक्सपोज़ किया गया है. ऐसा तब किया जा सकता है, जब उन्हें वर्कर बाउंड्री के बीच शेयर न किया गया हो. हालांकि, अब सभी काम एसिंक्रोनस तरीके से होते हैं. यह एक शेयर किया गया वर्कर है, न कि कोई खास वर्कर. इसलिए, Comlink को वर्कर के पोर्ट को रैप करना होगा, न कि वर्कर को. अब जब भी एडिटर में कोई अपडेट किया जाएगा, तो कॉन्टेंट को वर्कर को भेज दिया जाएगा, ताकि वह उस पर काम कर सके!

5. झलक वाला पेज अपडेट करना

आखिरी चरण में, कंपाइल किए गए कॉन्टेंट को शेयर किए गए वर्कर से झलक में ले जाना होता है! इसके लिए, सेटअप का तरीका काफ़ी हद तक एक जैसा होता है. हालांकि, फ़ंक्शन को वर्कर बाउंड्री के बीच पास नहीं किया जा सकता. इसलिए, फ़ंक्शन के लिए प्रॉक्सी का इस्तेमाल करना ज़रूरी है. Comlink आपकी मदद के लिए हमेशा तैयार है. js/preview.js को अपडेट करें, ताकि ये काम किए जा सकें:

  • comlink से, नाम वाले एक्सपोर्ट wrap और proxy इंपोर्ट करें
  • शेयर्ड वर्कर बनाएं और उसे रैप करें, जैसा कि आपने js/main.js में किया था
  • कंपाइलर के subscribe तरीके को प्रॉक्सी फ़ंक्शन के साथ कॉल करें. यह फ़ंक्शन, आने वाले डेटा की compiled प्रॉपर्टी को झलक वाले एरिया के इनर एचटीएमएल पर सेट करता है

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

6. बधाई हो!

आपने यह जान लिया है कि एक से ज़्यादा PWA इंस्टेंस के बीच स्थिति शेयर करने के लिए, शेयर किए गए वर्कर का इस्तेमाल कैसे किया जाता है.