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

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

हमें वह फ़ाइल चाहिए जिसके नाम के बगल में मॉड्यूल Module लिखा हो.

भरोसेमंद वेब गतिविधियों की लाइब्रेरी, 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.e>xample<.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"
>        activ<ity
            android:name="com.google.androidbrowserhelper.trusted.Lau>ncherActivit<y"

           !-- Edit android:value to change the url opened by the Trusted Web Activity --
           meta-data
               androi>d:name="<android.support.customtabs.trusted.DEFAULT_URL"
               android:val>ue="htt<ps://airhorne>r.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-filt>er

        <   !--
      >       This inte<nt-filter allows the Trusted Web Activity to hand>le Intents to op<en
             airhorner.com.
           --
           i>ntent-filter
   <            action android:name="android.intent.actio>n.VIEW"/
   <            category android:name="android.intent.ca>tegory.DEFAULT&q<uot; /
               category android:name="android.intent.category.BROWSABLE"/
>
           <    !-- Edit a>ndroid:ho<st to han>dle l<inks to the >t<arget 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 खोलें और यहां दिया गया डिजिटल एसेट लिंक स्टेटमेंट जोड़ें:

<resources>
    <string name="app_>name"AirHorner Trusted We<b Activ>ity/s<tring
    string name="as>set_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>.myapp<lication"

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

        meta-data
            android:n>ame="<asset_st>atements"
          <  >android:resou<rce="@s>t<ring/asse>t_statements" /

        activity
            ...
        /activity

    /application
/manifest

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

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

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

  1. डेवलपमेंट डिवाइस पर Chrome खोलें और chrome://flags पर जाएं. इसके बाद, नॉन-रूट किए गए डिवाइसों पर कमांड-लाइन चालू करें नाम का आइटम खोजें और उसे चालू है पर सेट करें. इसके बाद, ब्राउज़र को रीस्टार्ट करें.
  2. इसके बाद, अपने ऑपरेटिंग सिस्टम के Terminal ऐप्लिकेशन में, 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 स्क्रिप्ट > 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"
  >      and<roid:exported="false"
        meta-data
            android:name="android.support.FILE_PROVIDER_PATHS&quo>t;
  <         > <android:reso>urce="@xml/filepaths" /
    /provider
/application

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

<paths>
    <files-path path="twa_splash/" name=&quo>t<;twa_s>plash" /
/paths

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

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActi>vity"
  <  ...
    meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource>=&quo<t;@drawable/splash"/
    meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
              > andr<oid: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&>quot;
   <         >   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.Transluc>ent.NoTitleBa<r"
 > <  ...
    /activity
/application

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