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

André Cipriani Bandarra
André Cipriani Bandarra

भरोसेमंद वेब गतिविधि सेट अप करने के लिए, डेवलपर को 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 आर्टफ़ैक्ट का इस्तेमाल नहीं करेंगे. इसके बाद, पूरा करें पर क्लिक करें.

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

प्रोजेक्ट में भरोसेमंद वेब गतिविधि लाइब्रेरी को सेटअप करने के लिए, आपको ऐप्लिकेशन की बिल्ड फ़ाइल में बदलाव करना होगा. Project Navigator में, Gradle स्क्रिप्ट सेक्शन देखें. 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 ऐप्लिकेशन मेनिफ़ेस्ट हैं. भरोसेमंद वेब गतिविधियों के संदर्भ के लिए दो काम की जानकारी होती है:

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

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

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

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

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

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

स्ट्रिंग रिसॉर्स फ़ाइल app > res > values > strings.xml खोलें और यहां दिया गया Digital AssetLinks स्टेटमेंट जोड़ें:

<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 ऐप्लिकेशन से वेबसाइट के बीच संबंध स्थापित कर लिया है. यह वेबसाइट से ऐप्लिकेशन की पुष्टि करने के लिए, संबंध के इस हिस्से को डीबग करने में मददगार होता है.

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

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

  1. डेवलपमेंट डिवाइस पर Chrome खोलें और chrome://flags पर जाएं. इसके बाद, नॉन-रूट किए गए डिवाइसों पर कमांड-लाइन चालू करें नाम का आइटम खोजें और उसे चालू है पर सेट करें. इसके बाद, ब्राउज़र को रीस्टार्ट करें.
  2. इसके बाद, अपने ऑपरेटिंग सिस्टम के टर्मिनल ऐप्लिकेशन पर, Android Debug Bridge (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 > build.gradle (मॉड्यूल: ऐप्लिकेशन) में जाकर भी इसे प्राप्त किया जा सकता है और यह applicationId विशेषता का मान है.
  • SHA-256 फ़िंगरप्रिंट: Android ऐप्लिकेशन को Play Store पर अपलोड करने के लिए, उन पर हस्ताक्षर करना ज़रूरी है. अपलोड पासकोड के 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 में Image Asset Studio होता है. इसमें हर रिज़ॉल्यूशन के लिए सही आइकॉन बनाने और ऐप्लिकेशन की ज़रूरतों के हिसाब से बदलाव करने के लिए ज़रूरी टूल मिलते हैं.

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

साइन किया गया APK जनरेट करना

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

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

adb install app-release.apk

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

adb logcat | grep -e OriginVerifier -e digital_asset_links

जनरेट किए गए अपलोड APK की मदद से, अब ऐप्लिकेशन को Play Store पर अपलोड किया जा सकता है.

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

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

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

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

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

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

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

घनत्व मल्टीप्लायर साइज़ प्रोजेक्ट की जगह
mdpi (बेसलाइन) 1.0x 320x320 पिक्सल /res/drawable-mdpi/
ldpi 0.75x 240x240 पिक्सल /res/drawable-ldpi/
hdpi 1.5x 480x480 पिक्सल /res/drawable-hdpi/
xhdpi 2.0x 640x640 पिक्सल /res/drawable-xhdpi/
xxhdpi 3.0x 960x960 पिक्सल /res/drawable-xxhdpi/
xxxhdpi 4.0x 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 को पसंद के मुताबिक बनाने के लिए, Android मेनिफ़ेस्ट में meta-tags जोड़ें:

<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 पर हमसे संपर्क करें.