Bubblewrap के साथ अपनी वेबसाइट को नेटिव Android ऐप में बदलें - चरण-दर-चरण मार्गदर्शिका

यदि आप एक वेब डेवलपर हैं जो ऐप डेवलपमेंट के बारे में नहीं जानते (मेरी तरह!), तो यह लेख आपके लिए है। मैं आपको सिखाऊंगा कि नए फ्रेमवर्क या भाषाओं के बिना अपनी वेबसाइट को नेटिव ऐप में कैसे बदलें। आप सीखेंगे कि एक वेबसाइट को PWA (प्रोग्रेसिव वेब ऐप) में कैसे बदलें जिसे आप प्ले स्टोर पर प्रकाशित कर सकें।

सबसे पहले, हम आपकी वेबसाइट को प्रोग्रेसिव वेब ऐप (PWA) में बदलेंगे। फिर हम Google के एक मुफ्त कमांड-लाइन टूल Bubblewrap का उपयोग करके उस PWA को Android ऐप में पैकेज करेंगे। चलिए शुरू करते हैं।

पूर्वापेक्षाएँ

यदि आप इस ट्यूटोरियल का पालन करते हैं, तो कुछ पूर्वापेक्षाएँ हैं:

• वेब डेवलपमेंट का बुनियादी ज्ञान

• आपकी साइट सार्वजनिक रूप से लाइव होनी चाहिए, और आपके पास इसके सोर्स कोड तक पहुंच होनी चाहिए।

• हम आवश्यक टूल्स इंस्टॉल करने के लिए npm का उपयोग करेंगे, इसलिए सुनिश्चित करें कि Node.js इंस्टॉल है।

नोट: यह ट्यूटोरियल एक Vite प्रोजेक्ट पर आधारित है, लेकिन Bubblewrap के साथ अंतिम चरण किसी भी वेब फ्रेमवर्क के लिए समान हैं।

विषय सूची

1. PWA क्या है?

2. Bubblewrap क्या है?

   • TWA (ट्रस्टेड वेब एक्टिविटी) क्या है?

   • TWA ट्रस्ट कैसे सत्यापित करता है

3. चरण 1 - Vite में अपना PWA कॉन्फ़िगर करें

   • अपने ऐप आइकन बनाएं

   • Vite PWA प्लगइन इंस्टॉल करें।

   • प्लगइन कॉन्फ़िगर करें

4. चरण 2 - Android ऐप बनाएं

   • एक बिल्ड फोल्डर बनाएं

   • Bubblewrap CLI इंस्टॉल करें

   • प्रोजेक्ट इनिशियलाइज़ करें

   • आइए init कमांड का समस्या निवारण करें।

5. चरण 3 - Bubblewrap प्रश्नों का उत्तर दें

6. चरण 4 - ऐप बनाएं

7. चरण 5 - TWA सत्यापन सेट करना

   • .well-known फोल्डर क्या है?

   • delegate_permission/common.handle_all_urls क्या है?

8. चरण 6 (वैकल्पिक) - इन-ऐप अनुभव को अनुकूलित करें

9. समापन

PWA क्या है?

PWA का मतलब प्रोग्रेसिव वेब एप्लिकेशन है, और इसका लक्ष्य आपकी वेबसाइट को नेटिव ऐप की तरह दिखना और महसूस करना है। यदि आपने अपने ब्राउज़र में कोई वेबसाइट देखी है और एक इंस्टॉल आइकन देखा है जो आपको इसे अपने फोन या लैपटॉप पर डाउनलोड करने देता है, तो आपने PWA का उपयोग किया है।

लेकिन यह सिर्फ लुक और फील के बारे में नहीं है। एक PWA में ऐप जैसी विशेषताएं भी होती हैं, जैसे ऑफलाइन काम करना, पुश नोटिफिकेशन भेजना, और बहुत कुछ।

PWA के दो मुख्य घटक हैं।

• मैनिफेस्ट फाइल आपके ऐप का वर्णन करती है, जैसे इसका नाम, आइकन, स्टार्ट URL, आदि।

• एक सर्विस वर्कर एक बैकग्राउंड JavaScript फाइल है जो प्रॉक्सी के रूप में कार्य करती है। कैशिंग और पुश नोटिफिकेशन को एक सर्विस फाइल द्वारा नियंत्रित किया जाता है, जो मेन थ्रेड से अलग एक अलग थ्रेड के रूप में चलती है।

इन दो घटकों के बिना, ब्राउज़र उपयोगकर्ताओं को ऐप को स्थानीय रूप से डाउनलोड नहीं करने देंगे।

मैनिफेस्ट फाइल और सर्विस वर्कर ब्राउज़र के लिए एक चेकलिस्ट की तरह हैं। जब आप किसी वेबसाइट पर जाते हैं, तो ब्राउज़र इन दोनों घटकों को ढूंढता है। यदि वे मौजूद हैं और सही ढंग से कॉन्फ़िगर किए गए हैं, तो ब्राउज़र जानता है कि यह एक सच्चा PWA है और "इंस्टॉल" आइकन दिखाएगा, जिससे उपयोगकर्ता ऐप को स्थानीय रूप से डाउनलोड कर सकेंगे। उनके बिना, ब्राउज़र सिर्फ एक नियमित वेबसाइट देखता है, और इंस्टॉल करने का विकल्प उपलब्ध नहीं होगा।

Bubblewrap क्या है?

Bubblewrap Google द्वारा बनाया गया एक कमांड-लाइन टूल है जो आपके PWA को लेता है और इसे ट्रस्टेड वेब एक्टिविटी (TWA) का उपयोग करके Android ऐप में बदल देता है।

Bubblewrap एक PWA की मैनिफेस्ट फाइल को Android ऐप पैकेज (APK या AAB) में बदलकर TWA बनाने की प्रक्रिया को सरल बनाता है।

TWA (ट्रस्टेड वेब एक्टिविटी) क्या है?

एक ट्रस्टेड वेब एक्टिविटी (TWA) एक आधुनिक Android फीचर है जो आपको अपनी लाइव वेबसाइट को Android ऐप के अंदर फुल-स्क्रीन प्रदर्शित करने देता है। मूल रूप से, यह वेबसाइट को ब्राउज़र पर चलाता है, लेकिन यह ऐप पर ब्राउज़र एड्रेस बार नहीं दिखाता। इससे यह नेटिव ऐप जैसा महसूस होता है।

इस फुल-स्क्रीन फीचर को अनलॉक करने के लिए, आपके ऐप को "ट्रस्टेड" होने की आवश्यकता है।

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

TWA ट्रस्ट कैसे सत्यापित करता है

यह ट्रस्ट डिजिटल एसेट लिंक्स नामक एक प्रणाली का उपयोग करके सत्यापित किया जाता है। आप अपनी वेबसाइट पर एक विशेष फाइल रखते हैं (हम इसे कार्यान्वयन भाग में करेंगे) जिसमें आपके ऐप का अद्वितीय डिजिटल फिंगरप्रिंट होता है। जब कोई उपयोगकर्ता आपका ऐप खोलता है, तो Android OS इस फाइल की जांच करता है। यदि फिंगरप्रिंट मेल खाते हैं, तो यह आपके ऐप को "ट्रस्टेड" स्थिति प्रदान करता है, एड्रेस बार को हटा देता है, और डीप लिंकिंग जैसी अन्य सुविधाओं को सक्षम करता है।

आप Google के आधिकारिक परीक्षण टूल का उपयोग करके इस संबंध को स्वयं जांच सकते हैं: डिजिटल एसेट लिंक्स वेरिफायर।

अब जब आप प्रोजेक्ट और टूल्स को समझ गए हैं, तो आइए निर्माण शुरू करते हैं।

चरण 1 - Vite में अपना PWA कॉन्फ़िगर करें

पहला चरण PWA के लिए दो मुख्य घटक जोड़ना है: मैनिफेस्ट फाइल और सर्विस वर्कर। यह वही है जो ब्राउज़र को इसे "इंस्टॉल करने योग्य" के रूप में पहचानने की अनुमति देगा।

यह गाइड Vite के साथ बने प्रोजेक्ट पर आधारित है, जो एक विशेष प्लगइन के साथ इस प्रक्रिया को आसान बनाता है। यदि आप एक अलग टूल का उपयोग कर रहे हैं, तो अवधारणाएं समान हैं, लेकिन आपको अपने वातावरण के लिए विशिष्ट चरणों के बारे में अलग-अलग संसाधनों को देखने की आवश्यकता होगी।

अपने ऐप आइकन बनाएं

इससे पहले कि हम किसी कोड को छुएं, हमें अपने ऐप के लिए आइकन चाहिए। Android को ऐप के लॉन्चर आइकन (जो आप अपनी होम स्क्रीन पर देखते हैं) और स्प्लैश स्क्रीन (जो आप ऐप शुरू होने पर देखते हैं) के लिए विशिष्ट आकार की आवश्यकता होती है।

आपको दो मुख्य आकार चाहिए: 192x192 पिक्सेल और 512x512 पिक्सेल। आप अपने लोगो को संबंधित आकारों में उत्पन्न करने के लिए इस फेविकॉन जेनरेटर का उपयोग कर सकते हैं। आप अपना मुख्य लोगो अपलोड कर सकते हैं, और यह आपके लिए सभी आवश्यक आकार उत्पन्न करेगा।

फिर बस उत्पन्न फाइलों को डाउनलोड करें और अपने प्रोजेक्ट के public फोल्डर में 192x192 और 512x512 फाइलें रखें।

Vite PWA प्लगइन इंस्टॉल करें।

एक PWA के लिए एक मैनिफेस्ट फाइल और एक सर्विस वर्कर की आवश्यकता होती है। हम इन्हें मैन्युअल रूप से बना सकते हैं, लेकिन यह प्लगइन उस पूरी प्रक्रिया को स्वचालित करता है। यह हर बार जब आप अपना प्रोजेक्ट बनाते हैं तो स्वचालित रूप से एक manifest.json और service-worker.js उत्पन्न करेगा।

npm install vite-plugin-pwa -D 

प्लगइन कॉन्फ़िगर करें

इस चरण में, हम इस प्लगइन का उपयोग करेंगे और अपने ऐप के मैनिफेस्ट को कॉन्फ़िगर करेंगे। vite.config.ts फाइल संपादित करें। यह कॉन्फ़िगरेशन प्लगइन को बताएगा कि आपके ऐप का नाम क्या है, किन आइकन का उपयोग करना है, आदि।

vite.config.ts में:

export default defineConfig({ plugins: [ VitePWA({ registerType: "autoUpdate", manifest: { name: "your app name", short_name: "your app short name", description: "write any description", theme_color: "#0d1117", background_color: "#ffffff", display: "standalone", start_url: "/", icons: [ { src: "/web-app-manifest-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/web-app-manifest-512x512.png", sizes: "512x512", type: "image/png", }, ], }, }), ] 

अब, जब आप npm run build चलाते हैं, तो प्लगइन स्वचालित रूप से आपके लिए मैनिफेस्ट और सर्विस वर्कर फाइलें उत्पन्न करेगा। इसके साथ, परिवर्तनों को डेप्लॉय करें। अब आपकी वेबसाइट एक PWA है।

चरण 2 - Android ऐप बनाएं

अब जब आपकी वेबसाइट एक PWA है, तो आइए Bubblewrap का उपयोग करके इसे Android ऐप में पैकेज करें।

एक बिल्ड फोल्डर बनाएं

अपनी Android प्रोजेक्ट फाइलों के लिए एक समर्पित फोल्डर बनाएं। अपने प्रोजेक्ट की रूट में, एक नया फोल्डर बनाएं। मैं अपने को android कहूंगा।

project/ ├── client/ ├── server/ └── android/ 

अब उस नए फोल्डर पर नेविगेट करें जिसे आपने बनाया है।

Bubblewrap CLI इंस्टॉल करें

npm install -g @bubblewrap/cli 

प्रोजेक्ट इनिशियलाइज़ करें

अब, init कमांड चलाएं। Bubblewrap आपकी लाइव वेबसाइट से कनेक्ट होगा, Vite द्वारा बनाई गई manifest.webmanifest फाइल पढ़ेगा, और उस जानकारी का उपयोग एक बुनियादी Android प्रोजेक्ट उत्पन्न करने के लिए करेगा।

bubblewrap init --manifest=https://your-website-domain/manifest.webmanifest 

कमांड चलाएं, your-website-domain को अपने वास्तविक URL से बदलें:

आइए init कमांड का समस्या निवारण करें

जैसे ही आप init कमांड चलाते हैं, Bubblewrap को दो प्रमुख सॉफ्टवेयर पैकेजों की आवश्यकता होगी: Java Development Kit (JDK) और Android SDK। यह उन्हें आपके लिए इंस्टॉल करने की पेशकश करेगा।

JDK सेटअप:

? Do you want Bubblewrap to install the JDK (recommended)? (Enter "No" to use your own JDK 17 installation) (Y/n) 

मेरे मामले में, जब मैंने Bubblewrap को JDK इंस्टॉल करने दिया, तो प्रक्रिया फाइलें डाउनलोड करती थी लेकिन फिर "डीकंप्रेसिंग" चरण में विफल हो जाती थी। यदि आप इस समस्या का सामना करते हैं, तो चिंता न करें! समाधान इसे मैन्युअल रूप से इंस्टॉल करना है।

• प्रॉम्प्ट पर नहीं कहें।

• Adoptium जैसे स्रोत से अनुशंसित संस्करण (आमतौर पर JDK 17) डाउनलोड करें।

• इसे इंस्टॉल करें और अपने सिस्टम के एनवायरनमेंट वेरिएबल्स को JDK के bin पथ को शामिल करने के लिए सेट करें। यदि आप एनवायरनमेंट वेरिएबल्स सेट करना नहीं जानते हैं, तो आप इस साइट को देख सकते हैं: Set Environment Variables।

• जब Bubblewrap पथ के लिए पूछे, तो इसे सीधे प्रदान करें, जैसे C:\java\jdk-17.0.16.8-hotspot।

Android SDK सेटअप:

एक बार JDK सफलतापूर्वक सेट हो जाने पर, अगला चरण Android SDK को कॉन्फ़िगर करना है।

? Do you want Bubblewrap to install the Android SDK (recommended)? (Enter "No" to use your own Android SDK installation) (Y/n) 

चूंकि मेरे पास Android SDK नहीं था, मैंने हाँ चुनकर Bubblewrap को इसे संभालने दिया। मुझे यहां कोई समस्या नहीं हुई।

यदि आपको Android SDK सेटअप में कोई समस्या आती है, तो इसे मैन्युअल रूप से सेट करें और पथ दें, जैसे JDK सेटअप में किया था।

चरण 3 - Bubblewrap प्रश्नों का उत्तर दें

SDK सेटअप होने के बाद, Bubblewrap आपके ऐप को कॉन्फ़िगर करने के लिए कई प्रश्न पूछेगा। इस जानकारी का उपयोग twa-manifest.json फाइल बनाने के लिए किया जाता है, जो आपके ऐप का ब्लूप्रिंट है।

Domain: Enter दबाएं (आपके मैनिफेस्ट से ऑटो-भरा) Application name: आपके ऐप का पूरा नाम Application ID: (उदाहरण, chat.yourapp.twa) Display mode: standalone Orientation: portrait Status bar color: Enter दबाएं (डिफ़ॉल्ट स्वीकार करता है) Splash screen color: Enter दबाएं (डिफ़ॉल्ट स्वीकार करता है) Icon URL: Enter दबाएं (डिफ़ॉल्ट स्वीकार करता है) Include support for Play Billing?: यदि आपका ऐप Google Play इन-ऐप खरीदारी का उपयोग करता है तो Y टाइप करें। अन्यथा, N Request geolocation permission?: यदि आपके ऐप को स्थान एक्सेस की आवश्यकता है तो Y टाइप करें। अन्यथा, N 

इन प्रश्नों में, महत्वपूर्ण भाग की स्टोर और कुंजी है।

First and Last names: आपका पूरा नाम Organizational Unit: Developer या कुछ भी Organization: आपके संगठन का नाम Country (2-letter code): आपका देश कोड Password for key store: एक नया पासवर्ड दर्ज करें Password for key: वही पासवर्ड फिर से दर्ज करें 

नोट: की स्टोर और कुंजी दोनों के लिए ये पासवर्ड समान होने चाहिए, अन्यथा यह एक त्रुटि फेंक देगा। इस मुद्दे को देखें: Bubblewrap Issue।

चरण 4 - ऐप बनाएं

bubblewrap build --universalApk 

यह कमांड आपके एप्लिकेशन का निर्माण शुरू करती है। यहां, फ्लैग universalApk .apk और .abb दोनों का उत्पादन करेगा। यदि आप अपना एप्लिकेशन प्ले स्टोर पर प्रकाशित करने जा रहे हैं, तो .abb फाइल को प्ले स्टोर पर अपलोड करें। हमारे परीक्षण के लिए, हमें एक APK फाइल की आवश्यकता है, इसलिए यह फ्लैग universalApk दोनों फाइलों का उत्पादन करेगा। यदि हमने यह फ्लैग नहीं दिया होता, तो यह केवल .abb देता।

चरण 5 - TWA सत्यापन सेट करना

एक बार बिल्ड हो जाने पर, आपको APK मिलेगा। इसे अपने फोन पर ट्रांसफर करें और टेस्ट करें। जब आप ऐप खोलेंगे, तो आप ब्राउज़र एड्रेस बार देखेंगे। ऐसा इसलिए है क्योंकि हमने अभी तक अपने ऐप और वेबसाइट के बीच "ट्रस्ट" सेट नहीं किया है। आइए इसे अभी ठीक करें।

अपने फ्रंटएंड प्रोजेक्ट में, public फोल्डर पर जाएं, .well-known नामक एक नया फोल्डर बनाएं, और उसके अंदर assetlinks.json नामक एक फाइल बनाएं।

frontend/ ├── public/ ├── .well-known/ └── assetlinks.json 

.well-known फोल्डर क्या है?

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

assetlinks.json में निम्नलिखित पेस्ट करें:

[ { "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "chat.yourapp.twa", "sha256_cert_fingerprints": [ "your_sha256_fingerprint" ] } } ] 

delegate_permission/common.handle_all_urls क्या है?

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

package_name फ़ील्ड packageId होना चाहिए, जिसे आप अपने Android बिल्ड फोल्डर में twa-manifest.json से प्राप्त कर सकते हैं।

अब, अपने फिंगरप्रिंट प्राप्त करें। ऐसा करने के लिए निम्नलिखित कमांड चलाएं:

keytool -list -v -keystore android.keystore -alias android 

उपनाम नाम आपके द्वारा बनाए गए मान होना चाहिए। एक बार जब आप यह कमांड दर्ज करते हैं, तो यह की स्टोर पासवर्ड के लिए पूछेगा। उसे दर्ज करें, और आपको अपना SHA256 फिंगरप्रिंट मिलेगा। उसे कॉपी करें और assetslinks.json फाइल में sha256_cert_fingerprints सरणी में पेस्ट करें। अब इन परिवर्तनों को प्रोडक्शन में पुश करें। आप डिजिटल एसेट लिंक्स में सत्यापन की पुष्टि कर सकते हैं

बस! अब आप ऐप इंस्टॉल कर सकते हैं और इसका परीक्षण कर सकते हैं।

चरण 6 (वैकल्पिक) - इन-ऐप अनुभव को अनुकूलित करें

अब, इसके अतिरिक्त, कुछ मामले होंगे जहां हम वेबसाइट पर उपयोगकर्ताओं को मोबाइल ऐप की तुलना में अलग सामग्री दिखाना चाहते हैं। क्या हम ऐसा कर सकते हैं? हाँ!

आपके Android बिल्ड फोल्डर में, twa-manifest.json में, startUrl नामक एक फ़ील्ड होगी। यदि नहीं, तो इसे जोड़ें और मान "startUrl": "/?twa=true" जोड़ें। startUrl प्रवेश बिंदु है। मेरे पास twa=true मान का एक क्वेरी पैरामीटर है।

bubblewrap build --universalApk के साथ फिर से बिल्ड चलाएं।

अब, यदि आप अपना ऐप खोलते हैं, तो यह एंट्री URL के साथ yourwebsitedomain.com/?twa=true के रूप में खुलेगा।

अपने फ्रंटएंड में:

const twaParam = queryParams.get("twa"); const [isTwa, setIsTwa] = useState<boolean>(() => { return localStorage.getItem("isTwa") === "true"; }); useEffect(() => { if (twaParam === "true") { localStorage.setItem("isTwa", "true"); // स्थानीय स्टोरेज में मान सेट करें setIsTwa(true); } }, [twaParam]); 

 {isTwa? ( <Link to="/contact" className="underline hover:text-primary"> Contact </Link> ) : ( <Link to="/download" className="underline hover:text-primary"> Download App </Link> )} 

उपरोक्त कोड में, हम URL में twa=true क्वेरी पैरामीटर की जांच करते हैं। यदि यह मौजूद है, तो हम उस जानकारी को स्थानीय स्टोरेज में सहेजते हैं, और फिर उपयोगकर्ता के लिए सशर्त रूप से सामग्री प्रस्तुत करते हैं।

बस। हमने एक ऐप बना लिया है।

यदि आप कोई नाम, रंग, या स्प्लैश स्क्रीन बदलना चाहते हैं, तो आप इसे twa-manifest.json में बदल सकते हैं और फिर से बिल्ड चला सकते हैं।

समापन

Bubblewrap केवल Android के लिए है। यदि आप चाहते हैं कि ऐप क्रॉस-प्लेटफॉर्म का समर्थन करे, तो कुछ अन्य प्लेटफॉर्म हैं, जैसे Capacitor, जिसके बारे में मैं दूसरे लेख में लिखूंगा।

वैसे, आप Bubblewrap का उपयोग करके मेरे द्वारा बनाए गए ऐप को यहां देख सकते हैं: Stranger Talk।

यदि कोई गलती है या आपके कोई प्रश्न हैं, तो LinkedIn या Instagram पर मुझसे संपर्क करें।

पढ़ने के लिए धन्यवाद!

मुफ्त में कोड करना सीखें। freeCodeCamp का ओपन सोर्स पाठ्यक्रम 40,000 से अधिक लोगों को डेवलपर्स के रूप में नौकरी पाने में मदद कर चुका है। शुरू करें