หน้านี้ได้รับการแปลโดย Cloud Translation API

คู่มือการผสานรวม

André Cipriani Bandarra

การตั้งค่ากิจกรรมบนเว็บที่เชื่อถือได้ไม่ได้กำหนดให้นักพัฒนาแอปต้องเขียนโค้ด Java แต่ต้องใช้ Android Studio คู่มือนี้จัดทำขึ้นโดยใช้ Android Studio 3.3 โปรดดูเอกสารเกี่ยวกับวิธีติดตั้ง

สร้างโปรเจ็กต์กิจกรรมในเว็บซึ่งเชื่อถือได้

เมื่อใช้กิจกรรมบนเว็บที่เชื่อถือได้ โปรเจ็กต์ต้องกำหนดเป้าหมายเป็น API ระดับ 16 ขึ้นไป

เปิด Android Studio แล้วคลิกเริ่มโปรเจ็กต์ Android Studio ใหม่

Android Studio จะแจ้งให้เลือกประเภทกิจกรรม เนื่องจากกิจกรรมในเว็บที่เชื่อถือได้จะใช้กิจกรรมที่ได้จากไลบรารีการสนับสนุน ให้เลือกเพิ่มไม่มีกิจกรรม แล้วคลิกถัดไป

ขั้นตอนถัดไป วิซาร์ดจะแจ้งให้กําหนดค่าโปรเจ็กต์ คำอธิบายสั้นๆ ของแต่ละช่องมีดังนี้

ชื่อ: ชื่อที่จะใช้สำหรับแอปพลิเคชันของคุณใน Android Launcher
ชื่อแพ็กเกจ: ตัวระบุที่ไม่ซ้ำกันสำหรับแอปพลิเคชัน Android ใน Play Store และในอุปกรณ์ Android อ่านข้อมูลเพิ่มเติมเกี่ยวกับข้อกำหนดและแนวทางปฏิบัติแนะนำในการสร้างชื่อแพ็กเกจสำหรับแอป Android ได้ในเอกสารประกอบ
ตำแหน่งบันทึก: ตําแหน่งที่ Android Studio จะสร้างโปรเจ็กต์ในระบบไฟล์
ภาษา: โปรเจ็กต์ไม่จำเป็นต้องเขียนโค้ด Java หรือ Kotlin เลือก Java เป็นค่าเริ่มต้น
ระดับ API ขั้นต่ำ: ไลบรารีสนับสนุนต้องใช้ API ระดับ 16 เป็นอย่างน้อย เลือก API 16 ขึ้นไป

ปล่อยช่องทำเครื่องหมายที่เหลือไว้โดยไม่ได้เลือก เนื่องจากเราจะไม่ใช้ Instant App หรืออาร์ติแฟกต์ AndroidX แล้วคลิกเสร็จสิ้น

รับไลบรารีการสนับสนุนกิจกรรมในเว็บซึ่งเชื่อถือได้

หากต้องการตั้งค่าคลังกิจกรรมบนเว็บที่เชื่อถือได้ในโปรเจ็กต์ คุณจะต้องแก้ไขไฟล์บิลด์แอปพลิเคชัน มองหาส่วนสคริปต์ Gradle ในเครื่องมือนำทางโปรเจ็กต์ มีไฟล์ 2 ไฟล์ที่ชื่อ build.gradle ซึ่งอาจทำให้สับสนได้ คำอธิบายในวงเล็บจะช่วยระบุไฟล์ที่ถูกต้อง

ไฟล์ที่เราต้องการคือไฟล์ที่มีโมดูล Module ข้างชื่อ

ไลบรารีกิจกรรมบนเว็บที่เชื่อถือได้ใช้ฟีเจอร์ Java 8 และการเปลี่ยนแปลงแรกจะเปิดใช้ Java 8 เพิ่มส่วน compileOptions ลงที่ด้านล่างของส่วน android ดังด้านล่าง

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

ขั้นตอนถัดไปจะเพิ่มคลังการสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้ลงในโปรเจ็กต์ เพิ่มข้อกำหนดใหม่ลงในส่วน dependencies

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

Android Studio จะแสดงข้อความแจ้งให้ซิงค์โปรเจ็กต์อีกครั้ง คลิกลิงก์ซิงค์เลย แล้วซิงค์

เปิดกิจกรรมในเว็บซึ่งเชื่อถือได้

การตั้งค่ากิจกรรมบนเว็บที่เชื่อถือได้ทำได้โดยการแก้ไขไฟล์ Manifest ของแอป Android

ในProject Navigator ให้ขยายส่วนแอป ตามด้วยไฟล์ Manifest แล้วดับเบิลคลิก AndroidManifest.xml เพื่อเปิดไฟล์

เนื่องจากเราได้ขอให้ Android Studio เพิ่มกิจกรรมใดๆ ลงในโปรเจ็กต์เมื่อสร้าง ไฟล์ Manifest จึงว่างเปล่าและมีเพียงแท็กแอปพลิเคชันเท่านั้น

เพิ่มกิจกรรมบนเว็บที่เชื่อถือได้โดยแทรกแท็ก activity ลงในแท็ก application

<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>

แท็กที่เพิ่มลงใน XML คือไฟล์ Manifest ของแอป Android มาตรฐาน ข้อมูลที่เกี่ยวข้อง 2 รายการสําหรับบริบทของกิจกรรมบนเว็บที่เชื่อถือได้ ได้แก่

แท็ก meta-data จะบอกกิจกรรมในเว็บซึ่งเชื่อถือได้ว่าจะเปิด URL ใด เปลี่ยนแอตทริบิวต์ android:value เป็น URL ของ PWA ที่ต้องการเปิด ในตัวอย่างนี้ https://airhorner.com
แท็ก intent-filter ที่ 2 ช่วยให้กิจกรรมในเว็บซึ่งเชื่อถือได้สามารถขัดขวาง Android Intent ที่เปิด https://airhorner.com แอตทริบิวต์ android:host ในแท็ก data ต้องชี้ไปยังโดเมนที่กิจกรรมบนเว็บที่เชื่อถือได้เปิดขึ้น

ส่วนถัดไปจะแสดงวิธีตั้งค่า Digital AssetLinks เพื่อยืนยันความสัมพันธ์ระหว่างเว็บไซต์กับแอป และนำแถบ URL ออก

นำแถบ URL ออก

กิจกรรมบนเว็บที่เชื่อถือได้ต้องมีการเชื่อมโยงระหว่างแอปพลิเคชัน Android กับเว็บไซต์เพื่อนำแถบ URL ออก

การเชื่อมโยงนี้สร้างขึ้นผ่านลิงก์เนื้อหาดิจิทัล และจะต้องสร้างการเชื่อมโยงทั้ง 2 วิธี ได้แก่ การลิงก์จากแอปไปยังเว็บไซต์ และจากเว็บไซต์ไปยังแอป

คุณสามารถตั้งค่าแอปให้ตรวจสอบเว็บไซต์และตั้งค่า 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 ให้ตรงกับสคีมาและโดเมนที่กิจกรรมในเว็บซึ่งเชื่อถือได้เปิดขึ้น

กลับไปที่ไฟล์ Manifest ของแอป 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 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 ตอนนี้แอปพลิเคชันควรแสดงแบบเต็มหน้าจอ

สร้างการเชื่อมโยงจากเว็บไซต์ไปยังแอป

นักพัฒนาแอปต้องรวบรวมข้อมูลจากแอป 2 รายการเพื่อสร้างการเชื่อมโยง

ชื่อแพ็กเกจ: ข้อมูลแรกคือชื่อแพ็กเกจของแอป ซึ่งเป็นชื่อแพ็กเกจเดียวกับที่สร้างขึ้นเมื่อสร้างแอป นอกจากนี้ คุณยังดูชื่อแพ็กเกจนี้ได้ภายในโมดูล build.gradle ในส่วนสคริปต์ Gradle > build.gradle (โมดูล: แอป) และเป็นค่าของแอตทริบิวต์ applicationId
ลายนิ้วมือ SHA-256: แอปพลิเคชัน Android ต้องได้รับการรับรองจึงจะอัปโหลดไปยัง Play Store ได้ ระบบจะใช้ลายเซ็นเดียวกันเพื่อสร้างการเชื่อมต่อระหว่างเว็บไซต์กับแอปผ่านลายนิ้วมือ SHA-256 ของคีย์การอัปโหลด

เอกสารประกอบของ Android อธิบายวิธีสร้างคีย์โดยใช้ Android Studio อย่างละเอียด อย่าลืมจดเส้นทาง อีเมลแทน และรหัสผ่านสำหรับที่เก็บคีย์ เนื่องจากคุณจะต้องใช้ในขั้นตอนถัดไป

ดึงข้อมูลลายนิ้วมือ SHA-256 โดยใช้ keytool ด้วยคำสั่งต่อไปนี้

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

เมื่อคุณมีข้อมูลทั้ง 2 รายการแล้ว ให้ไปที่เครื่องมือสร้าง assetlinks กรอกข้อมูลในช่อง แล้วกดสร้างคำสั่ง คัดลอกข้อความที่สร้างขึ้นแล้วแสดงจากโดเมนของคุณจาก URL /.well-known/assetlinks.json

การสร้างไอคอน

เมื่อ Android Studio สร้างโปรเจ็กต์ใหม่ โปรเจ็กต์จะมีไอคอนเริ่มต้น ในฐานะนักพัฒนาแอป คุณจะต้องสร้างไอคอนของคุณเองและทำให้แอปพลิเคชันของคุณแตกต่างจากแอปพลิเคชันอื่นๆ ใน Launcher ของ Android

Android Studio มี Image Asset Studio ซึ่งมีเครื่องมือที่จำเป็นในการสร้างไอคอนที่ถูกต้องสำหรับความละเอียดทุกระดับและปรับแต่งแอปพลิเคชันได้ตามต้องการ

ใน Android Studio ให้ไปที่ File > New > Image Asset เลือก Launcher Icons (Adaptative and Legacy) แล้วทําตามขั้นตอนจากวิซาร์ดเพื่อสร้างไอคอนที่กําหนดเองสําหรับแอปพลิเคชัน

การสร้าง APK ที่เซ็นชื่อแล้ว

เมื่อไฟล์ assetlinks อยู่ในโดเมนและกำหนดค่าแท็ก asset_statements ในแอปพลิเคชัน Android แล้ว ขั้นตอนถัดไปคือการสร้างแอปที่ลงนามแล้ว เราขอย้ำอีกครั้งว่าขั้นตอนนี้มีเอกสารประกอบอยู่มากมาย

คุณติดตั้ง APK ผลลัพธ์ลงในอุปกรณ์ทดสอบได้โดยใช้ adb โดยทำดังนี้

adb install app-release.apk

หากขั้นตอนการตรวจสอบไม่สำเร็จ คุณสามารถตรวจสอบข้อความแสดงข้อผิดพลาดได้โดยใช้ Android Debug Bridge จากเทอร์มินัลของระบบปฏิบัติการและเชื่อมต่ออุปกรณ์ทดสอบ

adb logcat | grep -e OriginVerifier -e digital_asset_links

เมื่อสร้าง APK สำหรับการอัปโหลดแล้ว คุณจะอัปโหลดแอปไปยัง Play Store ได้

การเพิ่มหน้าจอเริ่มต้น

ตั้งแต่ Chrome 75 เป็นต้นไป กิจกรรมบนเว็บที่เชื่อถือได้รองรับหน้าจอแนะนำ คุณตั้งค่าหน้าจอแนะนำได้โดยเพิ่มไฟล์ภาพและการกำหนดค่าใหม่ 2-3 รายการลงในโปรเจ็กต์

อย่าลืมอัปเดตเป็น Chrome 75 ขึ้นไป และใช้ไลบรารีการสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้เวอร์ชันล่าสุด

การสร้างรูปภาพสำหรับหน้าจอเริ่มต้น

อุปกรณ์ Android อาจมีขนาดหน้าจอและความหนาแน่นของพิกเซลแตกต่างกัน คุณจะต้องสร้างรูปภาพสำหรับความหนาแน่นของพิกเซลแต่ละแบบเพื่อให้หน้าจอแนะนำดูดีในอุปกรณ์ทุกประเภท

คำอธิบายแบบเต็มของพิกเซลที่ไม่ขึ้นอยู่กับการแสดงผล (dp หรือ dip) อยู่นอกเหนือขอบเขตของบทความนี้ แต่ตัวอย่างหนึ่งคือการสร้างรูปภาพขนาด 320x320dp ซึ่งแสดงสี่เหลี่ยมจัตุรัสขนาด 2x2 นิ้วบนหน้าจอของอุปกรณ์ที่มีความหนาแน่นใดก็ได้ และเทียบเท่ากับ 320x320 พิกเซลที่ความหนาแน่น mdpi

จากขนาดดังกล่าว เราจะคำนวณขนาดที่จำเป็นสำหรับความหนาแน่นของพิกเซลอื่นๆ ได้ ด้านล่างนี้คือรายการที่มีความละเอียดของพิกเซล ตัวคูณที่ใช้กับขนาดฐาน (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/

การอัปเดตแอปพลิเคชัน

เมื่อสร้างรูปภาพสำหรับหน้าจอแนะนำแล้ว ก็ถึงเวลาเพิ่มการกําหนดค่าที่จําเป็นลงในโปรเจ็กต์

ก่อนอื่น ให้เพิ่ม content-provider ลงในไฟล์ Manifest ของ Android (AndroidManifest.xml)

<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>

สุดท้าย ให้เพิ่ม meta-tags ลงในไฟล์ Android Manifest เพื่อปรับแต่ง LauncherActivity

<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 ตรงกับค่าที่กําหนดของแอตทริบิวต์ android:authorities ภายในแท็ก provider

การทําให้ LauncherActivity โปร่งใส

นอกจากนี้ ตรวจสอบว่า LauncherActivity มีความโปร่งใสเพื่อไม่ให้หน้าจอสีขาวแสดงก่อนภาพหน้าจอโดยการตั้งค่าธีมแบบโปร่งแสงสำหรับ LauncherActivity ดังนี้

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

เราหวังว่าจะได้ดูสิ่งที่นักพัฒนาแอปสร้างด้วยกิจกรรมบนเว็บที่เชื่อถือได้ หากต้องการแสดงความคิดเห็น โปรดติดต่อเราที่ @ChromiumDev