आसानी से सीखें

Peter Conn
Peter Conn

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

इस गाइड को पढ़ने के बाद, आपको ये चीज़ें पता होंगी:

  • आपने Bubblewrap का इस्तेमाल करके, ऐसा ऐप्लिकेशन बनाया हो जो भरोसेमंद वेब गतिविधि का इस्तेमाल करता हो और जिसकी पुष्टि हो चुकी हो.
  • यह जानना कि हस्ताक्षर करने के लिए इस्तेमाल की जाने वाली कुंजियों का इस्तेमाल कब किया जाता है.
  • यह पता लगाने में सक्षम होना चाहिए कि आपके Android ऐप्लिकेशन को किस हस्ताक्षर के साथ बनाया जा रहा है.
  • डिजिटल ऐसेट के लिंक वाली बुनियादी फ़ाइल बनाने का तरीका जानें.

इस गाइड का पालन करने के लिए, आपके पास ये चीज़ें होनी चाहिए:

  • डेवलपमेंट कंप्यूटर पर Node.js 10 या उसके बाद का वर्शन इंस्टॉल होना चाहिए.
  • डेवलपमेंट के लिए कनेक्ट और सेट अप किया गया Android फ़ोन या एमुलेटर (अगर किसी फ़िज़िकल फ़ोन का इस्तेमाल किया जा रहा है, तो यूएसबी डीबगिंग चालू करें).
  • ऐसा ब्राउज़र जो आपके डेवलपमेंट फ़ोन पर, भरोसेमंद वेब गतिविधि की सुविधा के साथ काम करता हो. Chrome 72 या उसके बाद का वर्शन काम करेगा. अन्य ब्राउज़र पर भी यह सुविधा जल्द ही उपलब्ध होगी.
  • वह वेबसाइट जिसे आपको 'भरोसेमंद वेब गतिविधि' में देखना है.

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

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

Bubblewrap को इंस्टॉल और कॉन्फ़िगर करना

Bubblewrap, Node.js के लिए लाइब्रेरी और कमांड-लाइन टूल (सीएलआई) का एक सेट है. इसकी मदद से, डेवलपर भरोसेमंद वेब गतिविधि का इस्तेमाल करके, Android ऐप्लिकेशन में प्रोग्रेसिव वेब ऐप्लिकेशन जनरेट, बनाए, और चला सकते हैं.

CLI को इस कमांड की मदद से इंस्टॉल किया जा सकता है:

npm i -g @bubblewrap/cli

एनवायरमेंट सेट अप करना

Bubblewrap को पहली बार चलाने पर, यह ज़रूरी बाहरी डिपेंडेंसी को अपने-आप डाउनलोड और इंस्टॉल करने का विकल्प देगा. हमारा सुझाव है कि आप टूल को ऐसा करने की अनुमति दें, क्योंकि इससे यह पक्का होता है कि डिपेंडेंसी सही तरीके से कॉन्फ़िगर की गई हैं. मौजूदा Java Development Kit (JDK) या Android कमांड-लाइन टूल इंस्टॉलेशन का इस्तेमाल करने के लिए, Bubblewrap दस्तावेज़ देखें.

प्रोजेक्ट को शुरू और बिल्ड करना

PWA को रैप करने वाले Android प्रोजेक्ट को शुरू करने के लिए, init कमांड चलाएं:

bubblewrap init --manifest=https://my-twa.com/manifest.json

Bubblewrap, वेब मेनिफ़ेस्ट को पढ़ेगा. साथ ही, डेवलपर से Android प्रोजेक्ट में इस्तेमाल की जाने वाली वैल्यू की पुष्टि करने के लिए कहेगा. इसके बाद, उन वैल्यू का इस्तेमाल करके प्रोजेक्ट जनरेट करेगा. प्रोजेक्ट जनरेट होने के बाद, यह कमांड चलाकर APK जनरेट करें:

bubblewrap build

चलाएं

बिल्ड करने की प्रोसेस के आउटपुट में, app-release-signed.apk नाम की एक फ़ाइल होगी. इस फ़ाइल को जांच के लिए, डेवलपमेंट डिवाइस पर इंस्टॉल किया जा सकता है या रिलीज़ के लिए Play Store पर अपलोड किया जा सकता है.

Bubblewrap, किसी स्थानीय डिवाइस पर ऐप्लिकेशन को इंस्टॉल और टेस्ट करने के लिए निर्देश देता है. कंप्यूटर से कनेक्ट किए गए डिवाइस पर, ये काम करें:

bubblewrap install

इसके अलावा, adb टूल का इस्तेमाल भी किया जा सकता है.

adb install app-release-signed.apk

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

Bubblewrap के लिए ग्राफ़िकल यूज़र इंटरफ़ेस (जीयूआई) के विकल्प

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

साइनिंग पासकोड के बारे में जानकारी

डिजिटल एसेट लिंक, उस कुंजी को ध्यान में रखते हैं जिससे APK को साइन किया गया है. पुष्टि न हो पाने की एक आम वजह, गलत हस्ताक्षर का इस्तेमाल करना है. (ध्यान रखें, पुष्टि न होने का मतलब है कि आपको अपनी वेबसाइट को कस्टम टैब के तौर पर लॉन्च करना होगा. इसमें पेज के सबसे ऊपर, ब्राउज़र यूज़र इंटरफ़ेस (यूआई) होगा.) जब Bubblewrap ऐप्लिकेशन बनाता है, तो init चरण के दौरान, एक कुंजी सेटअप करके APK बनाया जाएगा. हालांकि, Google Play में अपना ऐप्लिकेशन पब्लिश करने पर, आपके लिए एक और पासकोड बनाया जा सकता है. यह इस बात पर निर्भर करता है कि आपने साइनिंग पासकोड मैनेज करने का कौनसा तरीका चुना है. साइनिंग पासकोड और इनका Bubblewrap और Google Play से जुड़ाव के बारे में ज़्यादा जानें.

डिजिटल एसेट लिंक में, आपकी वेबसाइट पर मौजूद एक फ़ाइल होती है जो आपके ऐप्लिकेशन पर ले जाती है. साथ ही, आपके ऐप्लिकेशन में कुछ ऐसा मेटाडेटा होता है जो आपकी वेबसाइट पर ले जाता है.

assetlinks.json फ़ाइल बनाने के बाद, उसे अपनी वेबसाइट पर .well-known/assetlinks.json पर अपलोड करें. यह वेबसाइट के रूट से जुड़ा होना चाहिए, ताकि ब्राउज़र आपके ऐप्लिकेशन की पुष्टि सही तरीके से कर सके. डिजिटल एसेट लिंक के बारे में ज़्यादा जानें. इससे आपको यह जानकारी मिलेगी कि यह आपकी हस्ताक्षर करने की कुंजी से कैसे जुड़ा है.

आपके ब्राउज़र की जांच करना

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

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

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

अगले चरण

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

हमारा सुझाव है कि अगले चरण के लिए, आप अपने ऐप्लिकेशन के लिए आइकॉन बनाएं. इसके बाद, अपने ऐप्लिकेशन को Play Store पर डिप्लॉय करें.