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

Peter Conn
Peter Conn

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

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

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

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

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

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

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

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

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

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

npm i -g @bubblewrap/cli

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

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

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

डिजिटल एसेट लिंक, उस कुंजी को ध्यान में रखते हैं जिससे 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 पर डिप्लॉय करें.