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

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

Yusuke Utsunomiya

Kenji Baheux

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

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

वेब बंडल एपीआई एक ऐसा प्रस्ताव है जिसकी मदद से आप ये सभी काम कर सकते हैं.

ब्राउज़र के साथ काम करना

Web Bundles API फ़िलहाल सिर्फ़ Chromium वाले ब्राउज़र में काम करता है एक्सपेरिमेंट के तौर पर शुरू किया गया फ़्लैग.

पेश है Web Bundles API

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

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

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

इस लेख में बताया गया है कि वेब बंडल क्या है और इसे कैसे इस्तेमाल किया जाता है.

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

साफ़ तौर पर कहा जाए, तो वेब बंडल एक ऐसी CBOR फ़ाइल है जिसका .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 फ़ाइल या संसाधन की पसंद के मुताबिक सूची का इस्तेमाल करके वेब बंडल बनाने की सुविधा देता है यूआरएल. ज़्यादा जानने के लिए, GitHub रेपो पर जाएं go/bundle के बारे में जानकारी. बंडल बनाने के लिए, प्रयोग के तौर पर शुरू किया गया Node.js मॉड्यूल भी आज़माया जा सकता है, wbn. ध्यान दें कि wbn अब भी इसके शुरुआती चरणों में है डेवलपमेंट.

वेब बंडल का इस्तेमाल करके कॉन्टेंट चलाना

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

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

4. वेब बंडल फ़्लैग को चालू है पर सेट करें.

   

5. Chrome को फिर से लॉन्च करें.

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

सब कुछ जादू से काम करता है.

आप चाहें, तो अन्य सैंपल वेब बंडल का इस्तेमाल भी करें:

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

सुझाव भेजें

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

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

स्वीकार करना

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