वेब बंडल के साथ शुरू करें

ब्लूटूथ का इस्तेमाल करके, वेबसाइटों को एक ही फ़ाइल के तौर पर शेयर करें और उन्हें अपने ऑरिजिन के हिसाब से ऑफ़लाइन चलाएं

युसुके उत्सुनोमिया
युसुके उत्सुनोमिया
केंजी बाहेक्स
केंजी बह्यू

एक पूरी वेबसाइट को एक फ़ाइल में शामिल करके और उसे शेयर करने लायक बनाने से वेब के इस्तेमाल के नए उदाहरण खुल जाते हैं. एक ऐसी दुनिया की कल्पना करें जहां आप:

  • खुद का कॉन्टेंट बनाएं और उसे नेटवर्क से बाहर जोड़े बिना तरह-तरह के लोगों तक पहुंचाएं
  • ब्लूटूथ या वाई-फ़ाई डायरेक्ट से अपने दोस्तों के साथ कोई वेब ऐप्लिकेशन या वेब कॉन्टेंट शेयर करें
  • अपनी साइट को अपने यूएसबी से कनेक्ट करें या उसे अपने लोकल नेटवर्क पर होस्ट करें

वेब बंडल एपीआई एक नई सुविधा है. इसकी मदद से, ये सारे काम किए जा सकते हैं.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

फ़िलहाल, Web Bundles API, प्रयोग के तौर पर फ़्लैग किए जाने वाले फ़्लैग की सुरक्षा वाले Chromium कोड वाले ब्राउज़र में ही काम करता है.

पेश है वेब बंडल एपीआई

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

वेब बंडल को औपचारिक तौर पर बंडल किए गए एचटीटीपी एक्सचेंज के नाम से जाना जाता है. ये वेब पैकेजिंग प्रस्ताव का हिस्सा हैं.

एक इमेज, जिसमें दिखाया गया है कि वेब बंडल, वेब संसाधनों का कलेक्शन होता है.
वेब बंडल कैसे काम करते हैं

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

इस लेख में आपको वेब बंडल के बारे में जानकारी दी गई है और इसे इस्तेमाल करने का तरीका बताया गया है.

वेब बंडल के बारे में जानकारी

सटीक जानकारी के लिए, वेब बंडल एक सीबीओआर फ़ाइल होती है जिसका एक्सटेंशन .wbn होता है. यह स्टैंडर्ड नियम के मुताबिक एचटीटीपी संसाधनों को बाइनरी फ़ॉर्मैट में पैकेज करता है. साथ ही, इसे application/webbundle MIME टाइप के साथ दिखाया जाता है. खास जानकारी वाले ड्राफ़्ट के टॉप लेवल स्ट्रक्चर सेक्शन में इसके बारे में ज़्यादा पढ़ा जा सकता है.

वेब बंडल में कई खास सुविधाएं हैं:

  • यह कई पेजों को शामिल करता है, ताकि पूरी वेबसाइट को एक फ़ाइल में बंडल किया जा सके
  • MHTML के उलट, एक्ज़ीक्यूटेबल JavaScript को चालू करता है
  • कॉन्टेंट के लिए नेगोशिएशन के लिए एचटीटीपी वैरिएंट का इस्तेमाल किया जाता है. इससे Accept-Language हेडर के साथ अंतरराष्ट्रीय फ़ॉर्मैट में बदलाव किया जा सकता है, भले ही बंडल को ऑफ़लाइन इस्तेमाल किया गया हो
  • यह जानकारी तब लोड होती है, जब पब्लिशर के पब्लिशर ने क्रिप्टोग्राफ़िक तरीके से उस पर हस्ताक्षर किया हो
  • स्थानीय तौर पर उपलब्ध कराए जाने पर, तकरीबन तुरंत लोड हो जाता है

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

  1. अपने दोस्त से गेम की .wbn फ़ाइल शेयर करने के लिए कहें. उदाहरण के लिए, फ़ाइल को फ़ाइल शेयर करने वाले ऐप्लिकेशन का इस्तेमाल करके आसानी से पीयर-टू-पीयर शेयर किया जा सकता है.
  2. .wbn फ़ाइल को उस ब्राउज़र में खोलें जिस पर वेब बंडल काम करते हैं.
  3. अपने डिवाइस पर गेम खेलना शुरू करें और अपने दोस्त के हाई स्कोर से आगे निकलने की कोशिश करें.

इस मामले के बारे में जानकारी देने वाला वीडियो यहां दिया गया है.

यह देखा जा सकता है कि वेब बंडल में सभी संसाधन मौजूद हो सकते हैं, जिससे यह ऑफ़लाइन और तुरंत लोड हो जाता है.

वेब बंडल बनाना

फ़िलहाल, go/bundle सीएलआई किसी वेबसाइट को बंडल करने का सबसे आसान तरीका है. go/bundle, Go में मौजूद वेब बंडल की खास जानकारी को लागू करने का एक रेफ़रंस है.

  1. Go इंस्टॉल करें.
  2. go/bundle इंस्टॉल करें.

    go get -u github.com/WICG/webpackage/go/bundle/cmd/...
    
  3. preact-todomvc रिपॉज़िटरी को क्लोन करें और संसाधनों को बंडल करने के लिए वेब ऐप्लिकेशन बनाएं.

    git clone https://github.com/developit/preact-todomvc.git
    cd preact-todomvc
    npm i
    npm run build
    
  4. .wbn फ़ाइल बनाने के लिए, gen-bundle कमांड का इस्तेमाल करें.

    gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
    

बधाई! TodoMVC अब एक वेब बंडल है.

बंडल बनाने के दूसरे विकल्प मौजूद हैं और आने वाले हैं. go/bundle सीएलआई से आपको HAR फ़ाइल या रिसॉर्स यूआरएल की कस्टम सूची का इस्तेमाल करके, वेब बंडल बनाने में मदद मिलती है. go/bundle के बारे में ज़्यादा जानने के लिए, GitHub repo पर जाएं. बंडल करने के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध Node.js मॉड्यूल wbn को भी आज़माया जा सकता है. ध्यान दें कि wbn अब भी डेवलपमेंट के शुरुआती चरण में है.

वेब बंडल के साथ चलाना

वेब बंडल आज़माने के लिए:

  1. about://version पर जाकर देखें कि Chrome का कौनसा वर्शन इस्तेमाल किया जा रहा है. अगर आपको वर्शन 80 या इसके बाद वाला वर्शन इस्तेमाल करना है, तो अगले चरण को छोड़ दें.
  2. अगर आपके डिवाइस पर Chrome 80 या उसके बाद वाला वर्शन नहीं चल रहा है, तो Chrome कैनरी डाउनलोड करें.
  3. about://flags/#web-bundles खोलें.
  4. वेब बंडल फ़्लैग को चालू है पर सेट करें.

    about://flags का स्क्रीनशॉट
    about://flags में वेब बंडल चालू किए जा रहे हैं
  5. Chrome को फिर से लॉन्च करें.

  6. अगर डेस्कटॉप का इस्तेमाल किया जा रहा है, तो todomvc.wbn फ़ाइल को Chrome में खींचें और छोड़ें. अगर Android का इस्तेमाल किया जा रहा है, तो फ़ाइल मैनेजमेंट ऐप्लिकेशन में फ़ाइल पर टैप करें.

हर चीज़ अपने-आप काम करती है.

TodoMVC को लागू करने का तरीका, वेब बंडल के तौर पर ऑफ़लाइन काम कर रहा है

आप अन्य सैंपल वेब बंडल भी आज़मा सकते हैं:

  • web.dev.wbn 2019 15 अक्टूबर तक, पूरी web.dev साइट का स्नैपशॉट है.
  • proxx.wbn: PROXX एक माइनस्वीपर क्लोन है, जो ऑफ़लाइन काम करता है.
  • squoosh.wbn: Squoosh आसानी से और तेज़ी से इमेज ऑप्टिमाइज़ेशन टूल है. इससे कन्वर्ज़न का साइज़ बदलने और फ़ॉर्मैट करने की सुविधा के साथ-साथ, अलग-अलग इमेज कंप्रेस करने के फ़ॉर्मैट की साथ-साथ तुलना की जा सकती है.

सुझाव/राय भेजना या शिकायत करना

Chrome में वेब बंडल एपीआई को लागू करने की प्रोसेस पूरी नहीं हुई है और इसे प्रयोग के तौर पर इस्तेमाल किया जा रहा है. हर चीज़ काम नहीं कर रही है और हो सकता है कि यह काम न करे या बंद हो जाए. इसलिए, इसे प्रयोग के तौर पर फ़्लैग किया गया है. हालांकि, एपीआई इतना तैयार है कि आप Chrome में इसे एक्सप्लोर कर सकें. नए एपीआई को डिज़ाइन करने के लिए वेब डेवलपर का फ़ीडबैक बहुत ज़रूरी है. इसलिए, कृपया इसे आज़माएं और वेब बंडल पर काम करने वाले लोगों को अपनी राय बताएं.

  • webpackage-dev@chromium.org पर सामान्य सुझाव भेजें.
  • अगर इस खास जानकारी के बारे में आपका कोई सुझाव, शिकायत या राय है, तो नई खास समस्या दर्ज करने के लिए https://github.com/WICG/webpackage/issues/new पर जाएं या wpack@ietf.org पर ईमेल करें.
  • अगर आपको Chrome के काम करने के तरीके में कोई समस्या मिलती है, तो Chromium की गड़बड़ी की शिकायत करने के लिए, https://crbug.com/new पर जाएं.
  • खास जानकारी और टूल के बारे में आपका कोई भी योगदान ज़रूरी नहीं है. शामिल होने के लिए खास जानकारी स्टोर पर जाएं.

स्वीकार करना

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