इस पेज का अनुवाद Cloud Translation API से किया गया है.

इंटिग्रेशन गाइड

आंद्रे सिप्रियानी बांद्रा

Twitter GitHub Glitch Mastodon होम पेज

भरोसेमंद वेब गतिविधि सेट अप करने के लिए, डेवलपर को Java कोड लिखने की ज़रूरत नहीं है. हालांकि, इसके लिए Android Studio का इस्तेमाल करना ज़रूरी है. यह गाइड Android Studio 3.3 का इस्तेमाल करके बनाई गई है. इसे इंस्टॉल करने का तरीका जानने के लिए दस्तावेज़ देखें.

भरोसेमंद वेब गतिविधि प्रोजेक्ट बनाएं

भरोसेमंद वेब गतिविधियों का इस्तेमाल करते समय, प्रोजेक्ट को एपीआई लेवल 16 या उसके बाद के वर्शन को टारगेट करना चाहिए.

Android Studio खोलें और नया Android Studio प्रोजेक्ट शुरू करें पर क्लिक करें.

Android Studio आपसे गतिविधि का टाइप चुनने के लिए कहेगा. भरोसेमंद वेब गतिविधियां, सहायता लाइब्रेरी से मिली गतिविधि का इस्तेमाल करती हैं. इसलिए, कोई गतिविधि न जोड़ें चुनें और आगे बढ़ें पर क्लिक करें.

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

नाम: वह नाम जिसका इस्तेमाल Android लॉन्चर पर आपके ऐप्लिकेशन के लिए किया जाएगा.
पैकेज का नाम: Play Store और Android डिवाइस पर Android ऐप्लिकेशन के लिए एक यूनीक आइडेंटिफ़ायर. Android ऐप्लिकेशन के लिए पैकेज नाम बनाने की ज़रूरी शर्तों और सबसे सही तरीकों के बारे में ज़्यादा जानकारी के लिए, दस्तावेज़ देखें.
जगह की जानकारी सेव करना: वह जगह जहां Android Studio फ़ाइल सिस्टम में प्रोजेक्ट बनाएगा.
भाषा: प्रोजेक्ट के लिए, Java या Kotlin का कोड लिखने की ज़रूरत नहीं होती. डिफ़ॉल्ट के तौर पर Java चुनें.
कम से कम एपीआई लेवल: सपोर्ट लाइब्रेरी के लिए, कम से कम एपीआई लेवल 16 होना ज़रूरी है. ऊपर दिया गया एपीआई 16 का कोई भी वर्शन चुनें.

बाकी बचे चेकबॉक्स पर सही का निशान न लगाएं, क्योंकि हम झटपट ऐप्लिकेशन या AndroidX आर्टफ़ैक्ट का इस्तेमाल नहीं करेंगे और पूरा करें पर क्लिक करें.

भरोसेमंद वेब गतिविधि के लिए सहायता लाइब्रेरी पाना

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

हमें जिस फ़ाइल की तलाश है उसके नाम के आगे मॉड्यूल मॉड्यूल है.

भरोसेमंद वेब गतिविधि लाइब्रेरी Java 8 की सुविधाओं का इस्तेमाल करती है और पहला बदलाव Java 8 को चालू करता है. android सेक्शन के सबसे नीचे एक compileOptions सेक्शन जोड़ें, जैसा कि नीचे बताया गया है:

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

अगले चरण में, प्रोजेक्ट में भरोसेमंद वेब गतिविधि के लिए सपोर्ट लाइब्रेरी जोड़ी जाएगी. dependencies सेक्शन में नई डिपेंडेंसी जोड़ें:

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

Android Studio में एक प्रॉम्प्ट दिखेगा, जिसमें प्रोजेक्ट को एक बार और सिंक करने के लिए कहा जाएगा. अभी सिंक करें लिंक पर क्लिक करें और उसे सिंक करें.

भरोसेमंद वेब गतिविधि लॉन्च करें

Android ऐप्लिकेशन मेनिफ़ेस्ट में बदलाव करके, भरोसेमंद वेब गतिविधि सेट अप की जाती है.

Project Navigator पर, ऐप्लिकेशन सेक्शन को बड़ा करें. इसके बाद, मेनिफ़ेस्ट और फ़ाइल खोलने के लिए AndroidManifest.xml पर दो बार क्लिक करें.

हमने Android Studio को प्रोजेक्ट बनाते समय उसमें कोई ऐक्टिविटी न जोड़ने के लिए कहा है. इसलिए, मेनिफ़ेस्ट खाली है और उसमें सिर्फ़ ऐप्लिकेशन टैग मौजूद है.

application टैग में activity टैग डालकर, भरोसेमंद वेब गतिविधि जोड़ें:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

एक्सएमएल में जोड़े गए टैग, स्टैंडर्ड Android ऐप्लिकेशन मेनिफ़ेस्ट हैं. भरोसेमंद वेब गतिविधियों के लिए, काम की दो जानकारी होती है:

meta-data टैग, भरोसेमंद वेब गतिविधि को बताता है कि उसे कौनसा यूआरएल खोलना चाहिए. आपको जिस PWA को खोलना है उसके यूआरएल से, android:value एट्रिब्यूट की वैल्यू बदलें. इस उदाहरण में, यह https://airhorner.com है.
दूसरा intent-filter टैग, भरोसेमंद वेब गतिविधि को उन Android इंटेंट को रोकने की अनुमति देता है जो https://airhorner.com को खोलते हैं. data टैग में android:host एट्रिब्यूट उस डोमेन की ओर इशारा करना चाहिए जिसे भरोसेमंद वेब गतिविधि ने खोला है.

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

यूआरएल बार हटाना

विश्वसनीय वेब गतिविधियों के लिए URL बार निकालने के लिए Android ऐप्लिकेशन और वेबसाइट के बीच संबंध बनाना ज़रूरी है.

यह असोसिएशन डिजिटल ऐसेट लिंक से बनाया जाता है और इसे ऐप्लिकेशन से वेबसाइट और वेबसाइट से ऐप्लिकेशन, दोनों तरह से जोड़ा जाना चाहिए.

ऐप्लिकेशन को वेबसाइट की पुष्टि करने के लिए सेटअप किया जा सकता है. साथ ही, Chrome को इस तरह से सेट अप किया जा सकता है कि डीबग करने के लिए, वेबसाइट को ऐप्लिकेशन की पुष्टि वाले पेज पर न ले जाया जाए.

ऐप्लिकेशन से वेबसाइट को असोसिएट करना

स्ट्रिंग रिसॉर्स फ़ाइल app > res > values > strings.xml खोलें और नीचे दिया गया डिजिटल ऐसेटलिंक स्टेटमेंट जोड़ें:

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

site एट्रिब्यूट के कॉन्टेंट को बदलें, ताकि वह भरोसेमंद वेब गतिविधि की मदद से खोले गए स्कीमा और डोमेन से मेल खाए.

Android ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइल AndroidManifest.xml में, नया meta-data टैग जोड़कर स्टेटमेंट से लिंक करें, लेकिन इस बार application टैग के चाइल्ड के तौर पर:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity>
            ...
        </activity>

    </application>
</manifest>

अब हमने Android ऐप्लिकेशन से वेबसाइट पर एक संबंध बना लिया है. ऐप्लिकेशन की पुष्टि के लिए वेबसाइट बनाए बिना, इस हिस्से को डीबग करने से मदद मिलती है.

डेवलपमेंट डिवाइस पर इसकी जांच करने का तरीका यहां बताया गया है:

डीबग मोड चालू करना

डेवलपमेंट डिवाइस पर Chrome खोलें और chrome://flags पर जाएं. इसके बाद, नॉन-रूट डिवाइस पर कमांड लाइन चालू करें नाम का आइटम खोजें और उसे चालू है में बदलें. इसके बाद, ब्राउज़र को रीस्टार्ट करें.
इसके बाद, अपने ऑपरेटिंग सिस्टम के टर्मिनल ऐप्लिकेशन पर जाकर, Android डीबग ब्रिज (Android Studio में इंस्टॉल किया गया) का इस्तेमाल करें और नीचे दिए गए निर्देश का इस्तेमाल करें:

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Chrome को बंद करें और Android Studio से अपना ऐप्लिकेशन फिर से लॉन्च करें. ऐप्लिकेशन अब फ़ुल-स्क्रीन में दिखेगा.

वेबसाइट और ऐप्लिकेशन के बीच असोसिएशन बनाना

असोसिएशन बनाने के लिए डेवलपर को ऐप्लिकेशन से दो तरह की जानकारी इकट्ठा करनी होगी:

पैकेज का नाम: ऐप्लिकेशन के पैकेज का नाम सबसे पहली जानकारी होता है. यह ऐप्लिकेशन बनाते समय जनरेट किया गया पैकेज का ही नाम होता है. यह मॉड्यूल build.gradle में gradle Scripts > बिल्ड.ग्रेडल (मॉड्यूल: ऐप्लिकेशन) के अंदर भी मिल सकता है और यह applicationId एट्रिब्यूट की वैल्यू है.
SHA-256 फ़िंगरप्रिंट: Play Store पर अपलोड करने के लिए Android ऐप्लिकेशन में साइन इन करना ज़रूरी है. अपलोड पासकोड के SHA-256 फ़िंगरप्रिंट के ज़रिए, वेबसाइट और ऐप्लिकेशन के बीच कनेक्शन बनाने के लिए, एक ही सिग्नेचर का इस्तेमाल किया जाता है.

Android के दस्तावेज़ में, Android Studio का इस्तेमाल करके पासकोड जनरेट करने के तरीके की पूरी जानकारी दी गई है. की स्टोर के लिए पाथ, उपनाम, और पासवर्ड को नोट कर लें, क्योंकि अगले चरण में आपको इनकी ज़रूरत पड़ेगी.

keytool इस्तेमाल करके SHA-256 फ़िंगरप्रिंट एक्सट्रैक्ट करें. इसके लिए, नीचे दिए गए निर्देश का इस्तेमाल करें:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

SHA-256 फ़िंगरप्रिंट का मान सर्टिफ़िकेट फ़िंगरप्रिंट सेक्शन में प्रिंट होता है. आउटपुट का एक उदाहरण यहां दिया गया है:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

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

आइकॉन बनाना

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

Android Studio में इमेज ऐसेट स्टूडियो होता है. इससे आपको ऐप्लिकेशन की ज़रूरत के हिसाब से, हर रिज़ॉल्यूशन और ज़रूरत के हिसाब से सही आइकॉन बनाने के लिए टूल मिलते हैं.

Android Studio में File > New > Image Asset पर जाएं और Launcher Icons (Adaptative and Legacy) को चुनें. इसके बाद, विज़र्ड में बताए गए तरीके अपनाएं, ताकि ऐप्लिकेशन का आइकॉन अपनी पसंद के मुताबिक बनाया जा सके.

हस्ताक्षर किया गया APK जनरेट करना

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

adb का इस्तेमाल करके, आउटपुट APK को किसी टेस्ट डिवाइस में इंस्टॉल किया जा सकता है:

adb install app-release.apk

अगर पुष्टि नहीं हो पाती है, तो Android डीबग ब्रिज का इस्तेमाल करके अपने ओएस के टर्मिनल और टेस्ट डिवाइस कनेक्ट करके गड़बड़ी के मैसेज की जांच की जा सकती है.

adb logcat | grep -e OriginVerifier -e digital_asset_links

अपलोड APK जनरेट करके, अब आप ऐप्लिकेशन को Play Store पर अपलोड कर सकते हैं.

स्प्लैश स्क्रीन जोड़ना

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

पक्का करें कि आप Chrome 75 या इसके बाद के वर्शन में अपडेट करें. साथ ही, भरोसेमंद वेब गतिविधि के लिए सहायता लाइब्रेरी के नए वर्शन का इस्तेमाल करें.

स्प्लैश स्क्रीन के लिए इमेज जनरेट की जा रही हैं

Android डिवाइसों में अलग-अलग स्क्रीन साइज़ और पिक्सल डेंसिटी हो सकती है. यह पक्का करने के लिए कि स्प्लैश स्क्रीन सभी डिवाइसों पर अच्छी दिखे, आपको हर पिक्सल की डेंसिटी के लिए इमेज जनरेट करनी होगी.

डिसप्ले-इंडिपेंडेंट पिक्सल (डीपी या डिप) के बारे में पूरी जानकारी इस लेख में नहीं दी गई है. हालांकि, इसका एक उदाहरण 320x320dp की इमेज बनाना हो सकता है. यह इमेज किसी भी सघनता वाले डिवाइस की स्क्रीन पर 2x2 इंच की होनी चाहिए और mdpi डेंसिटी के हिसाब से 320x320 पिक्सल के बराबर होती है.

वहां से हम अन्य पिक्सल डेंसिटी के लिए ज़रूरी साइज़ का पता लगा सकते हैं. नीचे एक सूची दी गई है, जिसमें पिक्सल डेंसिटी, बेस साइज़ (320x320dp) पर लागू किया गया मल्टीप्लायर, पिक्सल में साइज़, और Android Studio प्रोजेक्ट में इमेज को जोड़ने की जगह शामिल है.

घनत्व	मल्टीप्लायर	साइज़	प्रोजेक्ट की जगह
mdpi (बेसलाइन)	1.0x	320x320 पिक्सल	/res/drawable-mdpi/
एलडीपीआई	0.75x	240x240 पिक्सल	/res/drawable-ldpi/
hdpi	1.5x	480x480 पिक्सल	/res/drawable-hdpi/
xhdpi	2.0x	640x640 पिक्सल	/res/drawable-xhdpi/
xxhdpi	3.0 गुना	960x960 पिक्सल	/res/drawable-xxhdpi/
xxxhdpi	4.0 गुना	1280x1280 पिक्सल	/res/drawable-xxxhdpi/

ऐप्लिकेशन अपडेट किया जा रहा है

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

सबसे पहले, Android मेनिफ़ेस्ट (AndroidManifest.xml) में content-provider जोड़ें.

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

इसके बाद, res/xml/filepaths.xml रिसॉर्स जोड़ें और twa की स्प्लैश स्क्रीन का पाथ बताएं:

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

आखिर में, LauncherActivity को पसंद के मुताबिक बनाने के लिए, meta-tags को Android मेनिफ़ेस्ट में जोड़ें:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

पक्का करें कि android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY टैग की वैल्यू, provider टैग में android:authorities एट्रिब्यूट में दी गई वैल्यू से मेल खाती हो.

LauncherActivity को पारदर्शी बनाना

इसके अलावा, LauncherActivity के लिए एक पारदर्शी थीम सेट करके, यह पक्का करें कि LauncherActivity पारदर्शी है, ताकि स्प्लैश से पहले सफ़ेद स्क्रीन न दिखे:

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

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